[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は必要に応じて
  }
}

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

おわりに

個人的にQiitaのUIは素晴らしいと思っています。アウトラインやタグの仕様もQiitaを参考にしています。パクリと言われても何も言えません笑

でも折角こんな素晴らしいUIを提供してくれているのを参考にしないのは勿体無い。私の拙い実装でも、参考になればと思っています。

次回はGhostで実装するアウトラインなんかを考えています。

追記
highlightjs良い感じ。導入はこのサイトを参考にしました。

slont

金融ベンチャーでWebエンジニア

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.