この記事では
- GatsbyJS + Contentfulのマークダウンブログにコードシンタックスハイライトを導入する方法
について紹介します。
Contentfulのマークダウンは、コードのシンタックスハイライトに対応していないので、自分で設定する必要があります。
具体的には以下のように書けば、、
```javascript
const test = "hoge"
console.log(test);
```このように表示されるようにしていきたいと思います。
const test = "hoge"
console.log(test);導入の際に詰まってしまい、なかなか出来なかったので他の方の参考になればと思います。
プラグインのインストール
まずは、必要となるPrismjsというライブラリをインストールしていきます。
以下のコマンドでインストールします。
$ yarn add gatsby-remark-prismjs prismjsまたは、以下のコマンドでインストールします。
$ npm install -S prismjs gatsby-remark-prismjsプラグインの設定
次にPrismjsの設定をgatsby-config.jsに追加していきます。
Contentfulのマークダウンをgatsby-transformer-remarkでHTMLで変換しています。
そのため、gatsby-transformer-remarkの中のpluginsに今回導入するgatsby-remark-prismjsを追加します。
実際のコードは以下のようになりました。
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
host: process.env.CONTENTFUL_HOST,
}
},
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: true,
noInlineHighlight: false,
},
},
],
},テーマのインポート
gatsby-config.jsの設定が終わったら、PrismjsのテーマのCSSをインポートしていきます。
gatsby-browser.jsにPrismjsのテーマをインポートします。
Prismjsのテーマは何種類かあるので、好きなものを選んでみてください。
gatsby-browser.jsファイルが無ければ、gatsby-config.jsと同じ階層に、gatsby-browser.jsというファイルを作成しておきます。
実際のコードは以下のようになりました。
require("prismjs/themes/prism-tomorrow.css")これでプラグインの設定が終わり、マークダウンのシンタックスハイライトが表示されるようになります。
コードブロックにタイトルを表示できるようにする
コードブロックのシンタックスハイライトを表示することはできましたが、コードブロックにファイル名などタイトルを入れたい場合などはgatsby-remark-code-titlesというプラグインを追加でインストールします。
$ yarn add gatsby-remark-code-titlesまたは、以下のコマンドでインストールします。
$ npm install -S gatsby-remark-code-titles先ほどのgatsby-config.jsファイルに以下を追加します。
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-code-titles`,
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
host: process.env.CONTENTFUL_HOST,
}
},
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: true,
noInlineHighlight: false,
},
},
],
},私はタイトル部分のスタイルを編集したかったので、以下のようにCSSを追加しました。
.gatsby-code-title {
background: #999;
color: #fff;
margin-bottom: -0.65em;
padding: 0.7rem 1.05rem;
font-size: 0.8em;
line-height: 0.4;
font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
font-weight: 600;
border-radius: 8px 8px 0 0;
display: table;
}使い方
マークダウンでコードブロックの1行目に:title=タイトル名のように記載します。
```javascript:title=test.js
const test = "hoge"
console.log(test);
```すると以下のように表示されます。
const test = "hoge"
console.log(test);これでコードブロックにタイトルを入れることができるようになりました。
おわりに
gatsby-config.jsのプラグインの設定で、少し詰まってしまいましたが無事シンタックスハイライトをブログに導入することができました。
コードが断然見やすくなり、導入して良かったです。
Prismjsはかなり簡単に、おしゃれなテーマのシンタックスハイライトを導入することができるのでおすすめです。
ぜひみなさんも導入してみてください！