はじめに

今回紹介する内容

GatsbyJSのコードスタイルにprismを適用する方法を紹介していきます。

対象読者

・ GatsbyJSを利用している方
・ <code>タグを利用している方

プラグインのインストール

yarn add gatsby-transformer-remark gatsby-remark-prismjs prismjs
yarn add gatsby-remark-prismjs-title

configの追加

今回の設定ではオプションとして、ファイルのタイトル、コード行数が表示される様にしております。

plugins: [
（中略）
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-code-titles`, //ファイルのタイトルを表示
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: true,  //行数を表示（不要ならfalse）
              noInlineHighlight: false,
            },
          },
        ],
      },
    }
]

Prismから適用したいスタイルをダウンロード

https://prismjs.com/
スタイルは数種類あるので、自身の好みのスタイルを選択して、ダウンロードしてきてください。
また、適用する言語を選択することもできます。少しでもスタイルシートを軽量にするために必要な分だけ選択する様にしましょう。

スタイルシートの準備

先ほどダウンロードしたスタイルシートは/src/styles/prismjs/prism.cssに配置してください。（スタイルシートのディレクトリをご自身のサイト構成に合わせて調整してください。）

コードのタイトルをタブの様に表示できる様にinit.cssを追加します。

.gatsby-code-title {
  background: #00896C;
  color: #fff;
  margin-bottom: -0em;
  padding: 1rem 1rem;
  font-size: 1em;
  line-height: 0.2;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  display: table;
  position: relative;
  top: 10px;
}

スタイルシートの読み込み

用意したスタイルシートをサイトに適用するために、gatsby-browser.jsを編集します。 こちらのファイルがない場合は、サイトのルートディレクトリに新規作成してください。

import "./src/styles/prismjs/init.css"
import "./src/styles/prismjs/prism.css"

before/after

元のマークダウン

GAS(javascript)

/**
 * メインプログラム
 * GASではこの関数を呼び出して下さい。
 */
function BacklogPolice() {
    let response = fetchBacklogIssues();
    //console.log(response.length);
    postChatwork(JSON.parse(response));
}

let backlogNamespace = 'XXXXX';//Backlogのドメインを入れて下さい。
let backlogUrl = 'https://' + backlogNamespace + '.backlog.jp/';

before

after

まとめ

いかがだったでしょうか。スタイルを適用することはできましたでしょうか？ デフォルトのコードスタイルではソースコードが見辛いので、ブログでソースコードを掲載する方はぜひ試してみてください。