Documentation Astro

ここでは、AstroプロジェクトにPrism.jsを導入する手順を紹介します。 前提としてAstroプロジェクトを作成済とし、そこにPrism.jsを導入します。

Prism.jsとは、プログラムコードの構文を解析して、言語ごとに見やすく色付け（シンタックス・ハイライト）をしてくれるJavaScriptライブラリです。

下記のようにエディタのよう表示をしてくれる機能です。

Prism.jsのインストール

まず、npmを使用してPrism.jsをインストールします。

npm install prismjs

Prism.jsの設定ファイルの作成

次に、Prism.jsを使って必要な言語やプラグインを読み込むために設定ファイルを作成します。srcディレクトリ内に新しいファイルを作成します（例：src/prism）。

// src/prism
import * as Prism from 'prismjs';
import 'prismjs/components/prism-jsx.min';
import 'prismjs/components/prism-tsx.min';

// 必要なスタイルテーマをインポートします（例：okaidiaテーマ）
import 'prismjs/themes/prism-okaidia.min.css';

export default Prism;

Prism.jsの使用

src/pages/indexファイル内で設定ファイルをインポートし、使用します。 astroファイルにscriptタグで下記を追加します。

<script>
  import Prism from "../prism";
  document.addEventListener("DOMContentLoaded", (event) => {
    document.querySelectorAll("pre code").forEach((block) => {
      Prism.highlightElement(block);
    });
  });
</script>

ハイライトさせるHTML

ハイライトしたい部分を<pre><code class="language-言語名"> ~ </code></pre>で囲むとスタイルが適応されます。

テーマ

背景色で見た目が変わる可能性があるので、ご参考までに。

  • prism-coy.css / prism-coy.min.css 明るいテーマ、色鮮やかでコントラストが強い

    import 'prismjs/themes/prism-coy.css';
import 'prismjs/themes/prism-coy.min.css';

    prism-coyテーマの例

  • prism-dark.css / prism-dark.min.css 暗いテーマ、ダークモード向け

    import 'prismjs/themes/prism-dark.css';
import 'prismjs/themes/prism-dark.min.css';

    prism-darkテーマの例

  • prism-funky.css / prism-funky.min.css カラフルな見た目

    import 'prismjs/themes/prism-funky.css';
import 'prismjs/themes/prism-funky.min.css';

    prism-funkyテーマの例

  • prism-okaidia.css / prism-okaidia.min.css ダークテーマ、微妙に緑がかった背景

    import 'prismjs/themes/prism-okaidia.css';
import 'prismjs/themes/prism-okaidia.min.css';

    prism-okaidiaテーマの例

  • prism-solarizedlight.css / prism-solarizedlight.min.css ソーライズドライトテーマ、目に優しいライトテーマ

    import 'prismjs/themes/prism-solarizedlight.css';
import 'prismjs/themes/prism-solarizedlight.min.css';

    prism-solarizedlightテーマの例

  • prism-tomorrow.css / prism-tomorrow.min.css 暗い背景にソフトなカラー

    import 'prismjs/themes/prism-tomorrow.css';
import 'prismjs/themes/prism-tomorrow.min.css';

    prism-tomorrowテーマの例

  • prism-twilight.css / prism-twilight.min.css 黒い背景の暗いテーマ

    import 'prismjs/themes/prism-twilight.css';
import 'prismjs/themes/prism-twilight.min.css';

    prism-twilightテーマの例

  • prism.css / prism.min.css デフォルトテーマ

    import 'prismjs/themes/prism.css';
import 'prismjs/themes/prism.min.css';

    prismデフォルトテーマの例

私は、okaidiaのハイライトが一番好みでしたが、背景色は黒が良かったのでstyleを追加しました。

pre {
    background-color: black;
}

prism-okaidiaテーマを黒背景にカスタマイズ

プラグイン

// Line Numbers
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
import "prismjs/plugins/line-numbers/prism-line-numbers";

// Toolbar
import 'prismjs/plugins/toolbar/prism-toolbar'
import 'prismjs/plugins/toolbar/prism-toolbar.css'

// Line Highlight
import 'prismjs/plugins/line-highlight/prism-line-highlight.css'
import 'prismjs/plugins/line-highlight/prism-line-highlight'

// Copy to Clipboard
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'

  • Line Numbers (prism-line-numbers.css, prism-line-numbers) コードブロックに行番号を追加することができます。 <pre class="line-numbers">のようにpreタグにline-numbersクラスが必要なので注意しましょう。 行番号を追加した例

  • Toolbar (prism-toolbar, prism-toolbar.css) コードブロックにツールバーを追加することができます。

  • Line Highlight (prism-line-highlight.css, prism-line-highlight) 特定の行をハイライト表示することができます。 <pre data-line="2, 4-6">のようにpreタグにdata-lineが必要なので注意しましょう。

  • Copy to Clipboard (prism-copy-to-clipboard) クリップボードにコードをコピーするボタンを追加することができます。 Toolbarも一緒にimportしなければコピーボタンは表示されなそうです。

これで、AstroプロジェクトにPrism.jsを導入し、コードのシンタックスハイライトを適用することができます。必要に応じてテーマやプラグインを変更してカスタマイズしてください。

円