目次
Code Hike とは、MDX で使える、オープンソースのコードハイライター。
Not just a syntax highlighter.
とあるように、実際に使ってみると確かに、かなりパワフルなコードハイライターだったので紹介する！
感覚としては、Tailwindcss や Stripe のドキュメントにあるようなハイレベルのコードブロックが作れる。
以下では Code Hike の素晴らしいポイントを 4 つ挙げてみた。
コードブロックの全体設定がシンプル
例えば以下のような、よくある設定
- 行番号を振りたい
- コードコピーボタンを付けたい
- コードブロックのテーマ(スタイル)を良くしたい
こんな感じで設定できる1{
2 lineNumbers: true,
3 showCopyButton: true,
4 theme
5},
テーマがたくさんある
Code Hike はシンタックスハイライトとして Shikiを使っている
ここに挙げられている通り、多くのテーマから好きなものをインポートできる また、テーマはただの json ファイル名ため、オリジナルのテーマも作れる。
見た目がとてもかっこいい&シンプル
Code Hike はデフォルトのテーマでも十分に映える
Mac 調なコードブロックビューも最高にオシャレ
コードの注釈が簡単に付けれる
大抵、コードブロックを書くときは、そのコードに対して、なんらかの説明をつけることが多い また、行数が見えるとはいえ、いちいち n 行目の〜はとか、〜の隣にある〜とか文字で説明されるのも、 読む側として辛い。
Code Hike を持ちいれば、以上のような問題を解決できる
例えば、「ここ」や「これら」などの代名詞で特定のコード(行)を示したい場合、 コードリンクを使えばいい
まず前提として、Code Hike のコンポーネント(<CH.Section>)でコードブロックとその説明文を囲む その上で、1[incididunt](focus://4:7)
と書けば、これは
「incididunt」にホバーすると、コードブロックの4行目から7行目以外のopacityが小さくなり、 4行目から7行目がフォーカスされる
全体例はこちら
つまり、代名詞(でなくてもなんらかのコードを指す言葉)にリンクを貼っておけばホバーした時に、 どこを指しているのか一瞬でわかるということ
Code Hike が一般的なコードハイライターを超えた存在たらしめているのは、 コードブロックだけではなく、そのコードブロックの説明文の文脈に主に焦点を当てていることだと思う
同じような例で、スクロールに対して、コードを追加したり、除外したりするScrollycodingや クリックに応じて、コードブロック内のコードが変化するSpotlightなどがある
冒頭で示した、Tailwindcss や Stripe のドキュメントがこんな感じだと思う
もちろん、一般的にある静的注釈やファイル名の表示、複数タブ(これも良い！)も簡単に設置できる
