Gatsby＋Contentful＋PrismJSでシンタックスハイライトを表現する

Prismとは

Prismはsyntax highlightを表現するための（多分）最も有名なライブラリです。 Gatsbyにはgatsby-remark-prismjsっていうプラグインとかがあるんですが、このブログはcontentful経由で記事を生成しているのでMarkdownでは記事が存在しないために使えませんでした。 ということで備忘録がてらまとめておこうかと思います。

packageのバージョン

• gatsby: 2.3.3
• react: 16.8.6
• Prism: 1.16.0

ブログの記事自体はContentfulから取得しています。

実際の作業の流れ

まずはinstall

npm i prismjs

Prismの適用

1. PrismをComponentにimport
2. 好きなthemeをimport
3. hooksのuseEffectでComponentマウント時にPrism.highlightAllを呼び出し、Domに適用する

Prismにはいくつかthemeがあるんですが、ぼくは割とdefaultが好きだったので、defaultを選びました。

import React, { useEffect } from 'react'
import Prism from 'prismjs' // step1
import 'prismjs/themes/prism.css' // step2

export default () => {
  useEffect(() => {
    Prism.highlightAll() // step3
  })

  return (
    <pre className="language-javascript">
      <code>
        // Your code
      <code>
    </pre>
  )
}

Raectのhooksについての説明は省略します。 これでPrismが適用されました。

雑記

シンタックスハイライトをサイト上で使いたいと思ったことがなかったので結構初めて知った部分が多かったですが、割と簡単に適用できますね。 最初自前で実装しようかなーとか思ったけど、絶対Prismとか使った方が楽。

リファクタ系のやりたきことも増えてきたから次は見えない部分リファクタとか中心にやろうかなー、、、