はしがき

こんにちは。前回の公開した記事に、コードを表示させた。最初は真っ白なコードで、zennやQiitaのようにコードを載せる用のブログとしても活用していきたいと考えていたので、真っ白な文字のコードは味気ないと感じていた。

zennなどのブログではコードが色付けされているのでこれはどのようにして実装しているのか調べていると、Prism.jsというのがあった。これで実装できそうだったのでしてみることにしたが、なかなか苦戦したのでどのように実装したのか記録しておく。

Prism.jsの導入

Prism.jsをインストールする。公式サイトではファイルのダウンロードなどがあるが、Nuxtを使っているのでnpmでインストールする。

npm install prismjs

プロジェクトファイル直下のpluginsファイルの中に、prism.jsを作る。そして次のように記述する。

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

次にnuxt.config.jsにprism.jsを読み込ませる。

export default {
  plugins: [
    {src:'@/plugins/prism.js', mode:'client'}
  ],
}

これで使う準備は整った。実際に使う場合には、使いたい場所に以下のように記載する。

<script>
import Prism from "@/plugins/prism"
export default {
  onMounted() {
    Prism.highlightAll()
  }
}
</script>

これで導入されているはず。

Prism.jsではclass名にlanguage-[言語名]とつけられているものを色付けするため、CMSのmarkdown記述でコードブロックの横に言語名をつけるとclass名にもその言語が反映される。Newtでもzennと同じように記述することで反映させることができる。

カスタマイズ

Prism.jsは自分好みにカスタマイズすることができる。これに少し苦労した。

ハイライトしたい言語

最初からすべての言語をハイライトできるわけではないため、prism.jsでハイライトしたい言語を増やす。

例えばTypeScriptをハイライトさせたい場合は以下のように記述する。

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

import 'prismjs/components/prism-typescript'  //追記

export default Prism

私はHTMLが一番ハイライトさせたかったので、以下のように設定した。

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

import 'prismjs/components/prism-html'

export default Prism

しかしこの記述ではエラーが起こってしまった。

HTMLのハイライト

Prism.jsの公式サイトではちゃんとサポートされている言語ではあるものの、何故かprism-htmlではエラーが起こる。pluginsフォルダのprism.jsはcomponentsファイルを参照しているようだったので、色々探してみるとPrism.jsはnode_modulesにあったのでそこを確認すると、componentsフォルダに、様々な言語名のファイルがあった。しかしその中に、prism-htmlの名前はなかった。

調べてみると、Unescape markupというプラグインを追加したほうがいいようだった。マークアップをエスケープせずに表示してくれるというプラグインで、HTMLを使う際には必須らしい。以下のようにprism.jsに追記し、変更する。

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

import 'prismjs/components/prism-markup'

import 'prismjs/plugins/unescaped-markup/prism-unescaped-markup'

export default Prism

このように設定すると、HTMLがハイライトされるようになる。

フォントの変更等

Prism.jsの提供されているテーマをそのまま使うと、フォントなど変更できないようになっていた。

そこで、assetsフォルダに新しくcssファイルを作る。その中に記述していく。

大抵、以下のようなclass名で指定されているので、これに好きなスタイルを設定していく。

/* assets/css/prism.css */

code[class*="language-"],
pre[class*="language-"]{
/* 好きなスタイルを設定 */
}

この方法が問題ないのかはわからないが、このようにしてカスタマイズすることができる。

カスタマイズした後はprism.jsに以下のように設定する。

import Prism from 'prismjs'
import 'assets/css/prism.css'

import 'prismjs/components/prism-markup'

import 'prismjs/plugins/unescaped-markup/prism-unescaped-markup'

export default Prism

あとがき

このようにしてPrism.jsを導入し、カスタマイズまで行った。Prism.jsのプラグインにDiff Highlightがあり、これも導入したかったのですが何故かできなかった。いずれ設定したい。

藝術的な、余りに藝術的な

シンタックスハイライトを実装した