Nuxt.js + contentfulでブログを作成した時に、シンタックスハイライターのPrismを導入する手順です。

Contents

設定方法

prismjsのインストール

% yarn add --dev prismjs

prismjsの登録

// app/plugins/prims.js

import Prism from 'prismjs'
import 'prismjs/themes/prism.css'
export default Prism

pluginsディレクトリにprism.jsを作成します。

// nuxt.config.js

export default {
  ...
  plugins: [
    'plugins/prism',
  ]
  ...
}

nuxt.config.jsのpluginsにplugins/prismを登録します。

prismjsの読み込み

import Prism from '~/plugins/prism'

export default {
	...
	mounted () {
		Prism.highlightAll()
	}
  	...
}

シンタックスハイライトを有効にしたいページでprismを読み込みます。

反映させるためにmountedにPrism.highlightAll()を記述します。

記述方法

MarkDown記法

```js
// この中にコードを記述
console.log('Hello World!')
```

contentfulでMarkdownで書く場合は、バッククォート3つにその後ろに指定したい言語を記述します。

Prismでサポートしている言語はSupported languagesで確認出来ます。

変換後

// この中にコードを記述
console.log('Hello World!')

さいごに

Monohibiではデフォルトのスタイルに少し修正を加えていますが、デフォルトでも比較的見やすいし使いやすいと思います。

ただVueがサポートされていないのでちょっと残念でした。一応言語をHTMLに設定するのが一番しっくりくるので、とりあえずサポートされるまではこれでやっていこうと思います。

参考