はてなブログでソースコードを表示するあれこれ

はてなブログ関連

今回はブログ移行する時に若干手間取った、はてなブログで記事投稿するときの方法について備忘録がてら記載します。

①ブログ記事作成時に必要なコード

まずブログ作成画面で、上の方にでてくる「編集」タブから「はてな記法」か「Markdown記法」を選択します。

※はてな記法の場合

>|ソースコード名|
　ここにソースコードを記載
| |< 　←注意：実際には”||<”と記載してください。　

※Markdown記法の場合

```ソースコード名
　ここにソースコードを記載
```


また、はてなブログにはソースコードごとに色付け表示される仕組みがあるので積極的に使いたいところです。

下記に対応ソースコード名一覧が記載されています。

ここで私が引っ掛かったのは、「C#」を表示するときはソースコード名欄に「CS」として記載しなければならないこと。
（初歩ミスで恥ずかしい…）

②ソースコードの表示方法を変える

この後はソースコードの表示を自分好みにカスタマイズします。
このリンク先の方がかなりわかりやすいので、それを参考に設定を行いました。


最終的に、ブログのデザイン→カスタマイズで自分が追加したのは以下の通りです。
(他サイトさんから集めたコピペ集合体です。こちらは自分のメモ程度と思っていただければ…）

フッタに追加したコード

※ソースコードの行ごとにdivで囲む設定

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

※ソースコードをダブルクリックすると全選択できる設定

<script type="text/javascript">
window.addEventListener("load", function onLoad() {
  window.removeEventListener("load", onLoad);
  var codes = document.querySelectorAll("pre.code");
  var len = codes.length;
  for (var i = 0; i < len; i++) {
    (function () {
      var code = codes[i];
      // select all on double click
      code.addEventListener("dblclick", function () {
        var range = document.createRange();
        range.selectNodeContents(code);
        var selection = document.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
      });
    })();
  }
});
</script>

デザインCSSに追加したコード

/*code-lineクラスの数でカウント*/
.code-line {
  counter-increment: linenumber;
}
/*偶数行のみ背景色を適用*/
.code-line:nth-child(even){
  background-color: #eeeeee;  /*カラーコード変更*/
}
/*行番号を擬似要素として表示*/
.code-line::before {
  content: counter(linenumber);
  display:inline-block;
  color: #ccc;                    /*カラーコード変更*/
  text-align: right;
  width: 35px;
  padding: 0 15px 0 0;
}

/*コードブロックに言語名を表示*/
pre.code:before {
    content: attr(data-lang);
    display: inline-block;
    background: #ffe4e1; /*カラーコード変更*/
    color: #666;
    padding: 3px;
    position: absolute;
    margin-left: -15px;  /*表示位置を調整*/
    margin-top: -30px;

}
pre.code {
    padding-top: 30px !important;
    border:2px solid #ccc;  /*追加：コード表示部分の枠設定*/
    background:#f8f8f8;  /*追加：コード表示部分の背景色*/
    position:relative;  /*追加*/
}

③蛇足

ソースコードを表示するにあたってブログ表示幅も若干いじりました。

デザインCSSに追加したコード

/* 全体の横幅 */
#main {
width: 740px;
}

/* サイドメニュー幅 */
#box2
{
width: 230px;
}