highlight.jsの導入、使い方、ショートコードの作成でのポイントをメモしておく
導入と基本の使い方ははにわまんさんの記事とこの記事を一緒に読んでいけば大丈夫 特にファイルの読み込みは2番目の記事を参考にした方が良い。より分かりやすく解説してくれている。
WPで使う場合は投稿編集画面で**「コード」を選択し、その中にハイライトしたいコードを書けばOK！**
「highlight.js」は自動言語識別機能がデフォルトで指定されていて便利。 だけど精度がものすごく高いというわけではなく、ハイライトしたいコードが短かったりすると違う言語として識別される場合がある。（jsなのにcssだと識別されることがあった）
ショートコードを作る際は下記をコピペしてね。ショートコードだと自分で言語を指定出来るから、異なる言語と判定されることがない。とても良い。
ただ、下記のコードだと、なぜか改行（<br>）とかこちらで記述していない<p>とかまで表示されてしまうから改善が必要。
おそらく「$content」をesc_html() で囲っていることが原因だと思われる。でも、これなしだとコードが表示されなくなる。他に良い書き方があるのかどうか...（Slackでメンターがこの書き方で表示されないか？と記載されていたものがあって、それも試してみたけどコードが表示されなくて断念）
「highlight.js」のファイルをダウンロードする時に何か設定などあっただろうか...?
```php
//functions.php
/**
* highlight.jsのショートコード
*
* @param array $atts ショートコードの引数
* @param string $content ショートコードのコンテンツ.
* @return string html表示付きのHTMLタグ.
*/
function my_shortcode_highlight( $atts, $content = '' ) {
return '<pre><code class="' . $atts['class'] . '">' . esc_html($content) . "\\n" . '</code></pre>';
}
add_shortcode( 'highlight', 'my_shortcode_highlight' );
//ショートコード
[highlight class="指定言語"] ここにコードを書く [/highlight]
```
あれだな！最悪「ショートコード」でも「コード」でもなく「カスタムHTML」を使って直接書いた方が手取り早いかもな！それなら言語指定も出来るし！←ダメだった。タグが出力されなくて、タグ内に書いた文字だけが出力されてしまった...orz