この記事では、Webサイトやブログでソースコード（HTMLやJavaScriptなど）を見やすくしてくれる "highlight.js" をコピペ一発で簡単に導入する方法を紹介します。highlight.jsは既にいろんな方がそれぞれの方法で使っておられますが、kamokamoオリジナル仕様として、自作ツールを使って楽にコードを挿入でき、さらにコードをコピーするボタンも自動で付くようにしています。自分のために作ったシステムですが、もしお役に立てるなら嬉しいと思い、公開します。
2020/10/27: 改良版の記事を公開しました。特に理由がなければ、こちらの方が高速で良いです。
itchingears-kamokamo.blogspot.comhighlight.jsの導入 - コピペ用HTMLコード
以下のHTMLコードをコピーして、</body>タグの上に貼り付けてください。
説明は後ほど。
<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<!-- Clipboard.js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js'/>
<!-- [START] Highlight.js -->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/foundation.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<style>
.hljs{
font-size: 15px;
max-height:500px;
background:#f1f8ff;
font-family: Consolas, Menlo, sans-serif;
}
.code-copy{
position:relative;
margin:1em 0;
}
pre::before {
content: attr(title);
line-height: 1;
padding: .3em .5em .3em .5em;
margin: 0 0 0 0;
background: #f1f8ff;
color: #000;
font-size: 16px;
font-family: Consolas, Menlo, sans-serif;
}
.code-copy-btn{
position:absolute;
right:0;
top:0;
padding: .3em;
background:#779cff;
color:#fff;
border:0;
border-radius:5px;
font-size: 16px;
font-family: Consolas, Menlo, sans-serif;
}
.code-copy-btn:hover{
cursor:pointer;
opacity:0.9;
}
</style>
<!-- [END] Highlight.js -->
<!-- [START] Code Copy Button -->
<script>
$(function(){
new ClipboardJS('.code-copy-btn');
$('.code-copy-btn').click(function(){
var codeText = $(this).siblings().text();
$(this).attr('data-clipboard-text', codeText);
$(this).text("Copied!"); //Change text
//Restore original text after 2s
setTimeout(function(){
$('.code-copy-btn').text("Copy");
},2000);
});
});
</script>
<!-- [END] Code Copy Button --> 導入は以上です。これで、まさに上に載せたようなコードを表示する準備ができました。
highlight.jsの使い方
highlight.jsを実際に使うためにはコードのまとまりごとに2ステップの作業が必要です。これがちょっと手間なので、楽するための便利ツールも紹介します。
コードのタグをエスケープ（変換）する
たとえば<script>タグをそのままHTMLに書くと、scriptを実行しようとしてしまいます。これを文字として表示させるには、"<"を"<"に、">"を">"にというふうにタグを変換する必要があります。これをエスケープと言います。
前後にタグをつける
エスケープしたコードの前後に、highlight.js用とコピーボタン用のタグをつける必要があります。
前のタグは以下の通りです。
<div class="code-copy">
<button class="code-copy-btn" title="Copy Text">Copy</button>
<pre title="HTML"><code class="html">
buttonタグがコピーボタンです。不要ならこれを消します。
codeタグのclass属性に言語名を書くと、その言語に合わせてハイライトしてくれます（なくても自動判別してくれます）。
preタグのtitleは、最初に載せたCSSの部分でコード左上に表示するように設定しています。必須ではありません。文字色や背景色はスタイルに合わせてください。
後のタグはただの閉じタグです。
</code></pre>
</div> こうしてできたHTMLコードを記事内に置けば、あとはhighlight.jsが勝手にハイライトしてくれて、コピーボタンも出ます。
便利ツール - HTML generator -
「タグをエスケープする」「前後タグをつける」を毎回手でやっていると大変ですよね…。
そこで、これらを一発でやってくれる便利ツールを作りました。タイトルやボタンの有無も使い分けられます。こちらで公開しているので、ご自由にお使いください。インストール不要、Webページ上ですぐに使えます。
itchingears-kamokamo.blogspot.comコードの説明
以下は、コードの説明です。興味のある方、改造したい方はどうぞ。テーマ（色使い）を変える方法もここで紹介します。
CDN呼び出し
最初の部分は、CDNという外部ライブラリを呼び出す仕組みを使っています。
<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<!-- Clipboard.js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js'/>
<!-- [START] Highlight.js -->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/foundation.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
上から順に
- jquery.min.js...JavaScriptを簡単に記述できる
- clipboard.min.js...テキストをクリップボードにコピーできる
- foundation.min.js...highlight.jsのテーマ（後述）
- highlight.min.js...highlight.js本体
- hljs.initHighlightingOnLoad()...highlight.jsの初期化処理
です。jQueryやClipboard.jsは、もし他で既に呼び出している場合は不要なので、削除してください。また、これらはコピーボタン用なので、「コピーボタンはいらない」という場合も不要です。
ちなみに、highlight.jsのCDNでは37の主要言語をハイライトできるそうです。詳しくはこちら↓
Getting highlight.js
その他の言語をハイライトしたり、不要な言語を省いたり、文字色を調整したい場合は、言語を選んでファイルをダウンロードする必要があるのですが、個人的には必要ないので気にしてません。VBScriptが入ってないのがちょっと気になりますが、まあいいか…。
テーマ選び
highlight.jsは、94のテーマから好きな見た目のものを選ぶことができます。当ブログでは、"foundation"を使用しています。
テーマは、先ほども載せましたが
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/foundation.min.css' rel='stylesheet'/>
この"foundation"の部分を変更すれば変えられます。
以下のサイトで見た目を確認できるので、好きなのを探してみてください。
highlight.js demo
ただしひとつ注意があります。もしテーマ名にスペースがあるものを選んだ場合、スペースではなくハイフン"-"に置き換える必要があります。例えば"An Old Hope"だと、"an-old-hope"という風に。でも"A 11 Y Dark"は"a11y-dark"のようです。たぶんこちらのページにあるものと同じ名前にしておけば良いはず↓
highlight.js/src/styles at master · highlightjs/highlight.js · GitHub
ダウンロード版の場合は、全テーマのCSSが付いてくるので、好きなものを自分のスタイルシートに置けばOKです。コードは長くなりますが、ダウンロードの方が読み込み速そうだし細かく調整もできて良いかもしれませんね。言語も含めていずれ変えるかもしれません。
CSS
CDNの下の<style>タグ以下は、自分で追加したCSSです。フォントや背景色を変えたり、コピーボタンのデザインと配置を決めたり、pre::beforeの部分でタイトルを表示させたりしています。自由に編集可能です。
コピーボタンの動作
コピーボタンの動作はjQueryとClipboard.jsを使って実装しています。使わなくてもできるみたいですが、使った方がコードが簡単だし、読み込みが遅いと感じることもなかったのでそのままにしてます（いつか変えたら、追記します）。
<!-- [START] Code Copy Button -->
<script>
$(function(){
new ClipboardJS('.code-copy-btn');
$('.code-copy-btn').click(function(){
var codeText = $(this).siblings().text();
$(this).attr('data-clipboard-text', codeText);
$(this).text("Copied!"); //Change text
//Restore original text after 2s
setTimeout(function(){
$('.code-copy-btn').text("Copy");
},2000);
});
});
</script>
<!-- [END] Code Copy Button -->
Clipboard.jsをコピーボタンに適用
new ClipboardJS('.code-copy-btn');
コードのテキストを取得してクリップボードにコピー
var codeText = $(this).siblings().text();
$(this).attr('data-clipboard-text', codeText);
ボタンの文字を"Copy"から"Copied!"に変え、2秒後に元に戻す
$(this).text("Copied!"); //Change text
//Restore original text after 2s
setTimeout(function(){
$('.code-copy-btn').text("Copy");
},2000);
以上です！
あと機能追加するとしたら、コピーボタンを押した時にコードをコピーするだけでなく「全選択」するくらいでしょうか。確かに分かりやすいですが、なんだかうまくできなかったのでやってません…。ボタンの文字も変えるので、コピーできたことは分かりますよね…？
参考
"Code Box Copy" というツールを使ってもコピーボタンを簡単に作れます。著者も初めはこれを導入しましたが、外部ライブラリがさらに増えるのと、ボタンのデザインが変えにくそうだったのでやめました。決して悪くはないと思うので、そのうち紹介します。
Code Box Copy
また、違うアプローチでコードコピーを実現しているのが「ふじろじっく」さんとその参考リンクのみなさま。まず「全選択」して、それをコピーするという方法ですね。すばらしいです。
fujilogic.blogspot.com当ブログの改造リストはこちら。
itchingears-kamokamo.blogspot.com
No comments:
Post a Comment