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 demo Open in new window
320 x 568
View 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/video-splash.png" alt="A business guy in a jetpack" />
    <figcaption>A business guy in a jetpack</figcaption>
    </figure>

  <img src="/images/video-splash.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>