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

2021年6月6日 14:04

はじめに

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

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

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

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

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

Markdownの書き方

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

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

CSSの追加

本来ならただのレベル4の見出しを、そのすぐ下にあるコードのファイル名のようにスタイルを変更します。以下は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の見出しがある場合はコードを上にずらしています。コードに隣接するレベル4の見出しがない=ファイル名をつけないコードのスタイルは従来のままです。

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

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

使用上の注意

この方法でコードにファイル名をつけると、当然ですがレベル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+JS】背景画像の視差効果(パララックス)を実装する方法
# はじめに JavaScriptプラグインを使わずに、背景画像の視差効果(パララックス)をVanilla JS(ピュアなJavaScript)だけで実装する方法について説明します。 # サンプル まず、背景画像の視差効果(パララックス) [...]
2021年10月17日 12:08
【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード
# はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラ [...]
2021年6月2日 15:15
【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外と [...]
2021年5月20日 23:23
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法
# はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 # 実装 ## サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <i [...]
2021年5月20日 13:26
【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div clas [...]
2020年8月31日 8:54