markdown.css 讓 HTML 顯示成 Markdown 純文本 見證 CSS 的強大

Markdown.css 是一個頗有意思的 CSS 樣式表。它能夠讓 HTML 顯示成相似 Markdown 純文本的形式。（圖片除外）。

基於 LESS 編寫

Markdown.css 基於 LESS 編寫，源代碼在此。

下面簡要地解析一下具體實現的方法。

標題

markdown 的標題在前加上 # 到 ###### 表示。這是用了 CSS 的僞類 :before 實現，例如 h2 是這麼定義的：

h2:before {
  content: "## ";
  display: inline;
}

強調

強調是先後加上*，所以除了 :before 以外還用到了 :after。

@em-char: "*";
em:before, em:after {
  content: @em-char;
  display: inline;
}

strong、code的實現相似。

連接

Markdown 中的連接採用 [text](link) 的格式，實現和上面的強調的作法相似，首先去掉文本的裝飾，而後使用 :before 在前面添加 [:

a {
  text-decoration: none;
}
a:before {
  content: "[";
  display: inline;
  color: @color;
}

後面添加的內容中包含連接，能夠經過 attr(href) 取得：

a:after {
  content: ~'"](" attr(href) ")"';
  display: inline;
  color: @color;
}

pre

pre 的話，很簡單，只要左邊縮進四個字符便可。對於支持縮進四個字符的瀏覽器，使用4ch便可，不支持的瀏覽器那就使用34px。

@four-space: 34px;
@four-space-css3: ~"4ch"; 
pre {
  margin-left: @four-space;
  padding-left: @four-space-css3;
}

引用

Markdown 中的引用採用以下格式：

> 這是一個引用
> 引用的第二行

所以，採用的方法是在引用後添加>和 \A （換行），而後調整位置，使其與原文「對齊」，並隱藏多餘的>。

blockquote {
  position: relative;
  padding-left: @four-space/2;
  padding-left: @two-space-css3;
  overflow: hidden;

  &:after {
      // 100 lines max
      // the \A becomes a newline character and `white-space: pre`
      // makes it act like a <br>
      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;
      font-size: @font-size;
      line-height: @line-height;
  }
}

圖片

前面已經說過圖片會照常顯示。 感謝 jakwings 提示，使用以下 CSS 能夠實現圖片轉爲 markdown 形式顯示：

img { content: "" } 

img:before {
 content: "![";
 color: #333333;
}

img:after {
 content: "](" attr(src) ")";
 color: #333333;
}

markdownify

還有一個 markdownify 的 bookmarklet，將其保存在書籤欄以後，能夠將任意網站轉爲 Markdown 樣式。

$('link[rel=stylesheet]').add('style').remove();
$('[style]').attr('style', '');
$('head').append('<link rel="stylesheet" href="http://mrcoles.com/media/test/markdown-css/markdown.css" type="text/css" />');
$('body').addClass('markdown').css({width: '600px', margin: '2em auto', 'word-wrap': 'break-word'});
$('a img').css({'max-height': '1em', 'max-width': '1em'});

---

編撰 SegmentFault