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は、左に4文字インデントすれば簡単です.4文字のインデントをサポートするブラウザでは、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 

      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

ブックマークバーに保存した後、任意のサイトをMarkdownスタイルに変更できるmarkdownifyのbookmarkletもあります.

$('link[rel=stylesheet]').add('style').remove();
$('[style]').attr('style', '');
$('head').append('');
$('body').addClass('markdown').css({width: '600px', margin: '2em auto', 'word-wrap': 'break-word'});
$('a img').css({'max-height': '1em', 'max-width': '1em'});

SegmentFaultの作成