Draceditor Markdown Guide
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<div class="ui segment">
<table class="ui celled table markdown-reference">
<thead>
<tr>
<th>Type</th>
<th>Or</th>
<th>Linux/Windows</th>
<th>Mac OS</th>
<th>... to Get</th>
</tr>
</thead>
<tbody>
<tr>
<td>:emoji_name:</td>
<td>—</td>
<td>—</td>
<td>—</td>
<td><img class="marked-emoji" src="https://assets-cdn.github.com/images/icons/emoji/smile.png"></td>
</tr>
<tr>
<td>@[username]</td>
<td>—</td>
<td>Ctrl+M</td>
<td>Command+M</td>
<td><a href="#">@username</a></td>
</tr>
<tr><td colspan="5"></td></tr>
<tr>
<td>*Italic*</td>
<td>_Italic_</td>
<td>Ctrl+I</td>
<td>Command+I</td>
<td><em>Italic</em></td>
</tr>
<tr>
<td>**Bold**</td>
<td>__Bold__</td>
<td>Ctrl+B</td>
<td>Command+B</td>
<td><strong>Bold</strong></td>
</tr>
<tr>
<td># Heading 1</td>
<td>Heading 1<br> =========</td>
<td>Ctrl+Alt+1</td>
<td>Command+Option+1</td>
<td><h1>Heading 1</h1></td>
</tr>
<tr>
<td>## Heading 2</td>
<td>Heading 2<br> ---------</td>
<td>Ctrl+Alt+2</td>
<td>Command+Option+2</td>
<td><h2>Heading 2</h2></td>
</tr>
<tr>
<td>[Link](http://a.com)</td>
<td>[Link][1]<br> ⁝<br> [1]: http://b.org</td>
<td>Ctrl+L</td>
<td>Command+L</td>
<td><a href="http://commonmark.org/">Link</a></td>
</tr>
<tr>
...
CSS
.marked-emoji {
width: 20px
}
hr {
border-bottom:none;
border-top:1px solid #ddd
}
code {
font-size: 12px;
padding:2px;
border:1px solid #ddd;
background: #f0f0f0
}