· 1分で読了
prismjs を shiki に変更する
# フロントエンド この記事は中国語から自動翻訳されたものです。翻訳によりニュアンスが失われている場合があります。
shiki は、コードの構文をハイライトするためのパッケージです。他のパッケージ(highlightjs、prismjs)と比べて比較的新しく、あまり知られていません。shiki は TextMate grammar をトークナイザーの定義として使用しており、他の場所から直接利用でき、追加のカスタム言語を作成する必要がありません。統一された標準があるため、拡張も簡単です。
さらに、サポートされている構文が豊富で設定も簡単で、内蔵のテーマも多くあります。これにより、もともと使用していた prismjs をスムーズに置き換えることができました。gatsby-remark-shiki をインストールし、設定を適用するだけで完了です。素晴らしいですね。
いくつかの小さな問題が発生しました:
- もともと react の highlight を使用していたため、すべてを jsx または tsx に変更する必要があります。
c++を使用している場合は、cppに変更する必要があります。
成果を見てみましょう:
const Component = () => <MyComponent /> 関連記事
- フロントエンドで画像を使うときに注意すべきことJake Archibald の記事をもとに、現代的なレスポンシブ画像の書き方を整理する。なぜ width/height は今でも必要なのか、CSS の aspect-ratio はいつ使うのか、AVIF と WebP をどう選ぶのか、そして picture/source/srcset でモバイル向け画像を切り替える方法までまとめる。
- CSS field-sizing — 1行のCSSでフォーム要素を自動リサイズさせるtextarea の自動高さ調整は、以前は scrollHeight を監視する JavaScript が必要だった。CSS field-sizing: content なら1行で済む。textarea・input・select に対応。
- 超リンクの下線をもっときれいに見せる:text-underline-offsetデフォルトでは下線が文字にかなり近く、こういう見た目を好まないデザイナーもいる。僕自身も、あまりきれいだとは思っていない。
- なぜウェブは Pixel Perfect を追求すべきではないのかPixel Perfect が本当に重要なときだけそれを気にすべきであり、そうでなければ往々にして双方にとって損な結果になる。