Markdownで記述するのが好きという人は何でもMarkdownで記述したいと思うかも知れません。そうなるとHTMLにするのは目的ではなく、Markdown記法の方がHTMLよりも見やすくて良いと思うものでしょう。 そこで使ってみたいのがi-love-markdown.cssです。i-love-markdown.cssは既存のHTMLをMarkdown記法で表示してくれるスタイルシートです。

i-love-markdown.cssの使い方

例えばこんな感じになります。元々のHTMLは以下の通りです。

i-love-markdown.cssを有効にします。Markdown風になりました！

さらに他の記法にも対応しています。元々のHTMLは以下のようになっています。

リンクだってMarkdownっぽくなります。

テーブルも。

ちゃんとMarkdown風になります。

タネを明かすと、例えば見出しのタグは次のように定義されています。

.markdown-content h1:before {
  content: '# ';
}
.markdown-content h2:before {
  content: '## ';
}

画像はこんな感じ。CSSを駆使していますね。

.markdown-content img:before {
  content: '![' attr(alt) '](' attr(src) ' "' attr(title) '")';
}

i-love-markdown.cssは見た目はともあれ、やっていることはかなり高度なスタイルシートの操作です。そのテクニックから学べる点は多いのではないでしょうか。

i-love-markdown.cssはスタイルシート製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

I-love-markdown.css by NKjoep NKjoep/i-love-markdown.css