2019.01.01 2019.01.13

highlight.js を利用して本ブログのコードをハイライト表示する

Nuxt.jsで作成している本ブログにhighlight.js を導入しコードをハイライト表示する

Nuxt.js Vue.js ブログ

フロントエンド

[ 目次 ]

はじめに
highlight.jsのインストール
hopscotchスタイルを読み込む
markdownitの設定にhighlightの設定を追加
コードハイライトのBefore/After

Before（修正前）
After（修正後）

最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は Nuxt.jsで作成している本ブログにhighlight.js を導入し、コードをハイライト表示したいと思います。
本ブログでは@nuxtjs/markdownitを利用しているので、最初はmarkdown-it-highlightjsを導入しようと思ったのですが、拡張方法ががわからなかったので断念しました。

今回は、以下のようにpreタグにclass="hljs"が設定されるようにして実装していきます。

<pre class="hljs">
<code>
・・・
</code>
</pre>

※ markdown-it-highlightjs は、codeタグにclass="hljs"が設定される為、スタイルがうまくいかず、cssの上書きも嫌なので利用を辞めました。

highlight.js

highlight.jsのインストール

■ npmを利用する場合

$ npm install highlight.js --save

■ yarnを利用する場合

$ yarn add highlight.js

hopscotchスタイルを読み込む

nuxt.config.jsに以下の設定を追加し、コードハイライトのスタイルを読み込みます。

  css: [
    ・・・
    { src: '~/node_modules/highlight.js/styles/hopscotch.css', lang: 'css' },
    ・・・
  ],

以下のURLからスタイルが探せます。サイトにあったスタイルを適用してみましょう。

https://highlightjs.org/static/demo/

markdownitの設定にhighlightの設定を追加

nuxt.config.jsのmarkdownitの設定部分に以下のようにhighlight設定を追加します。

・・・
markdownit: {
  ・・・
  highlight: (str, lang) => {
    const hljs = require('highlight.js');
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
                hljs.highlight(lang, str, true).value +
                '</code></pre>';
      } catch (__) {}
    }
    // 言語設定がない場合、プレーンテキストとして表示する
    return '<pre class="hljs"><code>' +  hljs.highlight('plaintext', str, true).value + '</code></pre>';
  },
 ・・・
},
・・・