StarMirror/github-markdown-css
1
0
Fork 0
mirror of https://github.com/sindresorhus/github-markdown-css.git synced 2024-03-22 13:10:53 +08:00
Code Issues Projects Releases Wiki Activity

Adding a separate CSS file with rules to make HTML elements look like Markdown code.

Browse Source
This commit is contained in:
Mihai Stancu 2014-10-14 22:33:08 +03:00
parent 443ef1cc8d
commit 1a9821b6f2
2 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
github-markdown-htllm.css
View File

@ -1,8 +1,8 @@
.markdown-body a:before {
content: '[\00a0';
content: '[';
}
.markdown-body a:after {
content: '\00a0]( ' attr(href) ' )';
content: '](' attr(href) ')';
}
.markdown-body strong:before,
@ -46,14 +46,14 @@
color: #dddddd;
}
.markdown-body ul {
/*.markdown-body ul {
padding-left: .75em;
list-style-type: none;
}
.markdown-body ul li:before {
content: '\2217';
padding-right: .75em;
}
}*/
.markdown-body code:before {
content: '\00a0`';
@ -62,4 +62,19 @@
.markdown-body code:after {
content: '`\00a0';
vertical-align: text-top;
}
.markdown-body u {
text-decoration: none;
padding-bottom: .1em;
border-bottom: .1em solid;
}
.markdown-body u:before,
.markdown-body u:after {
content: '_';
}
.markdown-body em:before,
.markdown-body em:after {
content: '/';
}

18
index-htllm.html
View File

@ -4,6 +4,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>GitHub Markdown CSS demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="github-markdown.css">
<link rel="stylesheet" href="github-markdown-htllm.css">
<style>
@ -47,13 +50,20 @@
</ol>
<blockquote>
<p><a href="#">Link</a> ipsum dolor sit amet filet mignon ribeye swine jerky porchetta beef ribs.</p>
A quoted block of unexpectedly short text which might hopefully reach a second row in your page
depending on screen resolution and whatnot.
</blockquote>
<p>Bacon pastrami ham hock tongue t-bone, <code>ham shankle</code> capicola biltong fatback shoulder pork tenderloin
boudin. Pastrami sausage short ribs, pig bacon shoulder biltong ham. Sausage shankle meatball pork loin,
pancetta flank pork frankfurter pig pork chop ham hock chicken ribeye capicola.</p>
<p>
A paragraph of unexpectedly short text which might hopefully reach a second row in your page
depending on screen resolution and whatnot.
</p>
<p>A paragraph exemplifying <a href="http://bit.ly">a simple link</a> with text after it.</p>
<p>A paragraph exemplifying <code>inline code</code> with text after it.</p>
<p>A paragraph exemplifying <strong>a bolded item</strong> with text after it.</p>
<p>A paragraph exemplifying <em>an italic item</em> with text after it.</p>
<p>A paragraph exemplifying <u>an underlined item</u> with text after it.</p>
</article>
</body>
</html>