シンタックスハイライト Shiki で美しいコードを表現しよう

要約

VS Code と同じ美しいシンタックスハイライトを実現する Shiki の使い方。

意見はこのエリアに表示されます

ブログやドキュメントのコードが、もっと魅力的になったら素晴らしいですよね。シンタックスハイライトの Shiki を使えば、VS Code と同じ美しいシンタックスハイライトを実現できます。今回は、この強力なツールの使い方をステップバイステップで解説していきますね。

最初のステップは、必要なパッケージのインストールです。npm を使って、簡単に Shiki をプロジェクトに追加できます。

Shiki を使い始めるには提供されているショートハンド関数を使用することです。これらの関数は必要なテーマと言語をオンデマンドで読み込み、メモリ内で自動的にキャッシュします。

では、実際にコードを書いていきましょう。

Shiki の基本的な使い方は、驚くほど簡単です。以下のサンプルコードを見てみましょう。

このシンプルなコードで、美しくハイライトされた HTML を生成できます。

codeToHtml 関数にコードスニペットと lang および theme を指定して渡すと、ページに埋め込むことができるハイライト済みの HTML 文字列が返されます。生成された HTML は各トークンごとにインラインスタイルが含まれているため、追加の CSS は不要です。

次は、より実践的な使い方を見ていきましょう。

Shiki には 2 つの重要な使い方があります。これまで見てきた codeToHtml のようなショートハンド関数と、より柔軟な createHighlighter を使用する方法です。それぞれの特徴を見ていきましょう。

ショートハンド関数は内部で WASM を使用し、必要なテーマと言語を自動的にロードします。これは便利である一方、毎回非同期処理が発生するため、パフォーマンスに影響を与える可能性があります。

大量のコードをハイライトする場合や、パフォーマンスが重要な場合は、createHighlighter を使用してハイライターインスタンスを作成する方法がおすすめです。

このアプローチには以下のような利点があります：

ハイライターインスタンスの作成は比較的コストの高い操作です。アプリケーション全体で再利用できるようにシングルトンとして管理することをおすすめします。

Shiki をプロジェクトで効果的に使用するためのベストプラクティスをご紹介します。

Shiki を使う上で、いくつかの一般的なエラーに遭遇するかもしれません。ここでは、主な問題とその解決方法を紹介します。

テーマが見つからないエラー

解決策：getHighlighter の呼び出し前に、必ずテーマが正しく指定されているか確認しましょう。また、テーマは動的にロードされるため、明示的にロードする必要があります。

言語が認識されないエラー

解決策：サポートされている言語識別子を使用しているか確認してください。必要な言語は初期化時またはあとから loadLanguage メソッドでロードできます。

非同期処理の問題

解決策：getHighlighter は非同期関数なので、必ず await を使用してください。

Shiki は Web プロジェクトでも簡単に利用できます。CDN を使用する場合は以下のようにシンプルに実装できます。

Shiki を効率的に使用するためのポイントをご紹介します。

Shiki を使ったシンタックスハイライトの基本を学びました。これであなたのコードは、より読みやすく、より美しくなるはずです。さらに深く Shiki を活用したい場合は、公式ドキュメントで高度な機能について学ぶことができます。

次は、実際のプロジェクトに Shiki を組み込んで、素晴らしいドキュメントを作成してみましょう。

Explore More