コードブロックのデザインをいい感じにしました。 自分は普段エディタ (neovim) で iceberg というカラースキームを使っているため、その系統に似せました。文字色も似せたいのですが、ちょっと大変そうだったため、とりあえずは背景やコードブロックタイトルの色のみ似せています。 殴り書きです…
作業工程
プラグインの追加
コードブロックを使えるようにする gatsby-remark-prismjs 、コードブロックにタイトルを入れられる gatsby-remark-code-titles のプラグインを使用します。 gatsby のブログテンプレートを使っていれば gatsby-remark-prismjs は既に入っているはず。
npm install gatsby-remark-code-titles --save-devgatsby-config.js にプラグインを追加します。 gatsby-remark-code-titles は gatsby-remark-prismjs より上側にないとうまく機能しないので注意。
@@ -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 を空文字にしました。デフォルトでは user@host $ echo "hoge" のように表示されるのですが、冗長かなと思い css 側で $ echo "hoge" と表示するように修正しているからです。
css の設定
以下のように css の設定を追加します。色は前述の通り iceberg を意識しました。
.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 が最後に適用されるようにインポート順も入れ替えます。
// 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) ``` ↓
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