ここは開発関連のアウトプットを目指したブログなので、 コードのひとつやふたつぐらい綺麗に貼り付けられないと格好がつかない。 という今更なことを思って設定した。

使用技術

Prism.jsを使う。Prism.jsとは、スッゲー軽くてたくさんの言語に対応してて プラグイン含めて機能もたくさんある、JavaScript製のシンタックスハイライター。 Gatsbyではgatsby-remark-prismjsを導入することで使用可能になる。

初期状態

このブログはGatsby Starter Blogで作ってる。 デザインもまだ全然変えてない上にちょいちょいいらないところを消したせいで、 素のそれに比べたら逆に退化してるまであるけど、とにかくベースはGatsby Starter Blogである。

で、実はGatsby Starter Blogでは最初からgatsby-remark-prismjsが入っていて、シンタックスハイライトが初期状態から使える。 使い方は以下の通り。

記述例

記事 (Markdown) 上で以下のように記述する。

```jsx
if (isRootPath) {
  header = (
    <h1 className="main-heading">
      <Link to="/">{title}</Link>
    </h1>
  )
}
```

表示結果

上記を記述したとき、以下のように表示される。

(補足)手動で追加する場合

Gatsby Starter Blogでは最初から導入されているのだが、 Prism.jsを手動で導入する場合は以下のように設定する。

必要なパッケージの導入

npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs

gatsby-config.jsの設定

gatsby-config.jsに、以下のように記述する。

• pluginsにgatsby-transformer-remarkを追加
• gatsby-transformer-remarkのpluginsにgatsby-remark-prismjsを追加

plugins: [
  // 略
  {
    resolve: `gatsby-transformer-remark`,    options: {
      plugins: [
        resolve: `gatsby-remark-prismjs`,      ]
    }
  }
  // 略

デザインを変える

ナウでヤングなGatsbyが用意してくれているだけあって初期状態でも大変美しいのだけど、 俺は一部のプログラマが罹患する謎の奇病「黒背景に白文字じゃないとコードを書きたくない病」に冒されているので、 まずは見た目を変えることにする。

テーマの変更

Prism.js公式サイトでは8種類のテーマが用意されている。 見た感じ、「Tommorrow Night」が好みなのでそれを指定することにした。

gatsby-browser.jsに以下を追加する。 ちなみにimportするときのファイル名はここを参照。

import "prismjs/themes/prism-tomorrow.css"

表示結果

これを設定すると以下のように表示される。

これで奇病の症状が緩和される。

インラインのコードにも適用する

コードブロックだけではなく、インラインでコードを書く場合もシンタックスハイライトを設定したい。 ちょっとややこしくなるが、次のように設定・使用する。

gatsby-config.jsの設定

gatsby-config.jsのgatsby-remark-prismjsの設定に以下のように追加する。

{
  resolve: `gatsby-remark-prismjs`,
  options: {    inlineCodeMarker: "±",  },},

この後の使い方で理解されると思うがもう少し説明すると、 この±は「ここからがコードやで」と示すためのマーカーなので何でもいい。 ただコードを書くことを想定しているので、できればASCII文字以外にしたほうがいい(と公式に書いてあった)。

記述例

使うときは以下のように使う。 ±の前が言語、後がコードとなる。

CSSは`css±.some-class { background-color: red }`と書くよ

表示結果

上記を記述したとき、以下のように表示される。

これでインラインでコードハイライトを適用できる。

特定の行をハイライトする

コード全体を示したい場合もあるけど、特定の行を示して説明するという場合も往々にしてある。 故に指定した行をハイライトする設定を行う。

CSSの追加

まずハイライトに適用するCSSを追加する。 マークしている行は、上で選んだテーマに合わせて適当に変更。

.gatsby-highlight-code-line {
  background-color: rgba(255,255,255,.15); /* テーマに合わせて変更 */  display: block;
  margin-right: -1em;
  margin-left: -1em;
  padding-right: 1em;
  padding-left: .5em;
  border-left: .5em solid rgba(255,255,255,.7);  /* テーマに合わせて変更 */}

.gatsby-highlight {
  background-color: #2d2d2d;  /* テーマと同じ色を指定 */  border-radius: .3em;
  margin: .5em 0;
  padding: 1em;
  overflow: auto;
}

.gatsby-highlight pre[class*="language-"] {
  background-color: transparent;
  margin: 0;
  padding: 0;
  overflow: initial;
  float: left;
  min-width: 100%;
}

記述例

記事 (Markdown) 上で以下のように記述する。

```jsx{1,3-5}
if(isRootPath) {
  header = (
    <h1 className="main-heading">
      <Link to="/">{title}</Link>
    </h1>
  )
}
```

表示結果

上記を記述したとき、以下のように表示される。

これで恥ずかしい行から注意を逸らすことができる。

タイトルを表示する

世の中に公開されている素敵なコードたちには、 得てして対象ファイルや言語などの情報が明示されている。 よってそれに倣ってコードにタイトルをつけたい。

必要なパッケージの導入

gatsby-remark-prismjs-titleというパッケージが必要になるため導入する。

npm install gatsby-remark-prismjs-title

gatsby-config.jsにgatsby-remark-prismjs-titleを追加する。 gatsby-remark-prismjsより前に書く必要があるので注意。

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      `gatsby-remark-prismjs-title`,      `gatsby-remark-prismjs`,
      // 略
    ]
  }
}

