過去、コードハイライトには WordPress のプラグインを利用していましたが、どうも表示がしっくりせず highlight.js に乗せ換えました。

2018年 からは Hugo + chroma の組み合わせに移行しました。

highlightjs.org キャプチャ
highlightjs.org キャプチャ
highlight.js
https://highlightjs.org/

highlight.js は「機能を最小限にそぎ落とす」という思想で実装されているため、表示スピードも早くストレスがありません。

動作が軽いうえ、表示もとっても Cool です。


仕方がないことですが、コードが長くなると縦のスクロール量も増えてしまいす。
対処として「ページを開いたときに、折りたたまれた状態で表示する」コードを書いてみました。

当記事では次の点について解説いたします。

  • highlight.js の導入
  • コードの縦幅を短くする方法

WordPress のテーマは Simplicity を想定しています。
異なるテーマの場合、対象ファイルが異なるかもしれません。

highlight.js の導入

WordPress に導入するには次のことを行います。

  • highlight.js の CSS / JavaScript を読み込む
  • JavaScript を実行する。

CSS は HTML の HEAD タグ内で読み込み、JavaScript は BODY 閉じタグ終了付近で読み込みます。

HEAD タグ内にまとめて記述しない理由は、JavaScript によって画面表示がブロックされることを防ぐためです。

A. 公開されているライブラリを利用する

こちらが最も簡単な highlight.js の設置方法です。

CloudFlare (クラウドフレア) 社が公開しているファイルを読み込みます。

CSS

WordPress 管理画面の「外観 > テーマの編集」に遷移します。
header-insert.php を編集し、末尾に次を追加してください。

1<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
2

JavaScript

続けて footer-insert.php を編集し、末尾にを追加してください。

1<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
2<script>
3  hljs.initHighlightingOnLoad();
4</script>

B. ライブラリを自サーバに用意する

ファイルの設置

highlight.js 公式からファイルをダウンロードし、ご自身のサーバにアップロードします。

highlight.js
https://highlightjs.org/

highlight.js 本体とテーマファイルは次のように設定してください。

WordPress のインストールディレクトリは /var/www/wp とします。

1/var/www/wp/wp-content/themes/simplicity/highlight/highlight.min.js
2/var/www/wp/wp-content/themes/simplicity/highlight/styles/default.min.css

CSS

WordPress 管理画面の「外観 > テーマの編集」に遷移します。
header-insert.php を編集し、末尾に次を追加してください。

1<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/highlight/styles/default.min.css"/>
2

JavaScript

続けて footer-insert.php を編集し、末尾にを追加してください。

1<script src="<?php echo get_template_directory_uri(); ?>/highlight/highlight.min.js"></script>
2<script>
3  hljs.initHighlightingOnLoad();
4</script>
5

コード折り畳み表示

その1:スクロール版

完成イメージ

対処方法

WordPress 管理画面の「外観 > カスタマイズ」に遷移します。
追加CSS に次のコードを追加してください。

1pre > code {
2	max-height: 200px;
3}

その2:クリック展開版

「続きを見る」ボタンを実装し、クリックでコードを縦方向に展開します。

完成イメージ

対処方法

WordPress 管理画面の「外観 > テーマの編集」に遷移します。
footer-insert.php を編集し、末尾に次を追加してください。

 1<script>
 2(function($){
 3
 4  $("pre > code").each(function(i, code){
 5    var $code  = $(code);
 6    var height = $code.height();
 7
 8    if (height < 200) {
 9      return;
10    }
11
12    $code
13      .css({
14        "overflow": "hidden",
15        "height"  : "200px"
16      })
17      .attr("data-orginal-height", height);
18
19
20    var $elm = $("<span></span>");
21    $elm
22      .text("続きを見る")
23      .css({
24        "position": "absolute",
25        "bottom" : "12px",
26        "left"   : "4%",
27        "border" : "1px solid #333",
28        "margin" : "0 auto",
29        "width"  : "92%",
30        "padding": "8px 0",
31        "cursor" : "pointer",
32        "text-align": "center",
33        "background-color": "#F6F6F6"
34      })
35      .addClass("trigger-expand-code");
36
37    $code.parent()
38      .css("position", "relative")
39      .append($elm);
40  });
41
42  $(".trigger-expand-code").click(function(event){
43    var $target = $(event.target);
44    var $pre    = $target.parent();
45    var $code   = $pre.find("code");
46    var height  = parseInt($code.attr("data-orginal-height"), 10);
47
48    $code
49      .css("overflow-x", "scroll")
50      .animate({
51        "height": height + 20
52      }, 450, "swing");
53
54    $target.animate({
55      "opacity": 0
56    }, 450, "swing", function(){
57      $(this).remove();
58    });
59  });
60
61})(jQuery);
62</script>
63
実装内容の説明
  • height を短くする際、本来のサイズを自身の要素に記憶しておきます。
  • pre タグを親として、ボタンを absolute の位置指定で重ね合わせて配置します。
  • ボタンにイベントを設定します。
  • ボタンクリック時に code タグをもとのサイズに戻し、ボタンを削除します。

jQuery.animate で簡単な動きを入れましたが、思ったよりいい感じに動いてくれますね。
また、コードが横長の場合にも対処するため、overflow-x を指定しました。

おわりに

ちょっとしたギミックがあるとブログが豪華に見えますよね。

当記事が、あなたのブログをステキにするお手伝いになりましたら幸いです。

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

久保田 涼子
出版社:SBクリエイティブ  発売日:2017-06-16

Amazonで詳細を見る

HTML&CSSとWebデザインが 1冊できちんと身につく本

服部 雄樹
出版社:技術評論社  発売日:2017-07-21

Amazonで詳細を見る

この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。