app/views/articles/_markdown_help.html.erb
<% uuid = next_uuid %>
<%= link_to "Markdown", "#", class: ["toggle-markdown-help", "glyphicon", "glyphicon-question-sign"], data: {toggle: "modal", target: "[data-uuid='#{uuid}']"} %>
<%= content_tag :div, class: ["modal", "fade", "modal-markdown-help"], data: {uuid: uuid} do %>
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Markdown ヘルプ</h4>
</div>
<div class="modal-body">
<table class="table-bordered">
<thead>
<tr>
<th>表示</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>絵文字</td>
<td>
<p>
<img class="emoji" title=":+1:" alt=":+1:" src="/images/emoji/unicode/1f44d.png" height="20" width="20" align="absmiddle">
<img class="emoji" title=":bow:" alt=":bow:" src="/images/emoji/unicode/1f647.png" height="20" width="20" align="absmiddle">
<img class="emoji" title=":angel:" alt=":angel:" src="/images/emoji/unicode/1f47c.png" height="20" width="20" align="absmiddle">
<img class="emoji" title=":imp:" alt=":imp:" src="/images/emoji/unicode/1f47f.png" height="20" width="20" align="absmiddle">
...
</p>
=> <a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji cheat sheet for Campfire and GitHub</a>
</td>
</tr>
<tr>
<td>見出し</td>
<td>
# text<br>
## text<br>
### text
</td>
</tr>
<tr>
<td>箇条書き</td>
<td>
- text<br>
- text<br>
- text
</td>
</tr>
<tr>
<td>番号付きの箇条書き</td>
<td>
1. text<br>
2. text<br>
3. text
</td>
</tr>
<tr>
<td>コードブロック(シンタックスハイライト付き)</td>
<td>
```lang:filename<br>
text<br>
```
</td>
</tr>
<tr>
<td>コードのインライン表示</td>
<td>`text`</td>
</tr>
<tr>
<td>太字</td>
<td>**text**</td>
</tr>
<tr>
<td>強調表示</td>
<td>*text*</td>
</tr>
<tr>
<td>リンク</td>
<td>[text](http://www.example.com/)</td>
</tr>
<tr>
<td>水平線</td>
<td>---</td>
</tr>
<tr>
<td>引用</td>
<td>> text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<% end %>