zulip/templates/zerver/app/markdown_help.html

<div class="overlay-modal hide" id="message-formatting" tabindex="-1" role="dialog"
    aria-label="{{ _('Message formatting') }}">
    <div class="modal-body" tabindex="0">
        <div id="markdown-instructions">
            <table class="table table-striped table-condensed table-rounded table-bordered help-table">
                <thead>
                    <tr>
                        <th>{% trans %}You type{% endtrans %}</th>
                        <th>{% trans %}You get{% endtrans %}</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>

                        <td>*italic*</td>
                        <td class="rendered_markdown"><i>italic</i></td>
                    </tr>
                    <tr>
                        <td>**bold**</td>
                        <td class="rendered_markdown"><b>bold</b></td>
                    </tr>
                    <tr>
                        <td>~~strikethrough~~</td>
                        <td class="rendered_markdown"><del>strikethrough</del></td>
                    </tr>
                    <tr>
                        <td>[Zulip website](https://zulip.org)</td>
                        <td class="rendered_markdown"><a href="https://zulip.org" target="_blank">Zulip website</a></td>
                    </tr>
                    <tr>
                        <td>* Milk<br/>
                            * Tea<br/>
                            &nbsp;&nbsp;* Green tea<br/>
                            &nbsp;&nbsp;* Black tea<br/>
                            &nbsp;&nbsp;* Oolong tea<br/>
                            * Coffee
                        </td>
                        <td class="rendered_markdown">
                            <ul>
                                <li>Milk</li>
                                <li>Tea
                                    <ul>
                                        <li>Green tea</li>
                                        <li>Black tea</li>
                                        <li>Oolong tea</li>
                                    </ul>
                                </li>
                                <li>Coffee</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>1. Milk<br/>
                            1. Tea<br/>
                            1. Coffee
                        </td>
                        <td class="rendered_markdown">1. Milk<br/>
                            2. Tea<br/>
                            3. Coffee
                        </td>
                    </tr>
                    <tr>
                        <td>:heart: (and <a href="http://www.emoji-cheat-sheet.com/" target="_blank">many others</a>, from the <a href="https://code.google.com/p/noto/" target="_blank">Noto Project</a>)</td>
                        <td class="rendered_markdown"><img alt=":heart:" class="emoji" src="/static/generated/emoji/images/emoji/heart.png" title=":heart:" /></td>
                    </tr>
                    <tr>
                        <td>@**Joe Smith**<br/>
                          (autocompletes from @joe)</td>
                        <td class="rendered_markdown"><span class="user-mention">@Joe Smith</span> (notifies Joe Smith)</td>
                    </tr>
                    <tr>
                        <td>@_**Joe Smith**<br/>
                          (autocompletes from @_joe)</td>
                        <td class="rendered_markdown"><span class="user-mention">Joe Smith</span> (links to profile but doesn't notify Joe Smith)</td>
                    </tr>
                    <tr>
                        <td>@**all**</td>
                        <td class="rendered_markdown"><span class="user-mention">@all</span> (notifies all recipients)</td>
                    </tr>
                    <tr>
                        <td>#**streamName**</td>
                        <td class="rendered_markdown"><a>#streamName</a> (links to a stream)</td>
                    </tr>
                    <tr>
                        <td>/me is busy working<br/>
                          (send a status message as user Iago)</td>
                        <td class="rendered_markdown"><span class="sender_name-in-status">Iago</span> is busy working</td>
                    </tr>
                    <tr>
                        <td>Some inline `code`</td>
                        <td class="rendered_markdown">Some inline <code>code</code></td>
                    </tr>
                    <tr>
                    <td class="preserve_spaces">```
def zulip():
    print "Zulip"
```</td>
                    <td class="rendered_markdown">
                        <div class="codehilite"><pre>def zulip():
    print "Zulip"</pre></div>
                    </td>
                    </tr>
                    <tr>
                    <td class="preserve_spaces">```python
def zulip():
    print "Zulip"
```</td>
                    <td class="rendered_markdown">
                        <div class="codehilite"><pre><span class="k">def</span> <span class="nf">zulip</span><span class="p">():</span>
    <span class="k">print</span> <span class="s">"Zulip"</span></pre></div>
                    </td>
                    </tr>
                    <tr>
                        <td colspan="2">{% trans %}To add syntax highlighting to a multi-line code block,
                          add the language's <b>first</b> <a target="_blank" href="http://pygments.org/docs/lexers/">Pygments short name</a>
                          after the first set of back-ticks.
                          You can also make a code block by indenting each line with 4 spaces.{% endtrans %}</td>
                    </tr>
                    <tr>
                        <td>&gt; Quoted</td>
                        <td class="rendered_markdown"><blockquote>Quoted</blockquote></td>

                    </tr>
                    <tr>
                    <td class="preserve_spaces">```quote
Quoted block
```</td>
                    <td class="rendered_markdown"><blockquote><p>Quoted block</p></blockquote></td>
                    </tr>
                    <tr>
                        <td>Some inline math $$ e^{i \pi } + 1 = 0 $$</td>
                        <td class="rendered_markdown">
                            Some inline math <span class="katex"><span class="katex-mathml"><math><semantics><mrow><msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup><mo>+</mo><mn>1</mn><mo>=</mo><mn>0</mn></mrow><annotation encoding="application/x-tex">e^{i\pi} + 1 = 0</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height: 0.874664em;"></span><span class="strut bottom" style="height: 0.957994em; vertical-align: -0.08333em;"></span><span class="base"><span class="mord"><span class="mord mathit">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.874664em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathit mtight">i</span><span class="mord mathit mtight" style="margin-right: 0.03588em;">π</span></span></span></span></span></span></span></span></span><span class="mbin">+</span><span class="mord mathrm">1</span><span class="mrel">=</span><span class="mord mathrm">0</span></span></span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="preserve_spaces">```math
\int_{0}^{1} f(x) dx
```</td>
                        <td>
                            <span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><msubsup><mo>∫</mo><mn>0</mn><mn>1</mn></msubsup><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo><mi>d</mi><mi>x</mi></mrow><annotation encoding="application/x-tex">\int_{0}^{1} f(x) dx</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height: 1.56401em;"></span><span class="strut bottom" style="height: 2.47596em; vertical-align: -0.91195em;"></span><span class="base"><span class="mop"><span class="mop op-symbol large-op" style="margin-right: 0.44445em; position: relative; top: -0.001125em;">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.56401em;"><span class="" style="top: -1.78805em; margin-left: -0.44445em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathrm mtight">0</span></span></span></span><span class="" style="top: -3.8129em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathrm mtight">1</span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.91195em;"></span></span></span></span></span><span class="mord mathit" style="margin-right: 0.10764em;">f</span><span class="mopen">(</span><span class="mord mathit">x</span><span class="mclose">)</span><span class="mord mathit">d</span><span class="mord mathit">x</span></span></span></span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="rendered_markdown" colspan="2">{% trans %}You can also make <a target="_blank"
                            href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#wiki-tables">tables</a>
                            with this <a target="_blank"
                                          href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#wiki-tables">Markdown-ish
                        table syntax</a>.{% endtrans %}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    <hr/>
    <a href="/help/format-your-message-using-markdown" target="_blank">Detailed message formatting documentation</a>
    </div>
</div>