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

wordpress
この記事は 約4分 で読めます。

Cocoonに組み込まれているコードハイライト表示機能(highlight.js)に
スクロールバーが付けられたら良いんだけどなーとグーグル先生に聞いたら
ズバリな記事を見つけたので早速追記し、こちらを使うことにしました

[WordPress] highlight.js の導入と、コード折り畳みの実装 – atuweb : つながりを作るWebプログラマ

https://atuweb.net/201509_code-highlight-and-code-shorten/
Sponsored Link

経緯

以前は記事にも書いたCodeColorerを使っていたんだけど
CodeColorer | 楽しみのない猫

CodeColorer
カスタム関係の記事を書くのにコードをペーストした時に綺麗に表示してくれるものはないかな?と探していて見つけたプラグインCodeColorerの記事です

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

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

footer.phpへ追記

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

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

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

Sponsored Link

使用

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

AddQuicktag
普段よく使うタグをエディタで簡単に使う事が出来たらいいなと思ったことはないですか?その願いを簡単に叶えてくれるプラグインAddQuicktagの記事です

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

highlight.js使用時の注意点

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

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

なのでHTMLタグの半角小なり<大なり>は予め&gt;、&lt;に変換しておきましょう
(全角で書いてありますが、勿論半角で)
特殊文字リファレンス

特殊文字リファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表

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

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

おわり

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

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

追記:別の事をしてて見つけたというか気づいたのだが…
スクリプト使わなくても以下を追加すれば出来たのね
/* 高さの最大値を指定する */
max-height: 250px;

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

[share]