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

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

## 実現したいこと

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

## 要件

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

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

[PrismJS](https://prismjs.com/) とGatsby JSでPrismJSを使用するためのプラグインをインストールします。

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

```bash
npm install --save gatsby-remark-prismjs prismjs
```

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

```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）](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/) をご覧ください。

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

[PrismJS](https://prismjs.com/) に用意されている[8種類のテーマ](#prismjs%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E)から好きなものを選んでCSSを読み込みます。

Gatsby JSにグローバルCSSファイルを追加する方法は「[レイアウトコンポーネントを使用する](#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%ABcss%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)」ものと「[レイアウトコンポーネントなしで追加する](#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AA%E3%81%97%E3%81%A7%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%ABcss%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)」方法の2種類があります。

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

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

[PrismJS](https://prismjs.com/) から好きなテーマのCSSをダウンロードして、 `Layout.js` と同じ階層に配置します。（ `Layout.js` は `src/pages/index.js` で使用されているものとします。）

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

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

```jsx
/** 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](https://prismjs.com/) のテーマCSSを読み込む。

```jsx
/** gatsby-browser.js */

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

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

### PrismJSのテーマ

**DEFAULT** `prism.css`  
![](./prism-default.jpg)

**DARK** `prism-dark.css`  
![](./prism-dark.jpg)

**FUNKY** `prism-funky.css`  
![](./prism-funky.jpg)

**OKAIDIA** `prism-okaidia.css`  
![](./prism-okaidia.jpg)

**TWILIGHT** `prism-twilight.css`  
![](./prism-twilight.jpg)

**COY** `prism-coy.css`  
![](./prism-coy.jpg)

**SOLARIZED LIGHT** `prism-solarizedlight.css`  
![](./prism-solarized.jpg)

**TOMORROW NIGHT** `prism-tomorrow.css`  
![](./prism-tomorrow.jpg)

そのほかの言語の例は [PrismJS](https://prismjs.com/) 公式サイトでご確認ください。

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

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

```bash
npm install gatsby-remark-prismjs-add-title --save-dev
```

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

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

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

`````md
````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参照）
```


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

Tags