syntaxhightlighterを使いたいので、プラグインを使わずprism.jsでやってみた
前から、ブログとかで、行番号とかついて、コマンド系が見やすくしたかったのですが、今回Wordpressの切り替えを元に、ちゃんとやってみようと思い、SyntaxHighLighterを導入しました。
こんな感じで表示できるようになりました。
<h3>タイトル</h3>
WordPressでは、syntaxhighlighter系のプラグインは結構あるのですが、重たいとか、言語が少ないとかいろいろ情報がありどうしようかと思っていましたが、検索した結果、prism.jsを導入することにしました。
参考にしたサイトはたくさんありますが、一番参考にしたのが、
https://martto.net/luxeritas-theme/customize/9648/
“https://yumanoblog.com/prismjs-wordpress/"
つまり、header.phpに、prism.jsと、prism.cssを読み込むように追加し、function.phpに、エディター用にprism.jsのタグ、<(本当は半角ですが、左記は全角で書いています）が、書き込めるように＜を正規表現で記載できるようにしました。
ここに書いていない事では、prism.jsをダウンロードした際に、Normalize Whitespaceプラグインも選択したことです。これを入れることで、頭の空行が見えなくなります。
これで、linuxのコマンドとか、ルータのコンフィグ、html、css、yaml、 dockerファイル、diff、shellとかを、あとからわかりやすい表示できるようになりました。
次回、上記の言語で書き込んだ例を記載します。