【Astro】Expressive Codeでコードブロックを使う方法

1
import { defineConfig } from 'astro/config';
2
import expressiveCode from "astro-expressive-code";
3
import mdx from "@astrojs/mdx";
4

5
export default defineConfig({
6
  integrations: [
7
    expressiveCode({
8
      theme: 'github-dark',
9
    }),
10
    mdx()
11
  ],
12
});

1
```
2
コードブロックです
3
```

1
```plaintext
2
こんにちは！
3
```
4

5
```python
6
numbers = [1, 2, 3, 4, 5]
7
for num in numbers:
8
    print(num)
9
```
10

11
```bash
12
echo "test"
13
```

1
```bash title="実行コマンド"
2
echo 'test'
3
```

1
```plaintext title="ソースコード" frame="code"
2
コードブロックです
3
```
4
```plaintext title="ターミナル" frame="terminal"
5
コードブロックです
6
```

コードブロックです

1
```javascript title="test.js" {2}
2
var value = aaa;
3
alert(value);
4
```

var value = aaa;
alert(value);

1
import { defineConfig } from 'astro/config';
2
import expressiveCode from 'astro-expressive-code';
3
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
4
import mdx from '@astrojs/mdx';
5

6
export default defineConfig({
7
  integrations: [
8
    expressiveCode({
9
      theme: 'github-dark',
10
      plugins: [pluginLineNumbers()],
11
    }),
12
    mdx(),
13
  ],
14
});

1
```plaintext showLineNumbers=true
2
行番号を表示します。
3
行番号を表示します。
4
行番号を表示します。
5
```
6

7
```plaintext showLineNumbers=false
8
行番号を表示しません。
9
行番号を表示しません。
10
行番号を表示しません。
11
```