はじめに
ギフティ Advent Calendar 2019 - Qiitaの3日目の記事。枠が空いていたので書いた。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっていきたい。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。まずはシンタックスハイライトが適用されるようにするところから。
前提
このブログはGatsby公式のgatsby-starter-blogをベースに作られている。
gatsbyjs/gatsby-starter-blog: Gatsby starter for creating a blog
やりたいこと
ブログ内に出てくるJSやRubyのコードにシンタックスハイライトを適用したい。
デモ
Markdown
```js
let hoge = "piyo"
console.log(hoge)
```こんな感じのマークダウンを書くと、
let hoge = "piyo"
console.log(hoge)こんな感じで表示され、
Markdown
```ruby
def hoge
hoge = "piyo"
p hoge
end
```こんな感じのマークダウンを書くと、
def hoge
hoge = "piyo"
p hoge
endこんな感じで表示される。
どうやるか
- Prism.jsを使う
- Prism
- Prism.jsは軽量・簡単・多機能なJSのシンタックスハイライターで、主要な言語のシンタックスハイライトがサポートされており、テーマやプラグインも存在する
- GatsbyJSでマークダウン上のコードブロックにPrism.jsを適用するには、gatsby-remark-prismjsという公式のプラグインを使用する
やったこと
- 実は、gatsby-starter-blogを使っていれば、最初からプラグインが入っていて、設定も済んでいるので、何もしなくてもシンタックスハイライトが適用される
- が、一応、どの辺りの設定がシンタックスハイライトに関連しているのかを解説するために、一から入れる時の手順を示す
console
$ npm install -S prismjs gatsby-remark-prismjs- このコマンドにより、package.jsonとpackage-lock.jsonによしなに追加される
- あとは、gatsby-transformer-remarkのオプションのプラグインとして、gatsby-remark-prismjsを登録する
gatsby-config.js
module.exports = {
...
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-prismjs`,- これでシンタックスハイライトが適用されるようになる
- あとは、好みに合わせて、テーマを入れる
- Prism.jsの公式サイトでThemeを変更した時の見た目の変化を確認できる
- このブログでは、Tomorrow Nightを採用している
/src/components/layout.js
import "prismjs/themes/prism-tomorrow.css"import "./global.module.sass"- また、コードブロック内のスタイルを好みに応じて修正した
/src/components/global.module.sass
\:global
...
.gatsby-highlight
margin: 24px 0
::-webkit-scrollbar
display: noneさいごに
記事を書く速度を高めたい
