qiitaのようなファイル名を記述できるコードブロックを実装する

qiitaや他サイトで使われているコードブロックを真似してみた

before

setup.pyを編集

from setuptools import setup
setup()

after

以下のファイルを変更

from setuptools import setup
setup()

このようにファイル名の表記をスマートにできるのは憧れだった

コード

<pre class="code-block-header" pre_title="setup.py"><code class="language-python">
from setuptools import setup
setup()
</code></pre>

/*code-block-header*/
.code-block-header{
    position: relative;
}
.code-block-header:before {
    content: attr(pre_title);
    font-weight: bold;
    color: yellow;
    background-color: gray;
  font-size: 16px;
  padding: 2px 5px 0px 5px;
  position: absolute;
  top: 0;
  left: 0;
}

内容

preにclass<code-block-header>とpre_title="xxx"を与えて
CSSのbeforeで手を加えています。

本題(vimRepress&Python-markdownを使用している方向け)

記入するコードが多く使い勝手が悪かったのでmarkdown_extensionのfenced_code.pyに改良を加える

環境

• python2
  今回作成したのはmarkdownの拡張機能のためあまり気にしないでよい
• markdown3.1.1
  現行は3.3.3。python2には対応していないが移植元は現行。

install

pip2 install git+https://github.com/ambergon/a_markdown_fence

vimRepressに追記

struct["description"] = self.html_text = markdown.markdown(rawtext, \
        extensions=['markdown.extensions.extra', \
        'markdown.extensions.nl2br', \
+        'a_markdown_fence'])

使用方法

```{.<lang> .<class> #<id> :<file_name>}
#内容
```
```{.python .aa .bb .cc #dd :setup.py}
print("内容")
```

実際に表示されるコード
<pre id="dd" class="aa bb cc code-block-header" pre_title="setup.py"><code class="language-python">
print("内容")
</code></pre>

.xxxxの最初は言語、以降はすべてpreのclass名
`#`xxxxはpreのid名
:xxxxはファイルの名前。これを指定した場合のみclassにcode-block-headerを自動で追加する

本家と比較して

未実装（？）のハイライトや行番号機能はそのまま削除。
依存しているパッケージなどはそのままコピペしているため見栄えが悪いが依存は少ない

markdown_extension.extraと同時に使用しても現状問題は起きていない

参考

before-CSSカスケーディングスタイルシート
GitHub Pagesでコードブロックにファイル名を表示する
:before疑似要素-スタイルシートリファレンス
Fenced Code blocks — Python-Markdown 3.3.3 doumentation