Syntax Highlighterを思いっきり変更してみた。

そろそろwordpressのテーマ改変の備忘録をまとめようと思いつつ、（なんか違う・・・）が先に立って、気になることは記事が寡ないうちにやってしまおう！ と自前のSyntax Highlighterを用意する方に明け暮れた。

WPプラグインで使用していたのは「Crayon Syntax Highlighter」

長年使ってきたブログで使用中のプラグインが「SyntaxHighlighter Evolved」

どちらも悪くないと言えば悪くないし、プラグインなので見た目は選ぶテーマによる差なのだが、なにせ「ごついよ」と思った。
そう、わざわざ自前で用意した理由はよく言われるSyntax Highlighterプラグイン重いよね・・・ではなく、見てくれがイヤだった。

そんな時に、Font AwesomeサイトでHow to Useページにあるシンプルにクリップボードへコピーするだけのタイプを見て、あぁこんなのがいい。と思いつく。

とはいえ、シンプルったって相当にオシャレなんだけど（笑）

ただ今更気づくなよ、だけども海外のサービスサイトを見ていると、これまで散々見慣れているシンプルなクリップビードにコピーするタイプのSyntax Highlighterがあるなぁ・・・と。そちらに違和感がないから、自サイトであまりに気張ったデザインを見ると（ごついよ）となるわけで。

では、とすぐ見つけたのが「clipboard.js」でinputフォームにあるURLをサクッとコピーするサンプルなど、まさに違和感のない見慣れたもの。
ただしclipboard.js自体は、ターゲットエリアにあるものをクリップボードへコピーするまでの挙動をしてくれるスクリプトで、デザインは特に提供してないよ、デモサイトのTooltipsはGitHub’s Primerを使ってるんだ、みたいなことが書いてある。

先を急ごう。

「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」といったプラグインが賄ってくれている要件を満たすのには、Syntax Highlighterとしては、「highlight.js」を使用し、クリップボードへコピーする機能は「clipboard.js」が担当、TooltipsはGitHub提供のフレームワーク「Primer」を拝借した。

自前と言うわりにすべて借り物競争かっ

しかし変えて良かった。落ち着く・・・

highlight.jsの使い方

まずシンタックスハイライト部分の「highlight.js」

サイトトップにダウンロード版も用意されているが、CDNで読み込みすることにして

<script src=“https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js“></script>
<script>hljs.initHighlightingOnLoad();</script>

をページ<footer>以降に追加。

ハイライト色のCSSはデフォルトの場合、<head>内にこれもCDNで呼び出し。

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

だがしかし「highlight.js」ー176 languages and 79 stylesーとある通り、非常にバリエーション豊富!!

Demoページで気に入ったStyleを選んだら、「default.min.css」のファイル名を例えば「zenburn.min.css」のように変更する。

シンプルなもの・・・とほざいてた前言などすぐさま翻り、自宅テキストエディタのシンタックステーマ再現に走ること請け合い。わたくしの場合、疲れ目にzenburn、目に優しいzenburn、寝ても醒めてもzenburnの季節がもう何年続いているんでしょう。

たまにzenburnの桃色な爪してる女性いますよね。マットな感じがとても良いと思います♥

clipboard.jsの設定方法

clipboard.jsについても最終的な呼び出しはCDNで

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

をページ<footer>以降に追加することにしたが、こちらはスタイルを選ぶだけというわけにはいかないので、ダウンロードしたclipboard.js-master/demo/フォルダのデモの中から自分の使いたい方法を選択・・・というのが正門なのだが、デモサイトですでにどの形式を採りたいかはわかっているので、そこはまったく学ばず、デモサイトのソースを直接見た。（正規の裏門かっ）

まぁ得意のカンニングなわけだが、デザインはPrimer.cssに依るところが大きかったので、フレームワーク全体を使わずButtonとTooltipsのモジュールだけ出力して現在のブログデザインと抵触しないようにセッティングする方にばかり腐心してしまった。

