app/views/articles/_markdown_help.html.erb

Summary

Maintainability
Test Coverage
<% 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">&times;</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>&gt; text</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
<% end %>