Markdown.css樣式簡(jiǎn)介

Markdown.css 是一個(gè)很有意思的 CSS 樣式表。它可以讓 HTML 顯示成類(lèi)似 Markdown 純文本的形式。
基于 LESS 編寫(xiě)
Markdown.css 基于 LESS 編寫(xiě),源代碼在此。
下面簡(jiǎn)要地解析一下具體實(shí)現(xiàn)的方法。
標(biāo)題
markdown 的標(biāo)題在前加上 # 到 ###### 表示。這是用了 CSS 的偽類(lèi) :before 實(shí)現(xiàn),例如 h2 是這么定義的:
- h2:before {
- content: "## ";
- display: inline;
- }
強(qiáng)調(diào)
強(qiáng)調(diào)是前后加上*,因此除了 :before 之外還用到了 :after。
- @em-char: "*";
- em:before, em:after {
- content: @em-char;
- display: inline;
- }
strong、code的實(shí)現(xiàn)類(lèi)似。
鏈接
Markdown 中的鏈接采用 [text](link) 的格式,實(shí)現(xiàn)和上面的強(qiáng)調(diào)的做法類(lèi)似,首先去掉文本的裝飾,然后使用 :before 在前面添加 [:
- a {
- text-decoration: none;
- }
- a:before {
- content: "[";
- display: inline;
- color: @color;
- }
后面添加的內(nèi)容中包含鏈接,可以通過(guò) attr(href) 取得:
- a:after {
- content: ~'"](" attr(href) ")"';
- display: inline;
- color: @color;
- }
pre
pre 的話(huà),很簡(jiǎn)單,只要左邊縮進(jìn)四個(gè)字符即可。對(duì)于支持縮進(jìn)四個(gè)字符的瀏覽器,使用4ch即可,不支持的瀏覽器那就使用34px。
- @four-space: 34px;
- @four-space-css3: ~"4ch";
- pre {
- margin-left: @four-space;
- padding-left: @four-space-css3;
- }
引用
Markdown 中的引用采用如下格式:
> 這是一個(gè)引用
> 引用的第二行
因此,采用的方法是在引用后添加>和 \A (換行),然后調(diào)整位置,使其與原文“對(duì)齊”,并隱藏多余的>。
- 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 `whitewhite-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>";
- whitewhite-space: pre;
- position: absolute;
- top: 0;
- left: 0;
- font-size: @font-size;
- line-height: @line-height;
- }
- }
圖片
使用如下 CSS 可以實(shí)現(xiàn)圖片轉(zhuǎn)為 markdown 形式顯示:
- img { content: "" }
- img:before {
- content: " ")";
- color: #333333;
- }
markdownify
還有一個(gè) markdownify 的 bookmarklet,將其保存在書(shū)簽欄之后,可以將任意網(wǎng)站轉(zhuǎn)為 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'});
相關(guān)文章
通過(guò)CSS3的object-fit來(lái)調(diào)整圖片適配尺寸的技巧簡(jiǎn)介
這篇文章主要介紹了通過(guò)CSS3的object-fit來(lái)調(diào)整圖片適配尺寸的技巧,包括用object-fit來(lái)居中并裁剪圖片的方法,需要的朋友可以參考下2016-02-27CSS計(jì)數(shù)器counter()的用法簡(jiǎn)介
這篇文章主要介紹了CSS計(jì)數(shù)器counter()的用法,是CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-09-26- 這篇文章主要介紹了CSS中的偽元素,是CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-01
- 這篇文章主要介紹了CSS中的各種選擇符,是CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-17
- CSS里一直有一個(gè)讓我們頭疼的問(wèn)題,就是創(chuàng)建布局很麻煩。當(dāng)然,有很多方式,有很多技術(shù)都可以創(chuàng)建各種布局,但我們總覺(jué)得CSS里應(yīng)該提供一些新屬性,讓我們能更好的管理布局2014-05-03
定義css設(shè)備類(lèi)型-Media Queries圖表簡(jiǎn)介及使用方法
CSS3完美地解決了讓同一個(gè)網(wǎng)站同時(shí)適應(yīng)完全不同尺寸的屏幕這些問(wèn)題;css3提出的MediaQueries解決了為網(wǎng)站設(shè)計(jì)不同的CSS樣式文件,如打印樣式表文件,手機(jī)樣式文件,電腦樣式2013-01-21css3背景圖片透明疊加屬性cross-fade簡(jiǎn)介及用法實(shí)例
據(jù)說(shuō)iOS6系統(tǒng)(iPhone5)增加了兩個(gè)CSS3屬性,一個(gè)是CSS3 filters – CSS3濾鏡另外一個(gè)是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來(lái)為您介紹cross-fade屬性,感興趣的朋友2013-01-08- 本文主要介紹了通用的css hack2012-07-11
網(wǎng)頁(yè)設(shè)計(jì)中的CSS Sprites技術(shù)介紹及其優(yōu)化方法
CSS Sprites 技術(shù)對(duì)于廣大的前端工程師來(lái)說(shuō)應(yīng)該是一點(diǎn)也不陌生。這個(gè)被國(guó)內(nèi)開(kāi)發(fā)者昵稱(chēng)為CSS精靈 CSS雪碧的家伙到底解決了什么問(wèn)題,我們又怎樣合理使用這個(gè)技術(shù)呢?下面讓我2012-05-31- 國(guó)外人士非常重視網(wǎng)站的易用性,相當(dāng)一部分外國(guó)站點(diǎn)已經(jīng)使用em作為字體單位.2009-12-27