はじめに
デフォルトのシンタックスハイライトがちょいダサだったので、GatsbyJsのブログにかっこいいシンタックスハイライトを追加してみました。
どうやって追加するか
少し調べてみるとPrismJsというプラグインがカッコ良かったので、追加手順を書いていきます。
プラグインを追加
例によってプラグインを追加していきます。しようするプラグインはいずれも
$ npm install -S prismjs gatsby-remark-prismjsgatsby-config.jsにgatsby-remark-prismjsを追加していきます。gatsby-transformer-remarkのサブプラグインで、markdownをHTMLに変換するプラグインです。
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
'gatsby-remark-prismjs',
],
},
},
],次にCSSで見栄えの調整をしていきます。PrismJsではテーマが用意されているので、用意されたCSSを読み込むだけでそれっぽく整えることができます。例えばブログテンプレートのjsに以下のように追加するだけでOKです。
import "prismjs/themes/prism-okaidia.css"さらにグローバルCSSを追加して自分好みにカスタマイズすることもできます。
pre[class*='language-'] {
background-color: #1c1b1b;
display: block;
margin: 0 0 20px !important ;
padding-right: 1rem;
padding-left: 2rem;
border-radius: 0 4px 4px 4px;
}
code[class*='language-'],
pre[class*='language-'] {
color: #fff;
}
:not(pre)>code[class*='language-text'] {
padding: 2px 10px 3px 12px;
margin: 0 ;
color : #f14668 !important ;
text-shadow: none !important ;
background-color: whitesmoke !important ;
}
.gatsby-highlight-code-line {
background: #545454;
display: block
}実際にmarkdownファイルに記述するときは、以下のようにコードをバッククォート3つで囲えばOKです。※下記は/でエスケープしています。
```js
const hoge = 1;
console.log(hoge);
```/タイトルの表示
gatsby-remark-code-titlesをgatsby-remark-prismjsと同様に追加していきます。gatsby-remark-prismjsより前に読み込まれるようにしましょう。
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
'gatsby-remark-prismjs-title',
'gatsby-remark-prismjs',
],
},
},
],markdownファイルに記述するときはtitle=タイトル名とするだけでタイトルが表示されます。※下記は/でエスケープしています。
```js:title=hoge.js
const hoge = 1;
console.log(hoge);
```/デフォルトでgatsby-code-titleというclass名が付与されるので、以下のように自分でタイトルをカスタマイズできます。お好きなスタイルを当ててあげてください。
.gatsby-code-title {
background: #50c8a7;
color: #eee;
padding: 6px 12px;
font-size: 0.8em;
line-height: 1;
font-weight: bold;
display: table;
border-radius: 4px 4px 0 0;
}まとめ
プラグインを使うだけで簡単にコードブロックの装飾ができました。他にもオプションで色々指定できるので以下を参照してみてください。
