zulip/templates/zerver/markdown_help.html
Brock Whittaker 2ae23054ee informational-overlays: Focus overlay body on shortcut "?".
This focuses the body content of the informational overlay after
going to it from "?" so that you can use up and down arrows to then
scroll the content easily.

Fixes: #4480.
2017-05-05 09:53:58 -07:00

134 lines
8.9 KiB
HTML

<div class="overlay-modal hide" id="markdown-help" tabindex="-1" role="dialog"
aria-labelledby="markdown-help-label" aria-hidden="true">
<div class="modal-body" tabindex="1">
<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><i>italic</i></td>
</tr>
<tr>
<td>**bold**</td>
<td><b>bold</b></td>
</tr>
<tr>
<td>~~strikethrough~~</td>
<td><del>strikethrough</del></td>
</tr>
<tr>
<td>[Zulip website](https://zulip.org)</td>
<td><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>
<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>: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/" license="/static/generated/emoji/images/emoji/NOTICE" target="_blank">Noto Project</a>)</td>
<td><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><span class="user-mention">@Joe Smith</span> (notifies Joe Smith)</td>
</tr>
<tr>
<td>@**all**</td>
<td><span class="user-mention">@all</span> (notifies all recipients)</td>
</tr>
<tr>
<td>#**streamName**</td>
<td><a>#streamName</a> (links to a stream)</td>
</tr>
<tr>
<td>Some inline `code`</td>
<td>Some inline <code>code</code></td>
</tr>
<tr>
<td class="preserve_spaces">```
def zulip():
print "Zulip"
```</td>
<td><pre>def zulip():
print "Zulip"</pre></td>
</tr>
<tr>
<td class="preserve_spaces">```python
def zulip():
print "Zulip"
```</td>
<td>
<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><blockquote>Quoted</blockquote></td>
</tr>
<tr>
<td class="preserve_spaces">```quote
Quoted block
```</td>
<td><blockquote><p>Quoted block</p></blockquote></td>
</tr>
<tr>
<td>Some inline math $$e^{i \pi } + 1 = 0$$</td>
<td>
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 aria-hidden="true" class="katex-html"><span class="strut" style="height:0.824664em;"></span><span class="strut bottom" style="height:0.907994em;vertical-align:-0.08333em;"></span><span class="base textstyle uncramped"><span class="mord"><span class="mord mathit">e</span><span class="msupsub"><span class="vlist"><span style="top:-0.363em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">&#8203;</span></span><span class="reset-textstyle scriptstyle uncramped mtight"><span class="mord scriptstyle uncramped mtight"><span class="mord mathit mtight">i</span><span class="mord mathit mtight" style="margin-right:0.03588em;">π</span></span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">&#8203;</span></span>&#8203;</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><mrow><mn>0</mn></mrow><mrow><mn>1</mn></mrow></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.4251079999999998em;"></span><span class="strut bottom" style="height:2.337358em;vertical-align:-0.91225em;"></span><span class="base displaystyle textstyle uncramped"><span class="mop"><span class="mop op-symbol large-op" style="margin-right:0.44445em;top:-0.0011249999999999316em;"></span><span class="msupsub"><span class="vlist"><span style="top:0.91225em;margin-left:-0.44445em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">&#8203;</span></span><span class="reset-textstyle scriptstyle cramped mtight"><span class="mord scriptstyle cramped mtight"><span class="mord mathrm mtight">0</span></span></span></span><span style="top:-0.9739999999999999em;margin-right:0.05em;"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">&#8203;</span></span><span class="reset-textstyle scriptstyle uncramped mtight"><span class="mord scriptstyle uncramped mtight"><span class="mord mathrm mtight">1</span></span></span></span><span class="baseline-fix"><span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">&#8203;</span></span>&#8203;</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 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>