[[Vue3]]で[[Prism]]を使ってコードブロックを[[シンタックスハイライト]]する方法。[[script setup]]のコンポーネント化する。
```html
<script setup lang="ts">
import { computed } from "vue";
import Prism from "prismjs";
// CSSのインポートがないとハイライトされない
import "prismjs/themes/prism.css";
// grammerのインポートを言語ごとに忘れないように
import "prismjs/components/prism-json";
type Language = "json";
const props = defineProps<{
content: string;
language: Language;
}>();
const highlighted = computed(() =>
// 色を付ける. 色以外はclassのCSSで指定
Prism.highlight(
props.content,
Prism.languages[props.language],
props.language,
),
);
const className = computed(() => `language-${props.language}`);
</script>
<template>
<pre v-html="highlighted" :class="className"></pre>
</template>
```