Gatsby でコードブロックを iceberg っぽい配色にする

Fri Oct 16 2020

    コードブロックのデザインをいい感じにしました。 自分は普段エディタ (neovim) で iceberg というカラースキームを使っているため、その系統に似せました。文字色も似せたいのですが、ちょっと大変そうだったため、とりあえずは背景やコードブロックタイトルの色のみ似せています。 殴り書きです…

    作業工程

    プラグインの追加

    コードブロックを使えるようにする gatsby-remark-prismjs 、コードブロックにタイトルを入れられる gatsby-remark-code-titles のプラグインを使用します。 gatsby のブログテンプレートを使っていれば gatsby-remark-prismjs は既に入っているはず。

    npm install gatsby-remark-code-titles --save-dev

    gatsby-config.js にプラグインを追加します。 gatsby-remark-code-titlesgatsby-remark-prismjs より上側にないとうまく機能しないので注意。

    gatsby-config.js
    @@ -53,7 +53,22 @@ module.exports = {
                 },
               },
               `gatsby-remark-autolink-headers`,
    -          `gatsby-remark-prismjs`,
    +          `gatsby-remark-code-titles`,
    +          {
    +            resolve: `gatsby-remark-prismjs`,
    +            options: {
    +              classPrefix: "language-",
    +              inlineCodeMarker: null,
    +              aliases: [],
    +              showLineNumbers: false,
    +              prompt: {
    +                user: "",
    +                host: "",
    +                global: true,
    +              },
    +              noInlineHighlight: false,
    +            },
    +          },
               `gatsby-remark-copy-linked-files`,
               `gatsby-remark-smartypants`,
               {

    gatsby-remark-prismjs には options が存在します。基本的に 公式 での設定をコピペしたのですが、 prompt だけ変更し、 user や host を空文字にしました。デフォルトでは [email protected] $ echo "hoge" のように表示されるのですが、冗長かなと思い css 側で $ echo "hoge" と表示するように修正しているからです。

    css の設定

    以下のように css の設定を追加します。色は前述の通り iceberg を意識しました。

    src/style.css
    .gatsby-code-title {
        background: #2a3158;
        color: #c6c8d1;
        margin-bottom: -0.85em;
        padding: 0.7rem 1.05rem;
        font-size: 0.8em;
        line-height: 0.2;
        font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
        font-width: 600;
        border-radius: 8px 8px 0 0;
        display: table;
    }
    
    .gatsby-highlight-code-line {
      background-color: #272c42;
      display: block;
      margin-right: -1em;
      margin-left: -1em;
      padding-right: 1em;
      padding-left: 0.75em;
      border-left: 0.25em solid #6b7089;
    }
    
    .gatsby-highlight {
      background-color: #161821;
      border-radius: 0.3em;
      margin: 0.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%;
    }
    
    .gatsby-highlight pre[class*="language-"].line-numbers {
      padding: 0;
      padding-left: 2.8em;
      overflow: initial;
    }
    
    .command-line-prompt {
    	border-right: 0px solid #999;
    	display: block;
    	float: left;
    	font-size: 100%;
    	letter-spacing: -1px;
    	margin-right: 1em;
    	pointer-events: none;
    
    	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    }
    
    .command-line-prompt > span:before {
      color: #999;
      content: " ";
      display: block;
      padding-right: 0.0em;
    }
    
    /* Prompt for all users */
    .command-line-prompt > span[data-user]:before {
      content: "$";
    }
    
    /* Prompt for root */
    .command-line-prompt > span[data-user="root"]:before {
      content: "#";
    }
    
    .command-line-prompt > span[data-prompt]:before {
      content: attr(data-prompt);
    }

    css のインポート

    各種 css を import します。なぜか prismjs/themes/prism.css が最後で import されていたので、 src にある css が最後に適用されるようにインポート順も入れ替えます。

    gatsby-browser.js
     // custom typefaces
     import "typeface-montserrat"
     import "typeface-merriweather"
    +// Highlighting for code blocks
    +import "prismjs/themes/prism-tomorrow.css"
    +
    +import "prismjs/plugins/line-numbers/prism-line-numbers.css"
    +import "prismjs/plugins/command-line/prism-command-line.css"
    +
     // normalize CSS across browsers
     import "./src/normalize.css"
     // custom CSS styles
     import "./src/style.css"
    -
    -// Highlighting for code blocks
    -import "prismjs/themes/prism.css"

    結果

    ```python{2,4-5}:title=hoge.py print(0) print(1) print(2) print(3) print(4) print(5) ``` ↓

    hoge.py
    print(0)
    print(1)
    print(2)
    print(3)
    print(4)
    print(5)

    ```shell{outputLines: 2,4}{} echo "hello" hello echo $USER y011d4 ``` ↓

    echo "hello"
    hello
    echo $USER
    y011d4
    

    ```shell{outputLines: 2}{promptUser: root} echo $USER y011d4 ``` ↓

    echo $USER
    root
    

    参考

    https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs https://www.gatsbyjs.com/plugins/gatsby-remark-code-titles