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 21:55:20 +03:00
parent ac1788b64c
commit 443ef1cc8d
2 changed files with 124 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
github-markdown-htllm.css Normal file
View File

@ -0,0 +1,65 @@
.markdown-body a:before {
content: '[\00a0';
}
.markdown-body a:after {
content: '\00a0]( ' attr(href) ' )';
}
.markdown-body strong:before,
.markdown-body strong:after {
content: '**';
}
.markdown-body h1 {
border-bottom: 6px double #999999;
}
.markdown-body h1:before {
content: '#\00a0';
color: #999999;
}
.markdown-body h2 {
border-bottom: 2px solid #999999;
}
.markdown-body h2:before {
content: '##\00a0';
color: #999999;
}
.markdown-body h3:before {
content: '###\00a0';
color: #999999;
}
.markdown-body h4:before {
content: '####\00a0';
color: #999999;
}
.markdown-body h5:before {
content: '#####\00a0';
color: #999999;
}
.markdown-body h6:before {
content: '######\00a0';
color: #dddddd;
}
.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`';
vertical-align: text-top;
}
.markdown-body code:after {
content: '`\00a0';
vertical-align: text-top;
}

59
index-htllm.html Normal file
View File

@ -0,0 +1,59 @@
<!doctype html>
<html>
<head>
<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="github-markdown.css">
<link rel="stylesheet" href="github-markdown-htllm.css">
<style>
body {
min-width: 200px;
max-width: 790px;
margin: 0 auto;
padding: 30px;
}
</style>
</head>
<body>
<article class="markdown-body">
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
<ul>
<li>List item</li>
<li>List item</li>
<li>
<ul>
<li>Sublist item</li>
<li>Sublist item</li>
</ul>
</li>
</ul>
<ol>
<li>List item</li>
<li>List item</li>
<li>
<ol>
<li>Sublist item</li>
<li>Sublist item</li>
</ol>
</li>
</ol>
<blockquote>
<p><a href="#">Link</a> ipsum dolor sit amet filet mignon ribeye swine jerky porchetta beef ribs.</p>
</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>
</article>
</body>
</html>