Vue.jsでCMSから取得した文字列をシンタックスハイライトする

社内でVue.jsでシンタックスハイライトするのってどうしたらいいの、という相談を受け、検索してみると確かにエディタのハイライト方法などが優先的に出てくるようだったので、タイトルのようなケースの実装を記事にしてみます。

使用するライブラリですが、以前Stack OverflowかGithubで、「Prism.jsを使うといいよ」みたいな情報を見かけて試したところ使いやすかったので、私はPrism.jsを使っています。

まず、npmからprismjsを追加します。

1
$ yarn add -D prismjs
2
or
3
$ npm i -D prismjs

次に、記事表示用のコンポーネントで、mountedか任意の場所でPrismを実行します。
もしSSRしている場合は、process.envなどで判定して、クライアント側でのみ処理してください。

※ CMSからAPI経由でコンテンツ取得〜文字列の表示処理など細かい点は省きます。

1
<script>
2
  import Prism from 'prism'
3
  import 'prism/components/prism-python'
4

5
  export default {
6
    name: 'article',
7
    ~~~
8
    mounted() {
9
      Prism.highlightAll()
10
    }
11
  }
12
</script

最後に公式サイトからお好みのthemeのstyleをダウンロードして任意の方法で読み込んでください。

これで基本的な実装はできましたので、
CMS側の記事作成で、シンタックスハイライトしたい箇所を下記の様に記述すれば反映されるはずです。

Wordpressであればタグ部分のショートコードを作ると楽に運用できるかと思います。

1
<pre>
2
  <code class="language-[言語名]">
3
    // 何らかのコード
4
  </code>
5
</pre>

もし対応言語を増やす場合は、components配下のパターンを追加で読み込むだけで対応できます。

1
import 'prism/components/prism-python'
2
import 'prism/components/prism-go'
3
...

ちなみに、Prism.languages['markup-templating'].buildPlaceholders()がうんたら〜というエラーが出る場合、依存関係のある言語ファイルが読み込まれていない可能性が高いです。

例えば、prism-phpやprism-handlebarsは、markup-templatingが依存しているため、先に読み込んでおく必要があります。

もっと詳しい使い方は公式サイトにありますので、ぜひ参照してみてください。