こまごまといじったのでメモ。
シンタックスハイライトの修正
テンプレートのgatsby-starter-blog
にすでにある程度含まれていたのだけど、微妙になんか足りてなかったので追加。
具体的にはgatsby-remark-prismjs-add-title
を追加したい。
公式のドキュメントを見ると
npm install gatsby-remark-prismjs-add-title --save-dev
とあるのだけど、実際に実行すると
npm error code E404
npm error 404 Not Found - GET https://registry.npmjs.org/gatsby-remark-prismjs-add-title - Not found
npm error 404
npm error 404 'gatsby-remark-prismjs-add-title@*' is not in this registry.
npm error 404
npm error 404 Note that you can also install from a
npm error 404 tarball, folder, http url, or git url.
なんでやねん。
結局色々にらめっこして以下のコマンドでインストールできた。
Githubのコミット履歴をみるとReadmeのコマンドを修正している気配があるので、ほかの反映忘れっぽい。
npm install gatsby-remark-prismjs-title --save-dev
あとはドキュメントに従ってgatsby-config.js
の修正と、CSSを用意してあげればコードにタイトルを付けられるように。やったね!
こんな感じ.cs
using System;
public class Hello{
public static void Main(){
Console.WriteLine("hello world!");
}
}
相対パスによるリンクをいい感じに修正
マークダウンで書いていると記事同士のリンクをついつい~~/hogehoge/index.md
と書いてしまうのだけど、
それだと馬鹿正直にマークダウンにリンクを作ってしまって、うまく記事に飛べない。
~~/hogehoge/
にしてあげればOKなのだけど、これだとページ全体がリロードされてしまってかっこ悪いので一工夫。
npm i gatsby-plugin-catch-links
gatsby-config.js
// pluginsの中に`gatsby-plugin-catch-links`を追記するだけ
plugins: [`gatsby-plugin-catch-links`]
これだけでページ全体のリロードがされず、それっぽくいい感じに。やったね!