Markdown
A class to style markdown generated HTML
How we use it
Apply a class of gg-s-md-generated-html
to a <div>
wrapping your markdown.
<div class="gg-s-md-generated-html">
{{ .Content }}
</div>
How they look
Examples of markdown generated content with styling applied can be found at giffgaff.com/blog and giffgaff.io.
View demoView code
<div class="gg-s-md-generated-html">
<ol>
<li>Thing number one</li>
<li>Thing number two</li>
</ol>
<ul>
<li>an item in a list</li>
<li>another item in a list</li>
</ul>
<h1>A h1 looks like this</h1>
<h2>A h2 looks like this</h2>
<h3>A h3 looks like this</h3>
<h4>A h4 looks like this</h4>
<h5>A h5 looks like this</h5>
<h6>A h6 looks like this</h6>
<p>This is a paragraph with a <a href="#">link</a> and some <strong>bold text</strong> in it.</p>
<blockquote>This is what a blockquote looks like. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
<pre>
<code>
console.log("this is what some code looks like");
</code>
</pre>
<figure>
<img src="/images/lady-mobile.png" alt="A business guy in a jetpack" />
<figcaption>A lady celebrating</figcaption>
</figure>
<img src="/images/lady-mobile.png" alt="A business guy in a jetpack" />
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
</div>