2020まずやりたいことGatsbyのブログにこんな感じでコードを書いたらシンタックスを色付けしたりファイル名を表示したい。マークダウンでコードを書く場合はコードを```で囲む。このままではシンタックスもタイトルも表示されない。そこでgatsby-remark-prismjsを導入します。prismjscssを入れる背景のカラーテーマがいくつか用意されていて、自分の好みのcssを導入する。詳しくはこちら(PrismJS)最初は8種類数用意されています。prism.cssデファルトprism-dark.cssprism-funky.cssprism-okaidia.cssprism-twilight.cssprism-coy.cssprism-solarizedlight.cssprism-tomorrow.cssそしてgatsby-browser.jsに好きなcssを読み込む。gatsby-browser.jsrequire("prismjs/themes/好きなcss.css")configgatsby-config.jsにプラグインを設定する。class='language-'>みたいにつけてくれます。シングルバックティックの時にシンタックスを付加できるみたいなんですが、動かなかったので初期値のnullで。jsとかに置き換えられるれるみたい。コードにラインナンバーを打つことができます。require("prismjs/plugins/line-numbers/prism-line-numbers.css")を入れる必要があります。falseにしといて個別のコードに表示もできます。true}みたいな感じで表示できます。falseで特定の行にハイライトを入れられます。その他にも細かい設定や言語のエクステンションもあるみたいです。gatsby-remark-prismjsをご覧ください。cssを変更するあとは微調整のcssをあてれば完成です。ちなみに私はtemplatesの中のblog-postという記事のテンプレートにcssをあててみました。block}スニペットにタイトルをつけるこのままでもいいですが、タイトルを表示したかったのでgatsby-remark-code-titlesを導入します。gatsby-remark-code-titlesgatsby-config.jsにプラグインを設定する。},]これでタイトルが表示できます。使い方は3連バックティックの言語の後ろに:title=タイトル名で表示されます。あとはタイトルのcssを少し整えて終了。0;}とりあえずの目標は達成できました。