mdxファイルのお作法

コードの記述方法

直接記述

コードをmdxに直接記述する

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

export const exampleCode = `console.log('This could come from a file or CMS!');`;
export const fileName = 'example.js';
export const highlights = ['file', 'CMS'];

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

インポート

コードをインポートする

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

<Code code={importedCode} lang="js" title="コードをインポートする"/>

表示結果

直接記述

example.js

console.log('This could come from a file or CMS!');

インポート

example.js

console.log('This could come from a file or CMS!');