What is the style of Markdown.css?
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.
