slontが2016年2月20日に投稿(2016年5月28日更新)

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

slont

元金融エンジニア。メイン言語はJava, HTML, JavaScript, Python, Kotlinあたり。SECCONやCTF、NLP、機械学習に興味あり。金融日記購読4年。巷で話題の変態紳士。美女ソムリエ始めてました。 お仕事の依頼はTwitterからお願いします。

comments powered by Disqus
Back to top