Vue.jsでCMSから取得した文字列をシンタックスハイライトする
- prismjs
- syntax-highlight
この記事は最終更新日から5年以上が経過しています。
社内でVue.jsでシンタックスハイライトするのってどうしたらいいの、という相談を受け、検索してみると確かにエディタのハイライト方法などが優先的に出てくるようだったので、タイトルのようなケースの実装を記事にしてみます。
使用するライブラリですが、以前Stack OverflowかGithubで、「Prism.jsを使うといいよ」みたいな情報を見かけて試したところ使いやすかったので、私はPrism.jsを使っています。
まず、npmからprismjsを追加します。
$ yarn add -D prismjs
or
$ npm i -D prismjs
次に、記事表示用のコンポーネントで、mounted
か任意の場所でPrismを実行します。
もしSSRしている場合は、process.env
などで判定して、クライアント側でのみ処理してください。
※ CMSからAPI経由でコンテンツ取得〜文字列の表示処理など細かい点は省きます。
<script>
import Prism from 'prism'
import 'prism/components/prism-python'
export default {
name: 'article',
~~~
mounted() {
Prism.highlightAll()
}
}
</script
最後に公式サイトからお好みのthemeのstyleをダウンロードして任意の方法で読み込んでください。
https://prismjs.com/download.htmlこれで基本的な実装はできましたので、 CMS側の記事作成で、シンタックスハイライトしたい箇所を下記の様に記述すれば反映されるはずです。
Wordpressであればタグ部分のショートコードを作ると楽に運用できるかと思います。
<pre>
<code class="language-[言語名]">
// 何らかのコード
</code>
</pre>
もし対応言語を増やす場合は、components配下のパターンを追加で読み込むだけで対応できます。
import 'prism/components/prism-python'
import 'prism/components/prism-go'
...
ちなみに、Prism.languages['markup-templating'].buildPlaceholders()
がうんたら〜というエラーが出る場合、依存関係のある言語ファイルが読み込まれていない可能性が高いです。
例えば、prism-php
やprism-handlebars
は、markup-templating
が依存しているため、先に読み込んでおく必要があります。
もっと詳しい使い方は公式サイトにありますので、ぜひ参照してみてください。