「Primer」はサイトトップからStorybookページでフレームワークの要素をチェックできるが、同じくトップに紹介されている「old documentation website」のDocsが参照しやすかった。

翌日追記

せっかくなので、input[type=text]でのclipboard.js活用もしたいよねと記事を書いてから思い立ち、後から追加してみた。

Preタグで書くタイプが

https://www.studiomic.net/

input[type=text]では

同じくinput[type=text]の白バージョン

えぇとこれ・・・Preタグで書くタイプの1行デザインをCSSで追加した方が早かったぢゃね？ とまた後から気づくが（汗）

clipboard.js-master/demo/フォルダのデモは多数（8点）揃っていて、どれも見やすくてですね。自分の使いたい形式を選んで、多少デザインすれば即使えるものばかりでした。楽しかったので、これまたそのうち別記事書きましょうかね。

忘れていたメリットとデメリット

前述の通り、highlight.jsの使用は簡単、clipboard.jsも見た目をさほど重視しなければすぐにでも使える優れものだが
「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」というプラグインは、Syntax Highlighterと謳いながらCodeのカラーリング部分より、インプットのしやすやに重きが置かれているというか、使う側に楽さがあったんですね。

<山括弧>やら&を &lt; &amp; &gt;などとかき分けないといけない。
CSSなどを記事に書くことが多かったので、わりと平然と忘れてましたよね・・・　（それだけプラグイン依存してたんだろう）

しかしこの前の記事、「ところで800widthでいいんぢゃないか」がもろに<body>から</body>のソースを安易にコピペ使いしてたりする。

一応この前記事が再現できるまでは、プラグインと差し替えできないな・・・と、課題は3点

  • 特殊記号のエスケープ
  • 任意の行のマーク（背景色分け）
  • 行番号

htmlタグのエスケープは他力本願で良質記事を見つけ、行のマーク・行番号ともにCSSでクリアするアイディアで解決したが、行番号については結局プラグインと大差ない見た目オモエモンに逆戻りしたので不採用に。

ここまでが、たぶんデメリット。
プラグインで用意されているすべてを賄うには、それ相応の他力本願（！）と合算の手間は否めない。

メリットは、Plainで軽く、後が楽

「SyntaxHighlighter Evolved」は、アウトプットされるのは普通にPreタグなのだが、投稿時には

[code language="css"]
・・・・・
[/code]

のように、ブラケット[bracket]・角括弧で括りましょうというお約束があって、少々めんどうくさかった。
中に書くものはほぼコピペで楽ではあったが、プラグインなしだと

[code language=”css”]
・・・・・
[/code]

この表示になるわけで、これある意味一生ものか。縁を切れない（笑）

「Crayon Syntax Highlighter」はアウトプットされたソースにはビビるが、投稿内容そのものはプレーンですみましたね。
今回3記事で1ダースくらいのCodeを置き換えるのは、Preタグに残っていたClass名を消すくらいで難なく。

表示は<textarea>が担うようだけど、たった8行ほどのCodeを30-40行ほど使って表現してました。tableとdivとspanのオンパレード。
高機能ってそういうことよのぉ、の見本みたいな。

と、なんだかメリットの話よりプラグインに懲りた話のようになっているが、万人に求められる「痒い所に手が届く」が、今回は自分には重かったんですね。
プレーンテキストのようなプレーンさで、着色だけあって、見やすく軽くコピーしやすければそれで！
という要望を満たすには、

highlight.js ＋ clipboard.js = 過不足なかった。

<?php
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_parent_theme_file_uri() . ‘/minus-style.css’ );
}
?>

上が今回のJS＋スタイルのPreタグで、下がこのサイトテーマそのままのPreタグ囲い。

<?php
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_parent_theme_file_uri() . ‘/minus-style.css’ );
}
?>

いちばん難関だったhtmlタグのエスケープについては、別記事で書きます。