🎨

[Slidev]Slidevでシンタックスハイライトを使う

2022/12/01に公開

このページではSlidevのシンタックスハイライトについて解説します。

シンタックスハイライトとは?

シンタックスハイライトとは、テキストエディタでテキスト中の一部分をプログラミング言語の文法などの分類ごとに異なる色やフォントで表示してくれる機能です。

Zennのコードブロックでも、以下のように、プログラミング言語の文法などに応じて異なる配色をしていて、とても視認性が良いですよね。

import math

n = math.sqrt(5)
print(n)

Slidevにおけるシンタックスハイライト

Slidevにおいても、シンタックスハイライトはコードブロックで使われます。
シンタックスハイライトを使うことで、白黒のプレーンなテキストではなく、コードの分類ごとに異なる色で表示することができます。

slidev_highlighter

Slidevでシンタックスハイライトを使う

Slidevでシンタックスハイライトを使うには、フロントマターで以下のように設定します。

slides.md
---
highlighter: prism
---

Slidevではシンタックスハイライトととして、PrismShikiを使うことができます。Shikiを使う場合には、以下のように設定します。

slides.md
---
highlighter: shiki
---

Prismはカスタマイズが簡単にでき、一方、Shikiはより正確にハイライトすることができます。
なお、デフォルトではPrismとなっています。

参考サイト

Discussion