Markdownで書いたままの見た目にしたい

簡単な記法で、メモ書きなどにも使いやすいMarkdown。あまりに慣れすぎてしまって、リストやリンクがMarkdown形式になっていないと一瞬理解できないところまで来てしまいました。そんな人がほかにいるかどうかはわかりませんが、webページをMarkdown風にするCSSを考えました。

Sample page

markdown-ish.css

Markdown発祥の地である Daring Fireball: Markdown を参考に、各HTML要素に直接スタイルを当てます。

改行は視覚的に作用するものではないので特に何もしていません。

画像はHTML的に置換要素になりますので、CSSでは ![Alt text](/path/to/img.jpg "Optional title") のように表示することができません。また仮に文字列として表示できたとしても、画像の意味がなくなると思いますので、これも対応していません。

Headers

h1-h6要素それぞれの文頭に # を付与します。

h1::before {
    content: '# ';
}
...
h6::before {
    content: '###### ';
}

Blockquotes

blockquote要素を使用した引用の全行頭に > を付与します。100行分実装しています。

実装としてはハックっぽい感じになってしまいました。 ::before を使用すると、大量の > が表示された後に引用文が表示されるので ::after にしています。

blockquote::after {
  content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>";
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
}

blockquote {
  position: relative;
  padding-inline-start: 1rem;
  overflow-y: hidden;
}

blockquote > * {
  margin: 0 auto;
}

Lists

番号なしリストに - 、番号付きリストに 1. を付与します。

@counter-style unordered-list {
  system: cyclic;
  symbols: '-';
  suffix: ' ';
}

ul > li {
  list-style-type: unordered-list;
}

@counter-style ordered-list {
  system: cyclic;
  symbols: '1';
  suffix: '. ';
}

ol > li {
  list-style-type: ordered-list;
}

Code Blocks

pre要素の中のcode要素の前後に ``` を付与します。

特殊な属性として、code要素に data-lang が指定されている場合は言語名として表示します。

pre > code::before {
  content: '```' attr(data-lang);
}

pre > code::after {
  content: '```';
}

Horizontal Rules

水平線を * * * に置換します。

hr::after {
  content: '* * *';
}

hr {
  border: none;
}

Links

a要素を使用したリンクをMarkdown記法風にします。titleはoptionalということで、指定がある場合とない場合両方のスタイルを用意しました。

a::before {
  content: '[';
}

a::after {
  content: '](' attr(href) ')';
}

a[title]::after {
  content: '](' attr(href) ' "' attr(title) '")';
}

Emphasis

em要素の前後に _ 、strong要素の前後に ** を付与します。

Markdownではそれぞれ _ と * 、 __ と ** に互換性がありますが、連続した際でもできるだけ間違いにくいように、使用する記号を変えています。

em::before,
em::after {
  content: '_';
}

strong::before,
strong::after {
  content: '**';
}

Code

文中のcode要素の前後に ` を付与します。

code::before,
code::after {
  content: '`';
}

denvernine/markdown-ish.md