こまごまとしたカスタマイズのメモ その①

2024年06月28日

こまごまといじったのでメモ。

シンタックスハイライトの修正

テンプレートの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`]

これだけでページ全体のリロードがされず、それっぽくいい感じに。やったね!


Profile picture

ふほほへ
2児の親 かつ 都内で働くエンジニア。 Twitter