## 事象
以下の `CodeBlock.vue` を作成し
```html
<script setup lang="ts">
import Prism from "prismjs";
import { computed } from "vue";
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>
```
以下のように呼び出すとエラーになる。 `prettyJsonResponse` は正しい[[JSON]]文字列。
```html
<CodeBlock :content="prettyJsonResponse" language="json" />
```
エラー内容。
```error
prismjs.js?v=da2bc39b:206 Uncaught (in promise) Error: The language "json" has no grammar.
at ComputedRefImpl.fn (CodeBlock.vue:14:9)
at Proxy._sfc_render (CodeBlock.vue:24:16)
```
### 環境
| 対象 | バージョン |
| --------- | ---------- |
| [[Prism]] | 1.30.0 |
## 原因
grammerに関する情報をインポートしていなかったから。
## 解決方法
インポートする。
```diff
<script setup lang="ts">
import Prism from "prismjs";
+ import "prismjs/components/prism-json";
import { computed } from "vue";
```