i-love-markdown.css - スタイルシートによるHTML to Markdown
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はスタイルシート製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。