コード

<Code>コンポーネントは、シンタックスハイライトされたコードをレンダリングします。 これは、Markdownのコードブロックを使用できない場合、例えば、ファイルやデータベース、APIから取得したデータを表示する場合に便利です。

プレビュー

example.md

## ようこそ

**宇宙**からこんにちは！

インポート

import { Code } from '@astrojs/starlight/components';

使用方法

外部ソースから取得したコードを表示する場合などに、<Code>コンポーネントを使用してシンタックスハイライトされたコードをレンダリングします。

完全な使用方法と利用可能なプロパティのリストについては、Expressive Codeの「Codeコンポーネント」ドキュメントを参照してください。

MDX

import { Code } from '@astrojs/starlight/components';

export const exampleCode = `console.log('これはファイルやCMSから来る可能性がある！');`;
export const fileName = 'example.js';
export const highlights = ['ファイル', 'CMS'];

<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />

Markdoc

{% code
   code="console.log('これはファイルやCMSから来る可能性がある！');"
   lang="js"
   title="example.js"
   meta="'ファイル' 'CMS'" /%}

プレビュー

example.js

console.log('これはファイルやCMSから来る可能性がある！');

インポートしたコードを表示する

MDXファイルやAstroコンポーネント内で、Viteの?rawインポートサフィックスを使用して、任意のコードファイルを文字列としてインポートできます。 その後、このインポートした文字列を<Code>コンポーネントに渡して、ページにコードを表示することができます。

src/content/docs/example.mdx

import { Code } from '@astrojs/starlight/components';
import importedCode from '/tsconfig.json?raw';

<Code code={importedCode} lang="json" title="tsconfig.json" />

プレビュー

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}

<Code> プロパティ

実装: Code.astro

<Code>コンポーネントは、Expressive Codeの「Codeコンポーネント」ドキュメントに記載されているすべてのプロパティを受け付けます。