Prismとかいうsyntax highlighting libraryが素晴らしい件・簡単な使い方
いきさつ
このサイトでcodeにハイライト(design)をつけたいなぁーと思い、 ライブラリを探していました。
いろいろ比較調査しましたが、これが最強みたい。 その名は。。。。
Prism !!!!!!!!!!!
Prismとは？
Prismは、最新のWeb標準を念頭に置いて構築された、軽量で拡張可能なシンタックスハイライターです。 毎日訪れているもののいくつかを含む何千ものウェブサイトで使用されています。
すごみ。。こころ強い。。😭
Basic usage
まずinstallします
$ npm install prismjs
それをimportします
import Prism from ‘prismjs’;
webpackならこれをbundleすればいいだけです。
gulpとかも工夫してbundleしてね。ってことです。
最後に
Prism.highlightAll(); でハイライトを有効にします。
実際にやってみた。。
p {
color: red;
}うおおおおおおおおおおおできたぁ。。。。感動😭
これまでにもいろいろ苦労がありましたが、それはまた今度話そう。。
注意点
JSとCSS両方必要なので忘れないように。。