Skip to content

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

March 3

・gatsby

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

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

実現したいこと

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

要件

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

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

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

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

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.js は src/pages/index.js で使用されているものとします。）

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

DARK prism-dark.css

FUNKY prism-funky.css

OKAIDIA prism-okaidia.css

TWILIGHT prism-twilight.css

COY prism-coy.css

SOLARIZED LIGHT prism-solarizedlight.css

TOMORROW NIGHT prism-tomorrow.css

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

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

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

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 の部分がタイトルとしてコードブロックに表示されます。

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

## Reference 参照

- PrismJS [https://prismjs.com/](https://prismjs.com/) （2022-3-3参照）
- gatsby-remark-prismjs [https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/) （2022-3-3参照）
- gatsby-remark-prismjs-add-title [https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs-title/](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs-title/) （2022-3-3参照）
- Standard Styling with Global CSS Files [https://www.gatsbyjs.com/docs/how-to/styling/global-css/](https://www.gatsbyjs.com/docs/how-to/styling/global-css/) （2022-3-3参照）

Tags

react how-to