[[Nuxt2]]のUIでソースコードをハイライトしたい場合。[[Prism]]を使う。
## インストール
```console
npm i prismjs
npm i -D @types/prismjs
```
## [[Nuxt2]]で使えるようにする
```javascript:plugins/prism.ts
import Prism from 'prismjs'
// 使いたいテーマのインストール
import 'prismjs/themes/prism-okaidia.css'
// 使いたい言語のシンタックスを設定(ここではJSONとTypeScript)
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-typescript'
export default Prism
```
```javascript:nuxt.config.js
plugins: [
// 追加
{ src: '~/plugins/prism.ts' },
]
```
## コンポーネント化する
```html:HighlightCode.vue
<template>
<pre v-html="highlighted" :class="className"></pre>
</template>
<script lang="ts">
import { defineComponent, PropType } from '@nuxtjs/composition-api'
import Prism from 'prismjs'
import { computed } from '@vue/composition-api'
type Language = 'json' | 'typescript'
export default defineComponent({
props: {
content: { type: String, required: true },
language: { type: String as PropType<Language>, required: true },
},
setup(props) {
const highlighted = computed(() =>
// 色を付ける. 色以外はclassのCSSで指定
Prism.highlight(
props.content,
Prism.languages[props.language],
props.language
)
)
const className = computed(() => `language-${props.language}`)
return { highlighted, className }
},
})
</script>
```
呼び出し側はこんな感じ。
```html
<highlight-code :content="prettyJsonString" language="json" />
```
## 対応言語を増やす
2箇所に言語設定を追加する。
- `plugins/prism.ts`の`import prismjs/components/prism-xxx`
- `HighlightCode.vue`の`type Language`