[Markdown] Qiitaのようにコードに自動でファイル名を付ける

Markdown 2016年2月20日

Qiitaのコードタグって、クラスを付与すると自動でファイル名が付くようになってますよね？（たぶん）
あれが欲しすぎるのでやっちゃおうというお話です。とても簡単です。

とりあえず見た目

ファイル名なし

import hogehoge

print "Hello world!"

ファイル名あり

import hogehoge

print "Hello world!"

こんな感じになります。highlight.jsを使ってるので、見た目はかなり違いますが、ファイル名が表示されているのがわかりますね。

では実装です。

実装

コードにクラスを付ける

GhostだとMarkdownで書けるのですが、複数行のコードにクラスを付与する書き方は以下になります。

 ``python:filename.py
 # ここにコードを載せる 
 ``

こう書くと、HTMLでは以下のようになります。

<pre>
    <code class="language-python:filename.py">
        # ここにコードを載せる
    </code>
</pre>

これのクラスのファイル名の部分を切り出して、要素を追加しましょう。

スクリプトの追加

以下のコードを<body>の下の方で読み込ませます。

$(function (){
  $("code").each(function() {
    var codeName = $(this).attr("class") ? $(this).attr("class").split(":")[1] : null;
    if (codeName) {
      $(this).parent().addClass("source-code");
      $("<div class='code-name'>"+ codeName +"</div>").insertBefore($(this));
    }
  });
});

そうすると、自動で<div class='code-name'>が<pre>タグの前に挿入されます。
後はスタイルで調整しましょう。以下は参考です。lessですみません…

pre.source-code {
  margin-top: -25px;

  .code-name {
    position: relative;
    top: 25px;
    display: inline-block;
    padding: 3px 6px;
    background-color: rgba(0,0,0,0.07);
    font-size: 13px;
    font-weight: 400;
  }

  code {
    padding-top: 25px !important; // !importantは必要に応じて
  }
}

ファイルネームが付くときだけ、コードを下にずらしてファイル名要素を入れるスペースを作ります。
全体的に上にマージンができるので、その分を調整しています。