Expressive Code使用メモ

617 文字

3 分

Expressive Code使用メモ

2026-02-07

技術

Astro

/

Expressive Code

Expressive Codeとは？#

Expressive Codeは、コードブロックにファイル名の表示やシンタックスハイライトなどを手軽に実装することのできるイカしたライブラリです。

Expressive Codeを使用するのは非常に簡単で、Markdownのコードブロック構文(バッククォーテーションで囲む)を使用するだけで、自動的に綺麗なハイライトが適応されます。

導入方法については多くの記事で詳しく解説されている為ここでは割愛し、基本的な使い方の解説に移ります。

基本的な使い方#

以下はJavaScriptのコードを表示する例です。

1
// これはJavaScriptのコードです
2
function greet(name) {
3
  console.log(`Hello, ${name}!`);
4
}
5

6
greet("Expressive Code");

例#

1
```js
2
// これはJavaScriptのコードです
3
function greet(name) {
4
  console.log(`Hello, ${name}!`);
5
}
6

7
greet("Expressive Code");
8
```

コードを自動改行をさせない#

冒頭にwrap=falseを記述する

1
// これはJavaScriptのコードです
2
function greet(name) {console.log(`Hello, ${name}!`);}greet("Expressive Code Expressive Code Expressive Code Expressive Code Expressive Code");

例#

1
```js wrap=false
2
// これはJavaScriptのコードです
3
function greet(name) {console.log(`Hello, ${name}!`);}greet("Expressive Code Expressive Code Expressive Code Expressive Code Expressive Code");
4
```

ポイント
デフォルトでは自動的に改行される仕様です。

ファイル名をタブ表示させる#

冒頭にtitle="xxx"を記述する

1
function calculateArea(radius) {
2
  // 円の面積を計算します
3
  const pi = 3.14159;
4
  const area = pi * radius * radius;
5
  return area;
6
}
7

8
calculateArea(10);

例#

1
```javascript title="index.js" wrap=false
2
function calculateArea(radius) {
3
  // 円の面積を計算します
4
  const pi = 3.14159;
5
  const area = pi * radius * radius;
6
  return area;
7
}
8

9
calculateArea(10);
10
```

行の強調表示#

特定の行を読者の注意を引くために強調表示したり、コードに短い説明を追加するテキストマーカーを使用できます。

行を強調表示するには、コードブロックの言語指定の後に {} で行番号を指定します。

1
function calculateArea(radius) {
2
  // 円の面積を計算します
3
  const pi = 3.14159;
4
  const area = pi * radius * radius;
5
  return area;
6
}
7

8
calculateArea(10);

{2,4-5} は2行目と4行目から5行目を強調表示します。

例#

1
```js {2,4-5}
2
function calculateArea(radius) {
3
  // 円の面積を計算します
4
  const pi = 3.14159;
5
  const area = pi * radius * radius;
6
  return area;
7
}
8
```

コードの差分表示#

変更された行の前に + または - を記述することで差分が表現されます。

1
function diff() {
2
  console.log('Old code')
3
  console.log('New code')
4
}

例#

1
```diff lang="js"
2
  function diff() {
3
-   console.log('Old code')
4
+   console.log('New code')
5
  }
6
```

おまけ#

豆知識
コードブロックの中にコードブロックを追加するには以下のようにネストして書く必要があります。
1
````markdown
2
```javascript
3
console.log("Nested Code Block Example");
4
```
5
````

Expressive Code使用メモ

https://fuwari.vercel.app/posts/2026/02/07/

作者

小林

公開日

2026-02-07

ライセンス

CC BY-NC-SA 4.0

NEC Mateを解体する

ジャンクPCを購入