Home
Menu
Side
Twitter
Top
ホーム / Blogger | ブログ | ブログカスタマイズ |

【 highlight.js 】 を使いやすくする！ソースコードをボタン1つで全選択他

2019/07/24

Blogger ブログ ブログカスタマイズ

こんにちは！ HARU（ @HARU ）です。

ソースコードを綺麗に見やすくしてくれる highlight.js をもっと使いやすく、見やすくなるようにカスタマイズしてみたいと思います。

変更点
  • ソースコードをワンクリックで全選択
  • ソースコードにタイトルを自動付与
合わせて読みたい

見た目上の変更で装飾（ 行番号など ）を追加してしまうと重くなり、軽さが売りである highlight.js の良さが半減してしまいます。

そこで必要最低限の機能を追加します。

注意

テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。

不安な方は以下の関連記事を参照してください。

参考

ソースコードをワンクリックで全選択

このブログではいろいろな CSS や Script など、主にブログのカスタマイズについて記述してあるページがたくさんあります。

読者の中には嬉し恥ずかしながら、ブログカスタマイズの参考にソースコードをコピーしたい人もいるかもしれない。いやいないのかもしれないけど……そこは置いといて。

そこでソースコードをドラッグしコピーせずとも、選択だけでもワンクリックでできるようにしようと思います。

実装後イメージ

マウスポインタが pre タグ内に入ると、右上に「 ソースコード全選択 」と表示され、ボタンを押すことで選択することができます。

選択のみですが簡単にできるようになったため、ユーザビリティが向上します。

ソースコード選択時の動作イメージ

CSS

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

テンプレート QooQ を使っている人は個別記事辺りに記載すると、HTML を編集するときにわかりやすいでしょう。


/*  highlight.js　カスタマイズ  */
.hljs{
  max-height: 300px;
  padding: .5em 1em;
}
pre{
  position: relative;
  margin-top : 1em ;
}
code{
  font-size: 1.6rem; /*ソースコードフォントサイズ*/
}
#selectPre{
  position: absolute;
  top: 0; /*ボタンポジション*/
  right: 0; /*ボタンポジション*/
  border: none;
  font-size: 1.3rem;
  background-color: #dcdcdc;
}

Script

下記 Script を </body> の直上に記述します。


<!-- highlight.js ボタン -->
<script defer>
;(function(d){
if(!window.getSelection){
  return
}
var btn = d.createElement("button")
btn.id = "selectPre"
btn.textContent = "ソースコード全選択"
btn.addEventListener("click", selectPre, false)
function selectPre(){
  var sel = window.getSelection()
  var pre = this.parentNode
  sel.selectAllChildren(pre)
  sel.extend(pre, pre.childNodes.length-1)
}
var pres = d.getElementsByTagName("code")
for(var i=pres.length; i--;){
  pres[i].addEventListener("mouseover", addBtn, false)
}
function addBtn(e){
  if(this === addBtn.ele) return // not to addBtn if already
  this.appendChild(btn)
  return addBtn.ele = this
}
})(document)
</script>

ソースコードにタイトルを自動付与

ソースコードの種類を分かりやすくするため、ソースコードにタイトルが自動で付与されるように CSS にて編集しました。

CSS

以下の CSS を Blogger テンプレートの CSS 欄に記述します。

テンプレート QooQ を使っている人は個別記事辺りに記載すると、HTML を編集するときにわかりやすいでしょう。


/*  highlight.js タイトル  */
.script:before {
  content: "Script"; /*表示するタイトル*/
  font-weight: bold;
  font-size: 1.6rem; /*タイトルフォントサイズ*/
  background:#dcdcdc; /*背景色*/
  color:#696969; /*文字色*/
  position: absolute;
  top: 0; /*タイトルポジション*/
  left: 0; /*タイトルポジション*/
  padding: 0em .5em 0em .5em;
}
.csss:before {
  content: "CSS";
  font-weight: bold;
  font-size: 1.6rem;
  background:#dcdcdc;
  color:#696969;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0em .5em 0em .5em;
}
.html:before {
  content: "HTML";
  font-weight: bold;
  font-size: 1.6rem;
  background:#dcdcdc;
  color:#696969;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0em .5em 0em .5em;
}

タイトル「 CSS 」と表示するクラス名が「 csss 」と s が１つ多い理由は highlight.js が自動的に「 CSS 」とクラス指定をすることがあるためです。

タイトルを表示させたくないところで、誤って表示しないようにクラス名を少し変えてあります。

もちろん、クラス名は各自好きなものに変更しても使えます。

highlight.js を使っている方は、自動で割り当てられるクラス名に注意しましょう。

使い方

code タグにクラス指定すると、「 CSS 」や「 HTML 」とタイトル表示するようになります。


<pre><code class="html">
  HTMLの中身
</code></pre>

まとめ

いかがだったでしょうか？

単純に highlight.js を使うだけでも見た目が綺麗になるのでいい感じですが、ちょっとしたアクセントを付けることでさらにいい感じになったと思います。

簡単な CSS と Script を足すだけなので、是非みなさんもやってみてください。

QooQ