GitHub Markdown CSS+

A CSS Library that emulates the GitHub Markdown style with some new added features.

Headers

H1

H2

H3

H4

H5
H6
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

Emphasis

Italics

Bold

Scratch

<p><em>Italics</em></p>
<p><strong>Bold</strong></p>
<p><del>Stratch</del></p>

Lists

  1. First ordered list item
  2. Another item
    • Unordered sub-list.
  3. Actual numbers don't matter, just that it's a number
    1. Ordered sub-list

  4. And another item.

Inline HTML

To reboot your computer, press ctrl + alt + del.

<p>To reboot your computer, press <kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>del</kbd>.</p>

Links

I'm an inline-style link with title.

Or leave it empty and use the link text itself.

Tables

Markdown Less Pretty
Still renders nicely
1 2 3

Blockquotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Emphasis into a blockquote. 

<blockquote>
  <p>
    This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Emphasis</strong> into a blockquote.
  </p>
</blockquote>

Horizontal Rule

<hr>

Task List

<ul class="task-list">
  <li>
    <input type="checkbox" disabled="disabled"> foo
  </li>
  <li>
    <input type="checkbox" checked="checked" disabled="disabled"> bar
  </li>
</ul>

Navbar (Mobile coming soon)

Light

<nav>
  <div class="nav-left">
    <a class="nav-link nav-brand" href="#">Brand</a>
    <a class="nav-link" href="#">Link</a>
  </div>
  <div class="nav-right">
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
  </div>
</nav>

Dark

<nav class="nav-dark">
...
</nav>

Progress Bar

Primary

35%

Success

100%

Warning

50%

Danger

75% 
<div class="progress">
  <span class="progress-bar" style="width:35%;">
    35%
  </span>
</div>

...
<span class="progress-bar progress-success" style="width:100%;">
...

...
<span class="progress-bar progress-warning" style="width:50%;">
...

...
<span class="progress-bar progress-danger" style="width:75%;">
...

Buttons

Primary

Click Me

Success

Click Me

Warning

Click Me

Danger

Click Me 
<a class="btn" href="#">Click Me</a>
<a class="btn btn-success" href="#">Click Me</a>
<a class="btn btn-warning" href="#">Click Me</a>
<a class="btn btn-danger" href="#">Click Me</a>