Cocoonに付いているhighlight.jsにスクロールバーを付けた

Cocoonに組み込まれているコードハイライト表示機能(highlight.js)に
スクロールバーが付けられたら良いんだけどなーとグーグル先生に聞いたら
ズバリな記事を見つけたので早速追記し、こちらを使うことにしました
[WordPress] highlight.js の導入と、コード折り畳みの実装 - 新さっぽろ IT キャリア研究室

Index

経緯

以前は記事にも書いたCodeColorerを使っていたんだけど

折角テーマに付いているし、なんとかスクロールバーを付けられれば
そっちを使えるのになーと思っていました
そこでグーグル先生に聞いて見つけたコードを追記したって感じです

たまに長いものを貼り付けることもあるので、開閉式も良いかなーと思ったんだけど
後々の調整がめんどくさそうだったので普通にスクロールバーの方にしました

実際に追記した物は冒頭にある atuwebさんのものをそのまま使わせて貰いました
記事にあるようにfooter.phpへ追記してFTPでアップロードしただけです

(footer.phpへ追記し子テーマディレクトリへアップロード)

これで指定した数値以上になる場合スクロールバーが表示されるようになります

使う時は先にタグを打っておいて最後に閉じタグを入れるか
コードを貼り付け反転選択後<pre><code></code></pre>を入れればスクロールバーが表示されます
2つ打たないと行けないのでプラグインのAddQuicktagを使って登録しておくと楽です

短いものや微妙な高さでスクロールバーを出すほどでもない場合は<pre></pre>のみにすればOK
使い分けられるのも良いですね

highlight.jsはHTMLタグがそのまま表示されるので変換をしてあげないとなりません

コードがそのままWEB表示されてしまいます、物によっては空白になったり

なのでHTMLタグの半角小なり<、大なり>は予め＆gt；、＆lt；に変換しておきましょう
(全角で書いてありますが、勿論半角で)

ちょっと手間が掛かりますが、置き換えが使えるエディターなどで一括置き換えを使うと楽です

AddQuicktagを使っている場合変換してくれる物がありました HTML Entities

今回追記して上手く行ったけど、以前にも一度やってみたことがあって
その時は何故かスクロールバーが出なかったんですよね…
何かをミスってたんだろうけど、今となっては分かりません
まあ、上手く行ったので良しとしましょう！

一部コード冒頭の位置が下がっちゃうとかあってまだ調整が必要だけど
これでまた1つプラグインを外す事が出来ました＾＾
記事をポストしてくれた atuwebさんに感謝です

追記：別の事をしてて見つけたというか気づいたのだが…
スクリプト使わなくても以下を追加すれば出来たのね

/* 高さの最大値を指定する */
max-height: 250px;

これで良かったのね…(；・∀・)

[share]