PrismicのPreformattedTextの内容をシンタックスハイライト表示 Part.1

  • NuxtJS
  • Prismic

はじめに

記事中にソースコードを示す時に、可読性をあげるためにシンタックスハイライトすることがよくあるかと思います。

シンタックスハイライト表示するJSライブラリとして、Prism.jshighlight.jsなどがあります。基本的には、いずれもJSでハイライトさせる要素を指定して、カラーのスタイルシートを読み込ませるだけで実現できます。

この記事では、highlight.jsでシンタックスハイライト表示させる方法について簡単に紹介したいと思います。(利用するフレームワークはNuxt.jsとします。)

PreformattedText

Prismicのリッチテキスト内にコードを書く際は、PreformattedTextのフォーマットを選択します。これはHTMLの<pre>に相当しています。

このフォーマットの箇所についてをシンタックスハイライト表示させようと思います。

html-serializer.jsに追記

プロジェクトのhtml-serializer.jsに対して、以下の内容を追記します。

これはPreformattedの時にHTMLの構成を定義しています。

※ html-serializerについては【Nuxt.js + Prismic.io】第3回 簡単なサイトを作ってみようをご覧ください。

// html-serializer.js
import prismicDOM from 'prismic-dom'
const Elements = prismicDOM.RichText.Elements
export default function (type, element, content, children) {
  /* 〜略〜 */

  // 追記部分
  // preformattedの時のHTMLの構成を定義
  if (type === Elements.preformatted) {
    // Ref: https://prismic.io/docs/javascript/beyond-the-api/html-serializer
    return `<pre><code>${ children.join('') }</code></pre>`
  }

  /* 〜略〜 */
}

highlight.jsを導入

まずはモジュールをインストールします。

npm i highlight.js

次に、記事詳細ページのファイルにて、リッチテキスト内のPreformattedTextに対してハイライト表示させるようにします。

以下の示すのはページのテンプレート部分です。リッチテキストの内容を表示する<prismic-rich-text>コンポーネントの部分が肝です。

<template>
  <div>
    <h1>テスト</h1>
    <div class="js-rich-text">
      <prismic-rich-text :field="body" />
    </div>
  </div>
</template>

そして、次はJS部分になります。

Preformattedの要素に対して、highlightBlock()でハイライト表示するように設定しています。

highlightBlock() : https://tr.you84815.space/hljs/api/highlight-block.html

なお、class属性でハイライトする言語の指定ができるのですが、未指定の場合は自動判別なのでご注意ください。

import hljs from 'highlight.js'
// お好みのカラーのCSSに変えてください
import 'highlight.js/styles/railscasts.css'

export default {
  // 重要な部分だけ抜粋
  mounted() {
    const preformattedNodeList = this.$el.querySelectorAll('.js-rich-text pre code')
    for (let i = 0; i < preformattedNodeList.length; i++) {
      // 注意: 新しいバージョンではhighlightElement()を利用するのが推奨されています。
      hljs.highlightBlock(preformattedNodeList[i])
    }
  },
}

さいごに

簡単な実装で実現できるのでよいですね👍 ただし、今回の例だと言語の判別が自動になってしまうのでご注意ください。

以下のリポジトリに参考となるコードをコミットしてありますので、必要でしたらご覧ください。

https://github.com/nemuvski/nuxtjs-prismic-starter/tree/demo/preformatted-text

⭐️言語選択する場合の方法については以下の記事をご覧ください。

【続】PrismicのPreformattedTextをSyntaxHighlight表示する

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