import Since from '/components/Since.astro'; import ReadMore from '/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

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

• MarkdownまたはMDXファイル内で使用されるすべてのコードフェンス（```）
• .astroファイル内の組み込み<Code />コンポーネント（Shikiを使用）
• .astroファイル内の<Prism />コンポーネント（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設定を使って、Prismのスタイルシートを追加しPrismハイライトに切り替えることや、ハイライト機能自体を無効化することもできます。

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

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

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

import { defineConfig } from 'astro/config';export default defineConfig({  markdown: {    shikiConfig: {      theme: 'dracula',    },  },});

Shikiの設定全体はShiki構成リファレンスを参照してください。

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

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

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つのコンポーネントでコードブロックを表示できます。

• <Code />（Shikiベース）
• <Prism />（Prismベース）

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

<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

pnpm add @astrojs/prism

yarn add @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スタイルシートを追加してください。

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