はじめに

Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。

左上にコードの出典を示すファイル名がつけられています。このコードは以下のように記述しています。

Qiitaではこのように書くことでコードにファイル名をつけることができます。しかし、この書き方はちゃんとしたMarkdownの書き方というわけではないので、Qiita以外でこの書き方をしてもコードにファイル名をつけることはできません。

本記事では、CSSだけでコードにファイル名をつける方法について説明します。

コードにファイル名をつける

Markdownの書き方

まず、ファイル名をつけたいコードのMarkdownを以下のように記述します。先頭に#をつけると見出しになり、####はレベル4の見出しとなります。このままだったらただレベル4の見出しとコードが並んでいるだけですが、この後これらのスタイルをCSSで整えていきます。

#### ファイル名
```
# ここにコードを記述
```

CSSの追加

本来ならただのレベル４の見出しを、そのすぐ下にあるコードのファイル名のようにスタイルを変更します。以下はSASS記法で書いているので、それ以外の書き方は適宜読み替えてください。

h4 {
    display: inline-block;
    position: relative;
    z-index: 8;
    margin: 0;
    padding: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    background-color: #5a6165;
    & + div > pre {
      margin-top: -30px;
      padding-top: 56px;
    }
  }

h4をコードのファイル名となるスタイルに変更しています。また、& + div > preは「h4に隣接するdivの子のpre」という意味になり、コードに隣接するレベル４の見出しがある場合はコードを上にずらしています。コードに隣接するレベル4の見出しがない＝ファイル名をつけないコードのスタイルは従来のままです。

CSSセレクターについては以下を参照してください。

また、コードが長くて横スクロールバーが表示されるようになるとh4タグがコードの後ろに隠れてしまうため、positionとz-indexを指定して常にコードの前面に表示されるようにします。

使用上の注意

この方法でコードにファイル名をつけると、当然ですがレベル4の見出しを本来の用途で使うことはできなくなります。もしレベル４の見出しを使うという方は、ファイル名にするスタイルをレベル5やレベル6の見出しに変更してください。いずれにしろ、見出しのうちひとつは本来の用途で使えなくなることにご注意ください。

RailsアプリでredcarpetというGemを使って目次（TOC : Table of contents）を設定している場合、今のままだとファイル名として使用している見出しまで目次に羅列されてしまうので、目次として羅列する見出しのレベルを設定しておく必要があります（関係ある箇所のみ抜粋）。

markdown_helper.rb

module MarkdownHelper
  def toc(text)
    markdown = Redcarpet::Markdown.new(
      Redcarpet::Render::HTML_TOC.new(nesting_level: 3)
    )
    markdown.render(text).html_safe
  end
end