【CSS】CSSだけでMarkdownのコードにファイル名をつける

2021年4月7日 17:24

はじめに

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

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

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

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

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

Markdownの書き方

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

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

CSSの追加

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

h4 {
    display: inline-block;
    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の見出しがある場合はコードを上にずらしています。コードに隣接するレベル4の見出しがない=ファイル名をつけないコードのスタイルは従来のままです。

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

使用上の注意

この方法でコードにファイル名をつけると、当然ですがレベル4の見出しを本来の用途で使うことはできなくなります。もしレベル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

まとめ

Markdownのコードにファイル名が書いてあると一層わかりやすい記事になります。CSSを書くだけで簡単に実現することができるので、本記事を参考にしていただければと思います。

関連記事

【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div clas [...]
2020年8月31日 8:54
【CSS】JavaScriptを使わずにハンバーガーメニューを作る
# はじめに 当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。 何よ [...]
2020年8月31日 7:34
【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装
# はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 # CSSカスタムプロパティ [...]
2020年8月30日 18:07
【CSS】transitionの効果を一方向(ゆっくり変化し即座に戻る)にする
# はじめに 最近は`transition`を使った動きのあるWebサイトがたくさんあります。まったく動きのない静的なページを見つけるのが難しいくらいです。 今回は、`transition`の効果を一方向(ゆっくり変化し即座に戻る)にする方 [...]
2020年8月27日 14:51
【CSS】テキストを領域内に入った部分から徐々に表示
# はじめに 現在、お仕事でWebアプリを作っています。これを機会にイチからWebデザインの勉強をしようと思い、脱・Bootstrapを目指して頑張っています。 まだまだ高度なコードは書けませんが、これから少しずつCSS関連の記事も書いてい [...]
2020年8月25日 18:15