はてなブログでコードハイライトをカスタマイズする

ベースはテンプレート、ディテールは自分好みにしたい

はてなブログにはデフォルトでたくさんのテンプレートがあります。

どれも素敵なものばかりですが、自分のイメージとぴったり合うものってなかなか無いんですよね。

雰囲気は好きだけど見出しのデザインがちょっと
全体的にシンプルですごい見やすいけどコードハイライトが少し見にくい

とか

自分でテンプレート作るのもいいんですが、そこまでするならもはや自分でブログサイト作ったほうがいい気がしますしその労と時間を割くためのサービス利用なので、自分に合ったテンプレートが使えるのが一番だと思ってます。

というわけで今回はコードハイライトを自分好みにカスタマイズする方法です。

コードハイライトに対する不満

「こんな風にできたらなぁ」と思ってること

行番号を表示させたい
黒背景＋ストライプにしたい
何の言語なのかわかるようにしたい
ボタン押して全選択（可能ならコピー）したい

１つずつやっていきましょう。

テンプレートのカスタマイズ方法

Javascriptを反映させる方法

ブログで自分のJavaScriptコードを動かすことができます。

「全選択」のボタンを配置
独自クラスの埋め込み

などが可能です。

「ダッシュボード」->「デザイン」->「カスタマイズアイコン」->「フッタ」 or 「ヘッダ」 f:id:fclout:20210122000106g:plain

CSSを反映させる方法

ブログに自分のスタイルシートを反映させることができます。

下線を蛍光マーカーにする
コードハイライトの背景を縞模様にする
見出しのデザインを変える
行番号の表示（Javascriptとの組み合わせ）

などが可能です。

「ダッシュボード」->「デザイン」->「カスタマイズアイコン」->「デザインCSS」 f:id:fclout:20210121235620g:plain

いざ実践

行番号を表示させる

行番号を表示させるにはJavascriptとCSSの両方をカスタマイズします。まずは、Javascriptから。

前述の手順でフッタ編集画面を出して、以下のコードを貼り付けます。

var codeBlocks = document.getElementsByClassName('code');
[].forEach.call(codeBlocks, function(e) {
  if (!/lang/.test(e.className)) {
      return;
  }
  var sourceCode = e.innerHTML.slice(-1) === '\n' ? e.innerHTML.slice(0, -1) : e.innerHTML;
  var lines = sourceCode.split(/\n/);
  var codeBlock = "";
  lines.forEach(function(line){
    line += line === '' ? '\n' : '';
    codeBlock += '<div class="code-line">' + line + '</div>'      
  })
  e.innerHTML = codeBlock;
});

コードハイライト部分で一行ごとに独自クラスを持つdivタグを入れてます。

次にデザインCSS編集画面を出して、以下のコードを貼り付けます。

.code-line::before {
  content: counter(linenumber);
  display:inline-block;
  color: #ccc;
  text-align: right;
  width: 35px;
  padding: 0 15px 0 0;
}

「変更を保存する」を押すと、上記のコードが反映されます。 ※ちなみに上記は当ブログのコードハイライトのものです

疑似要素として表示しているため、コードを選択しても行番号までは選択されません。

黒背景＋ストライプにする

つぎにコードハイライト部分を黒背景にして、さらにストライプで表示させます。これは前述のJavascriptが反映されていれば、CSSだけで問題ありません。

.entry-content pre,.entry-content code{
  font-family: "Source Code Pro", sans-serif;
  font-size: 75%;
  background-color: #222;
  color: #eee;
}

.code-line:nth-child(even){
  background-color: #333;
}

当ブログでは基本色を#222にして、偶数行を#333にしています。自分好みの色にしちゃいましょう。

言語名を表示させる

次はコードハイライトの左上に言語名を表示させます。はてなブログではMarkdown記法・はてな記法の両方でコードハイライトに言語名が指定できます。対応する言語についてはこちら

これはCSSだけで実現できます。

/*コードブロックに言語名を表示*/
pre.code:before {
  content: attr(data-lang);
  display: inline-block;
  background: #ccc;
  color: #666;
  padding: 0 3px 0 3px;
  position: absolute;
  margin-left: -20px; 
  margin-top: -30px;
  margin-bottom: 5px; 
}

mergin幅を調整することで位置を変えられます。こうすることでどの言語のコードなのか一目でわかりますね。

ボタンで全選択させる

最後はQiitaでよく見かける、全選択ボタンです。（残念ながらコピーは未挑戦）自分用にコピペしたいときは便利ですよね。当ブログでもカーソルをコードハイライト部にあてると、右上にselectボタンが出てくるようにしてあります。

こちらはJavascriptとCSS両方の適用が必要です。まずはJavascriptから

;(function(d){

if(!window.getSelection){
  return
}

var btn = d.createElement("button")
btn.id = "selectPre"
btn.textContent = "select all"
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("pre")
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)

オンマウス時に全選択ボタンを配置するためのコードです。ボタンを押すとコードハイライト部分がすべて選択された状態になります。

次にCSSを使って、このボタンを右上に配置します。

/* 全選択ボタン */
button#selectPre {
  position: absolute;
  margin-top: 10px;
  border-width: 0ch;
  bottom: 95%;
  left: 85%;
  margin-left: -1.5em;
  background-color: #222;
}

これで、気軽にコピペしてもらえるように（？）なりました。

まとめ

はてなブログには上質なテンプレートが色々揃っているのでそのまま使うだけでも十分だと思います。

ただ、細かい部分を自分でカスタマイズすることによってより自分好みのブログとなって、投稿意欲が増す（はず）です。

たくさんの人に見てもらえるようにこれからもちょこちょこカスタマイズしていこうかと思います。

ふくろうのブログ。

Hack yourself