すしのへや
thumbnail of tech/expressive-code-is-amazing

Expressive Codeでいい感じのコードブロックを手に入れる

いいコードブロックがあると技術記事の筆も進むとされています
7 min to read
#雑記 #技術 #Astro

全国1億人の個人サイト制作者の皆様、こんにちは。

個人サイトは技術記事を書くのに使われることもあると思うので、コードブロックの表示が綺麗だと嬉しいですね。 世にはPrismJS/prism や shikijs/shiki などのありがたいライブラリが存在しており、 すぐにシンタックスハイライトを追加することができます。




技術記事投稿サイトみたいな
高機能なやつが使いたい！！



心の声が漏れました。

このような願いを持つ方は比較的多いとされており、remarkなどのプラグインを刺したりゴリゴリCSSを書いたりしてファイル名やコピーボタンを表示するなどのカスタマイズを行っている方も多いかと思います。 でもやっぱり、個人サイトは頻繁にメンテナンスできないのでもっと手軽に高機能なものが使えると嬉しいですよね。

ということで、そんな願いを叶えられるExpressive Codeというライブラリを紹介していきます。ちなみにこのサイトもExpressive Codeを使うように改修しました。

TL;DR

  • Expressive Codeという強いコードブロックライブラリがある
  • 主に2つの使い方がある
    • remark pluginとして利用する
    • Astro向けにはIntegrationがある
  • かなり高機能でカスタマイズも豊富
    • ファイル名表示
    • コードブロックの枠
    • マーカー
    • などなど

どういうライブラリ？

introduction.txt
Expressive CodeはWeb上でコードブロックを綺麗に表示することを目的としたオールインワンなライブラリです。


デフォルトでファイル名表示やエディタ風のフレーム、コピーボタンなどが付属しているのが大きな特徴です。


差分表示やマーカー、折返し表示にも対応しており、おおむねコードブロックにあると嬉しい機能は揃っています。

構文表示には shikijs/shiki を利用しているので ライトテーマ/ダークテーマの切り替えなども可能で、 プラグインシステムもあるので必要に応じて拡張もできるようになっています。

さらにこれだけ高機能ながらフレームワークを問わず利用でき、 パフォーマンスとアクセシビリティも十分に考慮されている優れたライブラリとなっています。

実際に使ってみる

Expressive Codeには大きく分けて

  1. remark pluginとして利用する
  2. Astro統合を利用する

という2つの使い方があります。

remark pluginとして利用する

Expressive Codeはremarkプラグインをサポートするすべての環境で利用できます。使い方も通常のremarkプラグインと同じで、

Terminal window
npm install remark-expressive-code

としてあとは他のプラグインと同様に設定すればOKです。

example.ts
import { unified } from 'unified'
import remarkExpressiveCode from 'remark-expressive-code'


const mdToHtml = async (markdown: string) => {
  const result = await unified()
    .use(remarkExpressiveCode,{ /* options */ })
    .process(markdown)
  return result.toString()
}

Astro統合を利用する

Astro 向けには公式からガイドが提供されており、 さらに簡単に組み込むことができます。 また、Astroベースのドキュメントフレームワークであるstarlightには最初から組み込まれています。

このドキュメントもstarlight製です

それでは実際にインストールしてみましょう。

  1. Astroプロジェクトのセットアップは完了しているものとします。

  2. 下のコマンドを実行してコンソールの指示に従います。

Terminal window
npx astro add astro-expressive-code
  1. 終 わ り で す

はい、なんとこれだけでMarkdown/MDX内のコードブロックが先程述べたような高機能なものになります。 なお.astroコンポーネント内においては、専用のコンポーネントを通して同じものが使えます。

example.astro
---
import { Code } from 'astro-expressive-code/components'
---


<p>Hello!</p>
<Code code="print('Hello world!')" lang="py" />

↓

Hello!

print('Hello world!')

カスタマイズしてみる

デフォルトではシンタックスハイライトのみですが、上の例でも出したように、 コードブロックで言語を指定したあとにオプションを記述していくことで豊富な表示カスタマイズができます。

この記事ではその一部を紹介します。興味があれば公式ドキュメントを参照してください。

ファイル名表示

コードブロックのlang行または<Code />コンポーネントにtitleを渡すことでファイル名を表示できます。 また、4行目までにファイル名を指すコメントを書くことでも同様の効果が得られます。

```js title="example.js"
console.log("banana")
```
```js
// example.js
console.log("banana")
```

この2つは

example.js
console.log("banana")

同じこれになる

コードブロックの枠

言語によって自動でterminalかcode(エディタ風)の枠が適用されますが、frameオプションで指定することもできます。

```js frame="terminal"
console.log("apple")
```
Terminal window
console.log("apple")

マーカー

GitHubなどで使える行の強調表示やdiff風の表示、特定単語のハイライトなどができます。

```js title="example.js" {7} del={3} ins={4} "str"
const main = (str) => {
  console.log(str)
  console.log("apple")
  console.log("banana")
}


main("Hello! I like...")
```
example.js
const main = (str) => {
  console.log(str)
  console.log("apple")
  console.log("banana")
}


main("Hello! I like...")

おわりに

とここまで駆け足で紹介してきましたが、Expressive Codeには他にも様々な機能がある上にプラグインを書けばどこまでも拡張できます。 導入も非常にスムーズで、特にAstroを使っている場合は15分もあれば置き換えられるでしょう。

簡単かつ手軽に使えて、Astroの公式ドキュメントにも採用されているExpressive Code、ぜひ一度試してみてください。

それではまたどこかで。