CSSの追加

タイトルに適用するCSSを追加する。

.gatsby-code-title {
  display: block;
  position: relative;
  background: #2d2d2d;
  width: 100%;
  top: 10px;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}

.gatsby-code-title span {
  display: inline;
  position: relative;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: #eee;
  background: #777;
  border-top-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  padding: 3px;
  top: 1px;
}

記述例

記事 (Markdown) 上で以下のように記述する。

```jsx:title=layout.js
if(isRootPath) {
  header = (
    <h1 className="main-heading">
      <Link to="/">{title}</Link>
    </h1>
  )
}
```

表示結果

上記を記述したとき、以下のように表示される。

これでJavaScriptのソースに「Python」とかいうタイトルをつけてみて初学者を混乱に陥れる嫌がらせが可能になる。 (そして将来の自分自身も混乱する)

行番号を表示する

長いコードをただダラダラと貼り付けた日には、 「この行は一体何行目やねんっ！」とブチ切れた閲覧者様がモニターに右ストレートを炸裂させてしまう危険性があるので、 それを防ぐために行番号を表示することにする。

CSSの追加

gatsby-browser.jsに以下を追加する。

import "prismjs/plugins/line-numbers/prism-line-numbers.css"

以下のCSSも追加する。

.gatsby-highlight pre[class*="language-"].line-numbers {
  padding-left: 2.8em;
}

記述例

記事 (Markdown) 上で以下のように記述する。

```jsx:{numberLines:true}
if(isRootPath) {
  header = (
    <h1 className="main-heading">
      <Link to="/">{title}</Link>
    </h1>
  )
}
```

表示結果

上記を記述したとき、以下のように表示される。

これでモニターの命が守られる。

途中から番号を開始する場合

ちなみに、1 行目からではなく途中から番号を始めたい場合はtrueではなく半角数字を入れれば良い。

```jsx{numberLines:9}
if(isRootPath) {
  header = (
    <h1 className="main-heading">
      <Link to="/">{title}</Link>
    </h1>
  )
}
```

コードの行数が多くなる場合はスクロール

あまりに長いコードを書くとやはり見難いので、適当な長さに達した時はスクロールするようにする。

.gatsby-highlight {
  /* 略 */
  max-height: 25em;}

まとめ

大体これだけやれば、コードを多少は見やすく表示することができるのではないかと思う。 あとはこれまで追加したCSSを好みで調整すれば、サイトに合わせたデザインになった。