prismjs を shiki に変更する

作成者:カランカラン
💡

質問やフィードバックがありましたら、フォームからお願いします

目次

    本文は台湾華語で、ChatGPT で翻訳している記事なので、不確かな部分や間違いがあるかもしれません。ご了承ください

    shiki は、コードの構文をハイライトするためのパッケージです。他のパッケージ(highlightjs、prismjs)と比べて比較的新しく、あまり知られていません。shiki は TextMate grammar をトークナイザーの定義として使用しており、他の場所から直接利用でき、追加のカスタム言語を作成する必要がありません。統一された標準があるため、拡張も簡単です。

    さらに、サポートされている構文が豊富で設定も簡単で、内蔵のテーマも多くあります。これにより、もともと使用していた prismjs をスムーズに置き換えることができました。gatsby-remark-shiki をインストールし、設定を適用するだけで完了です。素晴らしいですね。

    いくつかの小さな問題が発生しました:

    • もともと react の highlight を使用していたため、すべてを jsx または tsx に変更する必要があります。
    • c++ を使用している場合は、cpp に変更する必要があります。

    成果を見てみましょう:

    const Component = () => <MyComponent />

    この記事が役に立ったと思ったら、下のリンクからコーヒーを奢ってくれると嬉しいです ☕ 私の普通の一日が輝かしいものになります ✨

    Buy me a coffee