tips_gatsby

[GatsbyJS] Prism.jsを使用してソースコードをハイライト表示する

278言語に対応しながら軽量で拡張可能なシンタックスハイライトライブラリ PrismJS を使用して、Gatsby JS製のブログの本文内のソースコード(コードブロック)をシンタックスハイライト表示する方法です。

シンタックスハイライトに加えて、当ブログのようにコードブロックにファイル名や言語名などタイトルを表示する方法もあわせてご紹介します。

実現したいこと

  • Gatsby JS製のブログの本文内のソースコード(コードブロック)をシンタックスハイライト表示させる
  • コードブロックにタイトルを表示させる

要件

  • Gatsby JS製ブログ
  • 本文記事をMarkdownで作成している

1. プラグインをインストールする

PrismJS とGatsby JSでPrismJSを使用するためのプラグインをインストールします。

※ MarkdownファイルをHTMLに変換するためのプラグイン gatsby-transformer-remark はインストール済みとします。

SHELL
npm install --save gatsby-remark-prismjs prismjs

インストールしたプラグインを有効にするため gatsby-config.js に記述し、必要に応じてオプションを設定します。

gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            // <pre>タグのclass名のプレフィックス名を設定
            // 例 : <pre class="language-js">
            classPrefix: "language-",
            // セパレーターを使用して、
            // シングルバックティックなどのインラインコードに言語を設定できる
            inlineCodeMarker: null,
            // 言語の別名を設定できる
            // 例 : { sh: "bash" }
            aliases: {},
            // 行番号の表示・非表示
            showLineNumbers: false,
            // true にするとインラインコードをハイライトしない
            noInlineHighlight: false,
          },
        }
      ]
    }
  }
]

上記以外に、新しい言語定義を追加したりすでに存在する言語定義を拡張するオプションなどもありますが、ここでは省略します。その他のオプションに関しての詳細は gatsby-remark-prismjs(English) をご覧ください。

2. シンタックスハイライトのテーマ用CSSを読み込む

PrismJS に用意されている8種類のテーマから好きなものを選んでCSSを読み込みます。

Gatsby JSにグローバルCSSファイルを追加する方法は「レイアウトコンポーネントを使用する」ものと「レイアウトコンポーネントなしで追加する」方法の2種類があります。

レイアウトコンポーネントを使用してグローバルCSSファイルを追加する

ヘッダーやスタイルなどのサイト全体で共有されるレイアウトコンポーネント( Layout.js など)でテーマ用のCSSを読み込みます。

PrismJS から好きなテーマのCSSをダウンロードして、 Layout.js と同じ階層に配置します。( Layout.jssrc/pages/index.js で使用されているものとします。)

DIRECTORY
src/
  │───components/
  │   │─ Layout.js
  │   └─ prism.css
  │
  └───pages/
        └─  index.js

Layout.jsでテーマ用のCSSを読み込みます。

src/components/Layout.js
import React from "react"
/* DEFAULTテーマを読み込む場合の例です */
import "./prism.css"

const Layout = ({ children }) => {
  return <div>{children}</div>
}

export default Layout

レイアウトコンポーネントなしでグローバルCSSファイルを追加する

Gatsby JSのテーマフォルダ直下に gatsby-browser.js を作成して、使用したい PrismJS のテーマCSSを読み込む。

gatsby-browser.js
/* DARKテーマを読み込む場合の例です */
import "prismjs/themes/prism-dark.css"

// または
// require("prismjs/themes/prism-dark.css")

PrismJSのテーマ

DEFAULT prism.css
prism default

DARK prism-dark.css
prism dark

FUNKY prism-funky.css
prism funky

OKAIDIA prism-okaidia.css
prism okaidia

TWILIGHT prism-twilight.css
prism twilight

COY prism-coy.css
prism coy

SOLARIZED LIGHT prism-solarizedlight.css
prism solarized

TOMORROW NIGHT prism-tomorrow.css
prism tomorrow

そのほかの言語の例は PrismJS 公式サイトでご確認ください。

3. コードブロックにタイトルを表示する

プラグイン gatsby-remark-prismjs-add-title をインストールします。

SHELL
npm install gatsby-remark-prismjs-add-title --save-dev

gatsby-config.js にインストールしたプラグインを設定します。

※重要 コードブロックを使用する他のプラグインより前に定義する必要があります。

gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-prismjs-title',
          options: {
            className: 'your-custom-class-name'
          }
        }
      ]
    }
  }
]

タイトル部分のタグには gatsby-code-title クラスが設定されます。
必要に応じてスタイルを設定してください。

本文記事内での使い方は、Markdownに :title=表示するタイトル と記述します。
以下の例では example-file.js の部分がタイトルとしてコードブロックに表示されます。

MARKDOWN
```js:title=example-file.js
alert('how cool is this!');
```js

Reference 参照

© 2018 - Present chocolat All Rights Reserved.