コンテンツにスキップ

シンタックスハイライト

Astroには、ShikiとPrismの組み込みサポートがあります。これにより、次の要素にシンタックスハイライトが適用されます。

さらに、Expressive Codeなどのコミュニティ製インテグレーションを追加すると、コードブロックに対してより多彩な装飾やアノテーションを行えます。

Markdownコードブロック

Markdownのコードブロックは、前後を3つのバッククォート(```)で囲むことで表します。開始側のバッククォート直後にプログラミング言語を指定すると、コードを読みやすい色分けで表示できます。

```js
// JavaScriptコードの例
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l);
  return true;
};
```

AstroのMarkdownコードブロックは、デフォルトでShikiのgithub-darkテーマを使用してスタイルされます。出力はインラインstyleのみで、不要なCSSクラスやスタイルシート、クライアントサイドJSは含まれません。

markdown.syntaxHighlight (EN)設定を使って、Prismのスタイルシートを追加しPrismハイライトに切り替えることや、ハイライト機能自体を無効化することもできます。

Shiki使用時に利用できるすべてのオプションはmarkdown.shikiConfig (EN)を参照してください。

デフォルトShikiテーマの設定

Astro設定で任意のShiki組み込みテーマを指定できます。

import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'dracula',
    },
  },
});
Shikiの設定全体はShiki構成リファレンス (EN)を参照してください。

ライトモードとダークモードのテーマを設定する

ライトモード・ダークモードの両方に別テーマを指定できます。

import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },
    },
  },
});

その後、Shikiのダークモード用CSS変数をメディアクエリやクラスで適用して、すべてのMarkdownコードブロックに反映します。Shikiの例では.shikiクラスを使っていますが、Astroでは.astro-codeに置き換えてください。

@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
  .astro-code,
  .astro-code span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* フォントスタイルを変更したい場合のみ */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

独自Shikiテーマを追加する

事前定義済みテーマの代わりに、ローカルファイルからカスタムShikiテーマを読み込めます。

import { defineConfig } from 'astro/config';
import customTheme from './my-shiki-theme.json';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: customTheme,
    },
  },
});

Shikiテーマのカスタマイズ

より詳細なカスタマイズはShikiテーマのドキュメントを参照してください。ライト／ダーク切り替えやCSS変数によるスタイルも利用できます。

Astroで使用する場合は次に注意します。

  • .shikiクラスではなく.astro-codeクラスを使用する
  • css-variablesテーマではCSSカスタムプロパティのプレフィックスを--shiki-から--astro-code-に変更する

コードブロック用コンポーネント

.astroおよび.mdxファイル内では、次の2つのコンポーネントでコードブロックを表示できます。

各コンポーネントのPropsはComponentProps型 (EN)で参照できます。

<Code />

<Code />はShikiを使用し、ほぼすべてのテーマと言語をサポートします。カスタムテーマ・言語・transformers・デフォルトカラーも指定可能です。設定はtheme、lang、transformers、defaultColorの各属性で渡します。MarkdownのshikiConfig設定は引き継がれません。

---
import { Code } from 'astro:components';
---
<!-- JavaScriptコードをハイライト -->
<Code code={`const foo = 'bar';`} lang="js" />
<!-- テーマをカスタマイズ -->
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
<!-- 折り返しを有効化 -->
<Code code={`const foo = 'bar';`} lang="js" wrap />
<!-- インラインコードとして表示 -->
<p>
  <Code code={`const foo = 'bar';`} lang="js" inline />
  がインラインで表示されます。
</p>
<!-- デフォルトカラーを無効化 -->
<Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />

Transformers

Shiki transformersをtransformersプロパティに配列で渡して適用できます。Astro v4.14.0以降では、Shikiのmeta属性を文字列で渡してオプション指定も可能です。

transformersはクラスを付与するのみのため、スタイルは独自にCSSで指定してください。

---
import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers';
import { Code } from 'astro:components';

const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`;
---
<Code
  code={code}
  lang="js"
  transformers={[transformerMetaHighlight()]}
  meta="{1,3}"
/>

<style is:global>
  pre.has-focused .line:not(.focused) {
    filter: blur(1px);
  }
</style>

<Prism />

<Prism />はPrismのCSSクラスを適用してコードをハイライトします。表示にはPrismのスタイルシートを追加する必要があります。

まず@astrojs/prismをインストールします。

npm install @astrojs/prism

インストール後、通常のコンポーネントと同様にインポートして使用できます。

---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />

Prismがサポートする言語一覧に加えて、lang="astro"でAstroコードもハイライトできます。

Prismスタイルシートを追加する

Prismを使用する場合（markdown.syntaxHighlight: 'prism'を設定するか<Prism />コンポーネントを利用する場合）、ShikiではなくPrismのCSSクラスが適用されます。シンタックスハイライトを表示するには、CSSスタイルシートを追加してください。

  1. Prism Themesからお好みのスタイルシートを選択します。
  2. そのスタイルシートをプロジェクトのpublic/ディレクトリに配置します。
  3. レイアウトコンポーネントの<head>内で<link>タグを使って読み込みます。（Prism基本使用法も参照）

使用可能な言語やオプションについては、Prismの言語サポート一覧もご覧ください。

貢献する コミュニティ スポンサー