今までコードハイライトにはWordPressのプラグインを利用していましたが、どうも表示にしっくりこなかったためhighlight.jsに乗せ換えていました。 動作も軽く、表示もとってもcoolです。


highlightjs
https://highlightjs.org/

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

1点、サンプルコードが長くなると、縦のスクロール量も増えてしまいますので、今回「ページを開いたときに」折りたたまれた状態で表示する処理を入れてみました。

highlight.jsの導入から、さらっと説明してみます。

highlight.jsの導入

highlight.jsは以下サイト様の手順通りに導入が可能です。

syncer
ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方
http://syncer.jp/how-to-use-highlightjs

WordPressに導入する手順は次の通りです。
※Simplicityテーマの前提です。ほかのテーマの場合、若干対象ファイルが異なるかもしれません。

ライブラリのアップ

CDNを参照する場合、この手順は不要です。

highlight.js本体とテーマファイルは次のように設定してください。
WordPresのインストールディレクトリは/var/www/wpとします。

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

ちなみに当ブログではsolarized_darkテーマを利用しております。
私はsolarized_dark一択ですねー。

CSSの読み込み

テーマのheader.phpを編集します。
<head>タグ内に次の1行を追加してください。

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

CDNを利用する場合は以下です。

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

JSの読み込みと、ハイライトの実行

テーマのfooter.phpを編集し、次のように記載してください。

</body>
<script src="<?php echo get_template_directory_uri(); ?>/highlight/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
</script>
</html>

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

CDNを利用する場合はHighlight.jsの読み込み行を以下としてください。

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>

たったこれだけの手順でもうシンタックスハイライトが利用できます。とても、簡単ですね。

コード折り畳み表示

その1:スクロールバージョン

完成イメージ、バーン!!

コードは以下の通り。
テーマのfooter.phpに以下を追加してください。

<script>
hljs.initHighlightingOnLoad();

(function($){
  $("pre > code").each(function(i, code){
    var $code  = $(code);
    var height = $code.height();

    if (height > 200) {
      $code.css({
        "height": "200px"
      });
    }
  });
})(jQuery);
</script>

codeタグの高さを取得し、「200pxを超える場合は200に丸め込む」ことでサイズ調節をしています。

その2:クリック展開バージョン

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

完成イメージ、バーン!!

コードは以下の通り。
テーマのfooter.phpに以下を追加してください。

(function($){

  $("pre > code").each(function(i, code){
    var $code  = $(code);
    var height = $code.height();

    if (height < 200) {
      return;
    }

    $code
      .css({
        "overflow": "hidden",
        "height"  : "200px"
      })
      .attr("data-orginal-height", height);


    var $elm = $("<span></span>");
    $elm
      .text("続きを見る")
      .css({
        "position": "absolute",
        "bottom" : "12px",
        "left"   : "4%",
        "border" : "1px solid #333",
        "margin" : "0 auto",
        "width"  : "92%",
        "padding": "8px 0",
        "cursor" : "pointer",
        "text-align": "center",
        "background-color": "#F6F6F6"
      })
      .addClass("trigger-expand-code");

    $code.parent()
      .css("position", "relative")
      .append($elm);
  });

  $(".trigger-expand-code").click(function(event){
    var $target = $(event.target);
    var $pre    = $target.parent();
    var $code   = $pre.find("code");
    var height  = parseInt($code.attr("data-orginal-height"), 10);

    $code
      .css("overflow-x", "scroll")
      .animate({
        "height": height + 20
      }, 450, "swing");

    $target.animate({
      "opacity": 0
    }, 450, "swing", function(){
      $(this).remove();
    });
  });

})(jQuery);
</script>

当ブログに実装しているコードではCSSやJSに処理を分けていますが、このサンプルでは1つにまとめています。
そのため、無理やり感がありますことはご容赦ください。

実装内容の説明
  • heightを短くする際、本来のサイズを自身の要素に記憶しておきます。
  • preタグを親として、ボタンをabsoluteの位置指定で重ね合わせて配置します。
  • ボタンにイベントを設定します。
  • ボタンクリック時にcodeタグをもとのサイズに戻し、ボタンを削除します。

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

細かな調整は必要ですが、当ブログ使う分には運用フローでカバーできる状態にできましたのでこれで良しとします。


2015年12月28日:文章の変なところを修正
2015年10月02日:スクロールバーで文字が隠れてしまっていたため、jsコードを微調整