【Blogger用】コード表示にhighlight.jsを利用

【Blogger】コード表示に highlight.js を導入してみた | リモスキ

highlight.js を使えば、コードを見やすい形でブログに掲載できます。Blogger での導入方法をまとめました。

www.limosuki.com

highlight.jsの設定

HTMLを編集

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/vs2015.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js'/>
<script>hljs.highlightAll();</script>

 

文字がサイズの変更　CSS編集

</b:skin>の直前に入れます。

pre code.hljs {
    font-size: 14px;
    line-height: 1.4;
    max-height: 500px;
}

リモスキさんのコードを使わせて頂きました。

max-heightを指定しているので、長すぎる場合はスクロールバーが表示されます。

コードの掲載方法

HTMLはそのまま載せれないので特殊文字に変換します。

1. HTML特殊文字変換ツールでコードを変換
2. 変換したテキストを、以下のタグで囲む。
   <pre><code>ここにコードを入力</code></pre>

お疲れ様でした。

コピーボタンの設置

ボタン押したらコピー出来るようにしたかったので、こちらのサイトを参考にカスタマイズしています。

highlight.js にソースコードをコピーするボタンを追加

ソースコードを色分けして表示できるシンタックスハイライター「 highlight.js 」にコピーボタンを設置する方法を書いていきます。

mizunosame.blogspot.com

HTML編集

</body>直前にコードを入れます。

<script>
;(function(d){
  if(!window.getSelection){
    return
  }
  let pres = d.getElementsByTagName(&quot;pre&quot;) //preタグ取得
  for(let i = 0; i &lt; pres.length; i++){
    let btn = d.createElement(&quot;button&quot;)
    btn.className = &quot;selectPre&quot; //class名指定
    btn.textContent = &quot;Copy&quot;
    pres[i].appendChild(btn) //pre毎にコピーボタン付与
    btn.addEventListener(&quot;click&quot;, codeCopy, false)
  }
  function codeCopy(){
    let sel = window.getSelection()
    const pre = this.parentNode
    sel.selectAllChildren(pre)
    sel.extend(pre, pre.childNodes.length-1)
    d.execCommand(&quot;copy&quot;) //コードをコピー
    setTimeout(function(){
      sel.removeAllRanges() //0.5秒後に選択解除
    }, 500)
  }
})(document)
</script>

CSS編集

    pre{
  position: relative;
}
.selectPre{
  position: absolute;
  top: 0em;
  right: 0em;
  border: none;
  outline: none;
  border-radius: 0px;
  height: 1.4em;
  padding: 0.9em;
  line-height: 0em;
  font-weight: bold;
  background: #6495ED;
  color: #ffffff;
  cursor: pointer;
}