Open2
Next.jsでvscodeみたいに綺麗なsyntax highlightを実現したい
手羽先目的
- VSCodeのような綺麗なSyntax Highlightを実現したい
目指すサイト
- 過去に見たことがないほどの綺麗なハイライト。
- 記事にはPrism.jsが書かれているが、これが使われているのかどうかはなぞ
- Prism.jsは色だけ？なので、コードの解析自体は別のものでやっているのかもしれない
- この記事にはハイライトについて詳細が載っていないので、作者のTwitterをフォローしたが、DMは閉じられており、連絡は難しそう
自分のサイトのSyntax highlighと比較
- 文字列がなんか白い
- 解析が雑！！！！！！！！！！！
- それぞれのtokenに細かく分類できていない。。
- functionとhomeの色が同じとかありえない。。。。
- WordPressでホスティングしている
- Highlighting Code Block + prism.jsで色をつけている
手羽先調査
記事
ライブラリ
shikiというライブラリをもとに作られているらしい。違いはわからない。
Gatsbyではめちゃくちゃ良さそうなプラグインを見つけた