<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wiki formatting</title>
<%= stylesheet_link_tag "wiki_syntax.css" %>
</head>
<body>

<h1>Wiki記法 クイックリファレンス (CommonMark Markdown (GitHub Flavored))</h1>

<table style="width:100%">
<tr><th colspan="3">Font Styles <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "5") %>" target="_blank">詳細</a>)</span></th></tr>
<tr><th><%= image_tag("jstoolbar/bold.svg", { alt: "太字" }) %></th><td style="width:50%;">**太字**</td><td style="width:50%;"><strong>太字</strong></td></tr>
<tr><th><%= image_tag("jstoolbar/italic.svg", { alt: "斜体" }) %></th><td>*斜体*</td><td><em>斜体</em></td></tr>
<tr><th><%= image_tag("jstoolbar/strikethrough.svg", { alt: "取り消し線" }) %></th><td>~~取り消し線~~</td><td><del>取り消し線</del></td></tr>
<tr><th><%= image_tag("jstoolbar/letter-c.svg", { alt: "整形済みテキスト" }) %></th><td>`コード`</td><td><code>コード</code></td></tr>
<tr><th><span class="syntax-pre"/></th><td>```<br>&nbsp;複数行の<br>&nbsp;コード<br>```</td><td>
<pre>
 複数行の
 コード
</pre>
</td></tr>

<tr><th colspan="3">コードハイライト <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "13") %>" target="_blank">詳細</a> | <a href="<%= help_code_highlighting_path %>" target="_blank">対応言語</a>)</span></th></tr>
<tr><th><%= image_tag("jstoolbar/code.svg", { alt: "コードハイライト" }) %></th><td>``` ruby<br>3.times do<br>&nbsp;&nbsp;puts 'Hello'<br>end<br>```</td><td>
<pre><code class="ruby syntaxhl"><span class="mi">3</span><span class="p">.</span><span class="nf">times</span> <span class="k">do</span>
  <span class="nb">puts</span> <span class="s1">'Hello'</span>
<span class="k">end</span>
</code></pre>
</td></tr>

<tr><th colspan="3">改行と段落</th></tr>
<tr><th></th><td>空行は<br><br>新しい段落を<br>作ります</td><td><p>空行は</p><p>新しい段落を作ります</p></td></tr>
<tr><th></th><td>バックスラッシュで終わる行\<br>または半角スペース2個で改行を挿入します</td><td><p>バックスラッシュで終わる行<br>または空白2個で改行を挿入します</p></td></tr>

<tr><th colspan="3">リスト</th></tr>
<tr><th><%= image_tag("jstoolbar/list.svg", { alt: "順不同リスト" }) %></th><td>* 項目1<br>&nbsp;&nbsp;* 下位階層の項目<br>* 項目2</td><td><ul><li>項目1<ul><li>下位階層の項目</li></ul></li><li>項目2</li></ul></td></tr>
<tr><th><%= image_tag("jstoolbar/list-numbers.svg", { alt: "番号付きリスト" }) %></th><td>1. 項目1<br>&nbsp;&nbsp;&nbsp;1. 下位階層の項目<br>2. 項目2</td><td><ol><li>項目1<ol><li>下位階層の項目</li></ol></li><li>項目2</li></ol></td></tr>
<tr><th><%= image_tag("jstoolbar/list-check.svg", { alt: "タスクリスト" }) %></th><td>* [ ] 項目1<br>* [x] 項目2</td><td><ul style="list-style-type: none; padding-inline-start: 12px;"><li><input type="checkbox" disabled>項目1</li><li><input type="checkbox" disabled checked>項目2</li></ul></td></tr>

<tr><th colspan="3">見出し <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "8") %>" target="_blank">詳細</a>)</span></th></tr>
<tr><th><%= image_tag("jstoolbar/h1.svg", { alt: "見出し1" }) %></th><td># タイトル1</td><td><h1>タイトル1</h1></td></tr>
<tr><th><%= image_tag("jstoolbar/h2.svg", { alt: "見出し2" }) %></th><td>## タイトル2</td><td><h2>タイトル2</h2></td></tr>
<tr><th><%= image_tag("jstoolbar/h3.svg", { alt: "見出し3" }) %></th><td>### タイトル3</td><td><h3>タイトル3</h3></td></tr>

<tr><th colspan="3">リンク <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "4") %>" target="_blank">詳細</a>)</span></th></tr>
<tr><th></th><td>www.example.com</td><td><a href="#">www.example.com</a></td></tr>
<tr><th></th><td>http://example.com</td><td><a href="#">http://example.com</a></td></tr>
<tr><th></th><td>[Foo](http://example.com)</td><td><a href="#">Foo</a></td></tr>

<tr><th colspan="3">Redmine内のリンク <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "3") %>" target="_blank">詳細</a>)</span></th></tr>
<tr><th><%= image_tag("jstoolbar/wiki_link.svg", { alt: "Wikiページへのリンク" }) %></th><td>[[Wiki page]]</td><td><a href="#">Wiki page</a></td></tr>
<tr><th></th><td>チケット #12</td><td>チケット <a href="#">#12</a></td></tr>
<tr><th></th><td>##12</td><td><a href="#">Bug #12</a>: The issue subject</td></tr>
<tr><th></th><td>リビジョン r43</td><td>リビジョン <a href="#">r43</a></td></tr>
<tr><th></th><td>commit:f30e13e43</td><td><a href="#">f30e13e4</a></td></tr>
<tr><th></th><td>source:some/file</td><td><a href="#">source:some/file</a></td></tr>

<tr><th colspan="3">画像 <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "7") %>" target="_blank">詳細</a>)</span></th></tr>
<tr><th><%= image_tag("jstoolbar/image.svg", { alt: "画像" }) %></th><td>![](<em>画像URL</em>)</td><td></td></tr>
<tr><th></th><td>![](<em>添付ファイル名</em>)</td><td></td></tr>

<tr><th colspan="3">表</th></tr>
<tr>
  <th></th>
  <td>| A | B | C |<br>|---|---|---|<br>| A | B | C |<br>| D | E | F |</td>
  <td>
    <table class="sample">
      <tbody>
        <th>A</th><th>B</th><th>C</th>
        <tr><td>A</td><td>B</td><td>C</td></tr>
        <tr><td>D</td><td>E</td><td>F</td></tr>
      </tbody>
    </table>
  </td>
</tr>

<tr><th colspan="3">HTMLを直接使用する<span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "15") %>" target="_blank">詳細</a>)</span></th></tr>
<tr>
  <th></th><td>HTML is &lt;del&gt;not&lt;/del&gt; &lt;u&gt;allowed&lt;/u&gt;.</td><td>HTML is <del>not</del> <u>allowed</u>.</td>
</tr>

<tr><th colspan="3">アラートボックス <span class="more_info">(<a href="<%= help_wiki_syntax_path(:detailed, anchor: "16") %>" target="_blank">詳細</a>)</span></th></tr>
<tr><th></th><td>&gt; [!NOTE]<br>&gt; 次のようなアラートボックスが使えます [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION].</td><td>
<div class="markdown-alert markdown-alert-note">
<p class="markdown-alert-title">Note</p>
<p>次のようなアラートボックスが使えます [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION].</p>
</div>
</td></tr>

</table>

<p><a href="<%= help_wiki_syntax_path(:detailed) %>" onclick="window.open('<%= help_wiki_syntax_path(:detailed) %>', '', ''); return false;">より詳細なリファレンス</a></p>
</body>
</html>
