Nuxt.js + Contentful + Prism

こちらの記事でも紹介していますが、このサイトはNuxt.jsとContentfulで作られています。

記事本文はContentful上のエディタでMarkdownベースで編集し、それをNuxtで取得後HTMLに変換し描画しています。

• @nuxtjs/markdownit

ただ、公開当初のコードブロックはシンプルなスタイルのみで少し物足りない感じだったので、シンタックスハイライトできるように Prism を導入してみました。

• prismjs

使い方自体はBasic Usageにあるように単純ですが、Nuxtで使用するためにすこし手間取ったので方法をまとめます。

ちなみにvue + prismで探すとvue-prism-componentというのもありましたが、Contentfulから取得した本文のうちコードブロックだけ部分的に適用する、という使い方は難しそうだったので使いませんでした。

Nuxtのセットアップ

yarn（or npm）でprismjsをインストール

$ yarn add prismjs

pluginsにprismjsを追加（テーマや言語の設定はお好みで）

// app/plugins/prism.js
import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'
export default Prism

// nuxt.config.js
  plugins: [
    '~/plugins/prism',
  ],

シンタックスハイライトを有効にしたいpagesでprismを読み込む

// app/pages/articles/_slug.vue
...
<script>
import Prism from '~/plugins/prism'
...
  mounted() {
    Prism.highlightAll()
  },
...

以上でNuxtの準備はできました。

最初うまくシンタックスハイライトが効かずにハマりましたが、 mounted で Prism.highlightAll() とすることで解決しました。

Contentfulでのコードブロックの書き方

Contentful上でコードブロックを書くときはMarkdown記法に従ってバッククォート3つで上下を囲いますが、上部のバッククォート3つの後ろに言語を指定してあげると対応してclassを付与してくれます。

下の例では js としているので、code要素には language-js というclassが付与された状態になります。

language- で始まるclassはPrismのSupported languagesに載っているものであれば基本的にシンタックスハイライトできるようになると思います。

• Markdown上の記述

    ```js
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      'fields.slug': slug,
    })
    ```

• 変換したHTML

<pre><code class="language-js">
const posts = await client.getEntries({
  content_type: process.env.CTF_BLOG_POST_TYPE_ID,
  'fields.slug': slug,
})
</code></pre>

Prism導入のビフォーアフター

• Before

      const posts = await client.getEntries({
        content_type: process.env.CTF_BLOG_POST_TYPE_ID,
        'fields.slug': slug,
      })

• After 🎉

      const posts = await client.getEntries({
        content_type: process.env.CTF_BLOG_POST_TYPE_ID,
        'fields.slug': slug,
      })

おまけ

ちょっとしたコードをシェアしたりブログに載せたいのであれば Carbon というサービスも使えそうです。

• Carbon

ブラウザ上でコードを入力してテーマや言語を選択するだけという簡単な使い方で、PNGやSVGでエクスポートしたり埋め込み用のコードを生成できます。