【md/mdx】ソースコードの貼り方

md ファイルでのコードブロック

通常のマークダウン記法を使うことでコードを埋め込みできる。

マークダウン記法の利用

```python
import numpy as np
import streamlit as st

st.write("Hello from Streamlit")
```

表示結果：

import numpy as np
import streamlit as st

st.write("Hello from Streamlit")

---

タイトル付きコードブロックの例

ヒント

コードブロックにタイトルをつけたい場合は、title プロパティを利用する。

マークダウン記法の利用

```python title="簡単なStreamlitコード例"
import numpy as np
import streamlit as st

st.write("Hello from Streamlit")
```

表示結果：

簡単なStreamlitコード例

import numpy as np
import streamlit as st

st.write("Hello from Streamlit")

【発展】 mdx ファイル独自のコード埋め込み方法

mdx ファイルでは、 Code コンポーネントを利用してコードを埋め込むことも可能。 通常は markdown 記法でのコードブロックで十分なことが多いが、より高度な表示をしたい場合に利用する。

ヒント

ソースコードのハイライトなどが必要な場合に便利です。

利用例：

Codeコンポーネントの利用例

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} />

表示結果：

example.js

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