HTML that looks like markdown
When this section is styled by markdown.css
it looks like plain-text, despite being HTML. Inspect it with firebug or click on <HTML/> to see the markup.
A strong tag and an em tag get styled like so.
How about a link to my site?
H2 header
Lists
- they look like this
- it’s how you’d format them in pure markdown, if you took the time to indent when it wrapped to a new line.
Ordered lists
- here’s one line from a numbered list
- here’s another
- in markdown, the actual numbers don’t matter—you can toggle this with the class
markdown-ones
Block quotes
This is a blockquote that extends
to multiple lines.
With repeating email-style angle brackets.
Code blocks
(function() {
console.log('code blocks indent four spaces');
})()
Different headers
h4 header
h5 header
h6 header
That’s an hr above. It just works!
However, images will still look like images. Deal with it.
Made by Peter Coles /
aka @lethys /
code on github
<h1>HTML that looks like markdown</h1>
<p>When this section is styled by <code>markdown.css</code> it looks like plain-text, despite being HTML. Inspect it with firebug or click on <HTML/> to see the markup.</p>
<p>A <strong>strong tag</strong> and an <em>em tag</em> get styled like so.</p>
<p>How about a link to <a href="https://mrcoles.com/">my site</a>?</p>
<h2>H2 header</h2>
<h3>Lists</h3>
<ul>
<li>they look like this</li>
<li>it’s how you’d format them in pure markdown, if you took the time to indent when it wrapped to a new line.</li>
</ul>
<h3>Ordered lists</h3>
<ol>
<li>here’s one line from a numbered list</li>
<li>here’s another</li>
<li>in markdown, the actual numbers don’t matter—you can toggle this with the class <a href="#" onclick="$('body').toggleClass('markdown-ones');return false"><code>markdown-ones</code></a></li>
</ol>
<h3>Block quotes</h3>
<blockquote>
This is a blockquote that extends<br>
to multiple lines.<br><br>
With repeating email-style angle brackets.
</blockquote>
<h3>Code blocks</h3>
<pre><code>(function() {
console.log('code blocks indent four spaces');
})()</code></pre>
<h3>Different headers</h3>
<h4>h4 header</h4>
<h5>h5 header</h5>
<h6>h6 header</h6>
<hr>
<p>That’s an hr above. It just works!</p>
<p>
However, images will still look like images. Deal with it.
</p>
<p>
<img alt="kitten" src="http://placekitten.com/g/180/200">
</p>
<p>
Made by <a href="https://mrcoles.com/">Peter Coles</a> /<br>
aka <a href="https://twitter.com/lethys">@lethys</a> /<br>
code on <a href="https://github.com/mrcoles/markdown-css">github</a>
</p>
Get the markdown.css now!
Since sharing this with people, I have learned about an older markdown CSS project that does the same sort of things in a very similar way. So it goes. Great job, Florent!