はじめに
Rehype Pretty CodeはShikiベースのシンタックスハイライト機能を提供するrehypeプラグイン。
この記事では、実際にRehype Pretty Codを使用した例を挙げていきます。
シンタックスハイライト
タイトル
title=""でタイトルがつけられる。
```go title="hello"
func main() {
fmt.Println("hello")
}
```func main() {
fmt.Println("hello")
}キャプション
caption=""でタイトルがつけられる。
```go caption="hello"
func main() {
fmt.Println("hello")
}
```func main() {
fmt.Println("hello")
}行番号の追加
showLineNumbersをつけると行番号をつけられる。
```go showLineNumbers
func main() {
fmt.Println("hello")
}
```func main() {
fmt.Println("hello")
}showLineNumber{4}のようにしたら最初の数字を変更できる。
```go showLineNumbers{5}
func main() {
fmt.Println("hello")
}
```func main() {
fmt.Println("hello")
}行ハイライト
go {2}のように行番号で指定する。
```go {2}
func main() {
fmt.Println("hello")
}
```func main() {
fmt.Println("hello")
}文字のハイライト
go /Println/｀のように単語を指定すると、特定の単語にハイライトをつけられる。 "Println"のように"でも可能。複数追加する場合は、js /carrot/ /apple/`のようにする。
```go /Println/
func main() {
fmt.Println("hello")
}
```func main() {
fmt.Println("hello")
}マーカー
グループを設定して、マーカをつけることができる。
```js /age/#r /name/#r /setAge/#y /setName/#y /50/#p /"Taylor"/#p
const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");
```const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");以下のcssを修正すると、マーカーの色やグループIDを変えたり追加したりすることができる。
[data-chars-id="r"] {
@apply !text-pink-300 bg-rose-800/50 border-b-pink-600 font-bold;
}
[data-chars-id="y"] {
@apply !text-yellow-300 bg-yellow-800/50 border-b-yellow-600 font-bold;
}
[data-chars-id="p"] {
@apply !text-purple-200 bg-purple-800/50 border-b-purple-600 font-bold;
}diff
diff + 言語のシンタックスハイライトを付与する。
Shikiのtransformerで実現している。
// [!code --]をつけると、-、// [!code ++] をつけると+になる。
表示されないのでmarkdownの方では/の後のスペースを抜いている。
```go
func main() {
fmt.Println("hello")
fmt.Println("see you")
}
```func main() {
fmt.Println("hello")
fmt.Println("see you")
}ANSIコード
ANSIコードのハイライトもできる。おそらく使用することはなさそう。
```ansi
[0;36m vite v5.0.0[0;32m dev server running at:[0m
> Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m
> Network: [0;2muse `--host` to expose[0m
[0;36mready in 125ms.[0m
[0;2m8:38:02 PM[0m [0;36;1m[vite][0m [0;32mhmr update [0;2m/src/App.jsx
```
Inline ANSI: `> Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m{:ansi}` vite v5.0.0 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 125ms.
8:38:02 PM [vite] hmr update /src/App.jsxInline ANSI: > Local: http://localhost:3000/
インラインコードのハイライト
インラインコード内のプログラミング言語のシンタックスハイライト
`[1, 2, 3].join('-'){:js}`[1, 2, 3].join('-')
Context Aware Inline Code
これは使えるが、自分の環境ではshikiのCSS変数と衝突して、文字の色が変化しない。
function getStringLength(str) {
return str.length;
}`getStringLength{:.entity.name.function}`
`function{:.keyword}`
`str{:.variable.parameter}`
`str{:.variable.other.object}`getStringLength
function
str
str
カスタムコンポーネント
以下の例は既存のアイテムではなく、独自に作成したコンポーネント、CSSを適応して実装しています。
BlogCard
ブログカードを表示します。
<BlogCard url="https://tomokiota.com/" />
Accordion
アコーディオンです。折りたたみ表示を実現します。中身はdetailsタグとsummaryタグで実装してます。
<Accordion title="アコーディオンの例だよ！">
こんにちは！
</Accordion>アコーディオンの例だよ！
こんにちは！
