Shulou(Shulou.com)06/03 Report--

This article introduces what the Markdown.css style is like, the content is very detailed, interested friends can use for reference, I hope it can be helpful to you.

Markdown.css is an interesting CSS stylesheet. It allows HTML to be displayed in a form similar to Markdown plain text.

Writing based on LESS

Markdown.css is written based on LESS, and the source code is here.

Let's briefly analyze the specific implementation method.

Title

The title of markdown is preceded by # to # to indicate. This is a pseudo class that uses CSS: the before implementation, for example, H3 is defined as this:

CSS

H2:before {

Content: "#"

Display: inline

}

Emphasize

The emphasis is to add * before and after, so in addition to: before, after is also used.

CSS

@ em-char: "*"

Em:before, em:after {

Content: @ em-char

Display: inline

}

The implementations of strong and code are similar.

Link

The links in Markdown are in the format of [text] (link). The implementation is similar to the practice emphasized above, first remove the decoration of the text, and then use: before to add [:

CSS

A {

Text-decoration: none

}

A:before {

Content: "["

Display: inline

Color: @ color

}

The content added later contains a link, which can be obtained through attr (href):

CSS

A:after {

Content: ~'"] (" attr (href) ")"'

Display: inline

Color: @ color

}

Pre

For pre, it's simple, just indent four characters on the left. For browsers that support indentation of four characters, use 4ch, and for browsers that do not support it, use 34px.

CSS

@ four-space: 34px

@ four-space-css3: ~ "4ch"

Pre {

Margin-left: @ four-space

Padding-left: @ four-space-css3

}

Quote

References in Markdown are in the following format:

> this is a reference

The second line of the reference

Therefore, the approach is to add > and\ A (line wrapping) after the reference, then adjust the position to "align" with the original text, and hide the excess >.

CSS

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

Content: ">\ A >\ A >\ A > A >\ A >\ A >

Whitewhite-space: pre

Position: absolute

Top: 0

Left: 0

Font-size: @ font-size

Line-height: @ line-height

}

}

Picture

You can use the following CSS to display images in markdown format:

CSS

Img {content: ""}

Img:before {

Content: "!]

Color: # 333333

}

Img:after {

Content: "] (" attr (src) ")"

Color: # 333333

}

Markdownify

There is also a bookmarklet for markdownify, which can be saved after the bookmark bar, and any website can be converted to Markdown style.

CSS

$('link rel = stylesheet]'). Add ('style'). Remove ()

$('[style]'). Attr ('style',')

$('head'). Append (')

$('body'). AddClass (' markdown'). Css ({width: '600pxrabbit, margin:' 2em auto', 'word-wrap':' break-word'})

$('an img') .css ({'max-height':' 1emails, 'max-width':' 1embers'})

About how the Markdown.css style is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.