send-mail/node_modules/showdown/test/features/underline/fulltext.html
dougpagani 2095e6ffe3
Add markdown format support (#25)
Co-authored-by: Dawid Dziurla <dawidd0811@gmail.com>
2020-11-30 18:51:34 +01:00

368 lines
17 KiB
HTML

<h1 id="markdowntestadaptedfrombitbucket">Markdown test adapted from BitBucket</h1>
<p><a href="http://daringfireball.net/projects/markdown/">Markdown</a> for readmes is pretty popular. So, I've given you a demo
here of all the markup we support. In some cases, I copied the doc/examples entirely from the Fireball Markdown site. </p>
<p>I didn't duplicate all the Markdown doc everything tho. For the entire docs and a deeper explanation of Markdown, you still need to go to the <a href="http://daringfireball.net/projects/markdown/">Markdown</a> site.</p>
<p>You can also use <a href="https://confluence.atlassian.com/x/xTAvEw">Markdown mark up</a> in comments, issues, and commit messages.</p>
<p>On this page:</p>
<ul>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-span-elements">Span Elements</a></p>
<ul>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-emphasis">Emphasis</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-strikethrough">Strikethrough</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-preformatted-code">Preformatted code</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-links">Links</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-images">Images</a></p></li></ul></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-block-elements">Block Elements</a></p>
<ul>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-headings">Headings</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-paragraphs-and-blockquotes">Paragraphs and blockquotes</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-lists">Lists</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-tables">Tables</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-code-and-syntax-highlighting">Code and Syntax highlighting</a></p></li>
<li><p><a href="https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-horizontal-rules">Horizontal rules</a></p></li></ul></li>
</ul>
<hr />
<h1 id="spanelements">Span Elements</h1>
<p>These elements occur within a line of text. So, for example font changes or links.</p>
<h2 id="emphasis">Emphasis</h2>
<p>Markdown treats * (asterisk) as emphasis markers. </p>
<p><em>single asterisks</em>
<strong>double asterisks</strong></p>
<p>All are created from this:</p>
<pre><code>*single asterisks*
**double asterisks**
</code></pre>
<h2 id="underlineexperimental">Underline [experimental]</h2>
<p><u>double underscores</u></p>
<p><u>triple underscores</u></p>
<p>All are created from this:</p>
<pre><code>__double underscores__
___triple underscores___
</code></pre>
<p>You must use the same character must be used to open and close an emphasis span. Emphasis can be used in the mi<em>dd</em>le of a word.</p>
<pre><code>Emphasis can be used in the mi*dd*le of a word.
</code></pre>
<p>But if you surround an * or _ with spaces, it will be treated as a literal asterisk or underscore.</p>
<p>To produce a literal asterisk or underscore at a position where it would otherwise be used as an emphasis delimiter, you can backslash escape it:</p>
<pre><code>\*this text is surrounded by literal asterisks\*
</code></pre>
<h2 id="strikethrough">Strikethrough</h2>
<p>Markdown's Markdown parser supports strikethrough by wrapping text in <code>~~</code>:</p>
<p>~~text that has been struckthrough~~</p>
<p>is created from:</p>
<pre><code>~~text that has been struckthrough~~
</code></pre>
<h2 id="preformattedcode">Preformatted code</h2>
<p>To indicate a span of code, wrap it with <code>`</code> (backtick). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:</p>
<p>Use the <code>printf()</code> function.</p>
<p>is produced from:</p>
<pre><code>Use the `printf()` function.
</code></pre>
<p>To include a literal backtick character within a code span, you can use multiple backticks as the opening and closing delimiters:</p>
<p><code>There is a literal backtick (`) here.</code> </p>
<h2 id="links">Links</h2>
<p>Markdown supports inline and reference links. In both styles, the link text is delimited by [square brackets]. To create an inline link, use this syntax:</p>
<pre><code>[ Text for the link ](URL)
</code></pre>
<p>So an inline link to <a href="http://www.yahoo.com">Yahoo</a> looks like this:</p>
<pre><code>So an inline link to [Yahoo](http://www.yahoo.com) looks like this:
</code></pre>
<p>Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:</p>
<pre><code>This is [an example][id] reference-style link.
</code></pre>
<p>Which gives you a link like this:</p>
<p>This is <a href="http://example.com/" title="Optional Title Here">an example</a> reference-style link.</p>
<p>Elsewhere in the document, usually at the bottom of the file, you define your link label on a line by itself:</p>
<pre><code>[id]: http://example.com/ "Optional Title Here"
</code></pre>
<p>Links can get pretty fancy, so if you want the long form version, visit the
official <a href="http://daringfireball.net/projects/markdown/">Markdown</a> docs.</p>
<h2 id="images">Images</h2>
<p>Markdown uses an image syntax that is intended to resemble the syntax for links, allowing for two styles: inline and reference. Images appear like this:</p>
<p><img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png" alt="Alt text" /></p>
<pre><code>![Alt text](http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png)
![Alt text](http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png "Optional title")
</code></pre>
<hr />
<h1 id="blockelements">Block Elements</h1>
<p>These are elements that are a single or multiple lines in length</p>
<h2 id="headings">Headings</h2>
<p>You can create Atx-style headings by prefixing with a # (hash mark)</p>
<h1 id="heading1markupheading1">Heading 1 markup <code># Heading 1</code></h1>
<h1 id=""> </h1>
<h2 id="heading2markupheading2">Heading 2 markup <code>## Heading 2</code></h2>
<h2 id="-1"> </h2>
<h3 id="heading3markupheading3">Heading 3 markup <code>### Heading 3</code></h3>
<h3 id="-2"> </h3>
<h4 id="heading4markupheading4">Heading 4 markup <code>#### Heading 4</code></h4>
<h4 id="-3"> </h4>
<h5 id="heading5markupheading5">Heading 5 markup <code>##### Heading 5</code></h5>
<h5 id="-4"> </h5>
<h6 id="heading6markupheading6">Heading 6 markup <code>###### Heading 6</code></h6>
<h6 id="-5"> </h6>
<p>You can also create Setext-style headings which have two levels.</p>
<h1 id="level1markupuseanequalsignequalsign">Level 1 markup use an equal sign = (equal sign) </h1>
<pre><code> Level 1 markup use an equal sign = (equal sign)
==============================
</code></pre>
<h2 id="level2markupusesdashes">Level 2 markup uses - (dashes) </h2>
<pre><code>Level 2 markup uses - (dashes)
-------------
</code></pre>
<h2 id="paragraphsandblockquotes">PARAGRAPHS and BLOCKQUOTES</h2>
<p>A paragraph is one or more consecutive lines of text separated by one or more
blank lines. A blank line contains nothing but spaces or tabs. Do not indent
normal paragraphs with spaces or tabs. New lines/carriage returns within paragraphs require two spaces at the end of the preceding line.</p>
<p>This is one paragraph.</p>
<p>This is a second.</p>
<pre><code>This is one paragraph.
This is a second.
</code></pre>
<p>Markdown uses email-style &gt; (greater than) characters for blockquoting. If you’re familiar with quoting passages of text in an email message, then you know how to create a blockquote in Markdown. It looks best if you hard wrap the text and put a &gt; before every line:</p>
<blockquote>
<p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.</p>
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.</p>
</blockquote>
<pre><code>&gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
&gt; consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
&gt;
&gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
&gt; id sem consectetuer libero luctus adipiscing.
</code></pre>
<p>Blockquotes can be nested (i.e. a blockquote-in-a-blockquote):</p>
<blockquote>
<p>This is the first level of quoting.</p>
<blockquote>
<p>This is nested blockquote.</p>
</blockquote>
<p>Back to the first level.</p>
</blockquote>
<pre><code>&gt; This is the first level of quoting.
&gt;
&gt; &gt; This is nested blockquote.
&gt;
&gt; Back to the first level.
</code></pre>
<p>Blockquotes can contain other Markdown elements, including headers, lists, and code blocks:</p>
<blockquote>
<h2 id="thisisaheader">This is a header.</h2>
<ol>
<li>This is the first list item.</li>
<li>This is the second list item.</li>
</ol>
<p>Here's some example code:</p>
<pre><code>return shell_exec("echo $input | $markdown_script");
</code></pre>
</blockquote>
<pre><code>&gt; ## This is a header.
&gt;
&gt; 1. This is the first list item.
&gt; 2. This is the second list item.
&gt;
&gt; Here's some example code:
&gt;
&gt; return shell_exec("echo $input | $markdown_script");
</code></pre>
<h2 id="lists">Lists</h2>
<p>Markdown supports ordered (numbered) and unordered (bulleted) lists. List markers typically start at the left margin, but may be indented by up to three spaces. List markers must be followed by one or more spaces or a tab.</p>
<p>Form bulleted lists with any of * (asterisk), + (plus), or - (dash). You can one or any or mix of these to form a list:</p>
<ul>
<li><p>Red </p></li>
<li><p>Green </p></li>
<li><p>Blue</p>
<pre><code>* Red
+ Green
- Blue
</code></pre></li>
</ul>
<p>Ordered lists require a numeric character followed by a . (period).</p>
<ol>
<li><p>Item one</p></li>
<li><p>Item two </p></li>
<li><p>Item three</p>
<pre><code>1. Item one
1. Item two
1. Item three
</code></pre></li>
</ol>
<p>Notice the actual value of the number doesn't matter in the list result. However, for readability better to use this markup:</p>
<pre><code> 1. Item one
2. Item two
3. Item three
</code></pre>
<p>Lists can be embedded in lists. List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:</p>
<ul>
<li><p>Red </p></li>
<li><p>Green </p>
<ul>
<li>dark green </li>
<li>lime </li></ul></li>
<li><p>Blue </p>
<ol>
<li><p>Item one</p>
<ol>
<li>subitem 1 </li>
<li>subitem 2</li></ol></li>
<li><p>Item two </p>
<p>This is is a first paragraph. </p>
<ul>
<li>Green </li>
<li>Blue</li></ul>
<p>This is a second paragraph.</p></li>
<li><p>Item three</p></li></ol></li>
</ul>
<p>The code for these embedded lists or paragraphs is:</p>
<pre><code> * Red
+ Green
* dark green
* lime
- Blue
1. Item one
1. subitem 1
1. subitem 2
1. Item two
This is is a first paragraph.
* Green
* Blue
This is a second paragraph.
1. Item three
</code></pre>
<p>You can also embed blockquotes in a list.</p>
<ul>
<li>Green</li>
</ul>
<blockquote>
<p>What is this? It is embedded blockquote. Mix 'em and match 'em.</p>
<ul>
<li>Blue</li>
<li>Red</li>
</ul>
</blockquote>
<pre><code> * Green
&gt; What is this? It is embedded blockquote. Mix 'em and match 'em.
* Blue
* Red
</code></pre>
<p>You can also embed code blocks in a list.</p>
<ul>
<li><p>Green</p>
<p>Try this code:</p>
<pre><code>This is an embedded code block.
</code></pre>
<p>Then this:</p>
<pre><code>More code!
</code></pre></li>
<li><p>Blue</p></li>
<li><p>Red</p>
<pre><code>* Green<pre><code>Try this code:
This is an embedded code block.
Then this:
More code!
</code></pre>* Blue
* Red
</code></pre></li>
</ul>
<h2 id="tables">Tables</h2>
<p>Markdown does not support <code>&lt;html&gt;</code> so you need to use the - (dash) and the | (pipe) symbols to construct a table. The first line contains column headers. Separate columns with the pipe symbol.</p>
<p>The second line must be a mandatory separator line between the headers and the content. Subsequent lines are table rows. Columns are always separated by the pipe (|) character. For example this table:</p>
<p>First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell</p>
<p>Comes from this code:</p>
<pre><code>First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
</code></pre>
<p>You can only put simple lines in a table.</p>
<p>You can specify alignment for each column by adding colons to separator lines. A colon at the left of the separator line, left-aligns the column. A colon on the right, right-aligns the column. Add colons to both sides to center the column is center-aligned.</p>
<p>Right | Left | Center
---------:| :----- |:-----:
Computer | $1600 | one
Phone | $12 | three
Pipe | $1 | eleven</p>
<pre><code>Right | Left | Center
---------:| :----- |:-----:
Computer | $1600 | one
Phone | $12 | three
Pipe | $1 | eleven
</code></pre>
<p>You can apply inline formatting (span-level changes such as fonts or links) to the content of each cell using regular Markdown syntax:</p>
<p>| Function name | Description |
| ------------- | ------------------------------ |
| <code>help()</code> | Display the <u>help</u> window. |
| <code>destroy()</code> | <strong>Destroy your computer!</strong> |</p>
<pre><code>| Function name | Description |
| ------------- | ------------------------------ |
| `help()` | Display the __help__ window. |
| `destroy()` | **Destroy your computer!** |
</code></pre>
<ul>
<li>- -</li>
</ul>
<h2 id="codeandsyntaxhighlighting">Code and Syntax highlighting</h2>
<p>Pre-formatted code blocks are used for writing about programming or markup source code. Rather than forming normal paragraphs, the code block linesare interpreted literally. Markdown wraps a code block in both <code>&lt;pre&gt;</code> and <code>&lt;code&gt;</code> tags.</p>
<p>To produce a code block in Markdown, indent every line of the block by at least 4 spaces or 1 tab. For :</p>
<p>This is a normal paragraph:</p>
<pre><code>This is a code block.
</code></pre>
<p>The code reveals the indentation.</p>
<pre><code> This is a normal paragraph:
This is a code block.
</code></pre>
<p>A code block continues until it reaches a line that is not indented (or the end of the page).</p>
<p>Within a code block, &amp; (ampersands) and < > (angle brackets) are automatically converted into HTML entities. This makes it very easy to include example HTML source code using Markdown — just paste it and indent it. Markdown will handle the hassle of encoding the ampersands and angle brackets. For example, this:</p>
<p>Here is an example of AppleScript:</p>
<pre><code>&lt;p&gt;Here is an example of AppleScript:&lt;/p&gt;
</code></pre>
<p>To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab. For example, given this input:</p>
<p>You can also highlight snippets of text (Markdown uses the excellent <a href="http://pygments.org/">Pygments</a> library) to allow you to use code highlighting Here's an example of some Python code:</p>
<pre><code>#!python
#
def wiki_rocks(text): formatter = lambda t: "funky"+t return formatter(text)
</code></pre>
<p>To do this, do not indent the block. Start the block with <code>```</code> three ticks. Then, provide the comment with the type of syntax you are using. There is a <a href="http://pygments.org/docs/lexers/">the vast library of Pygment lexers</a>. Markdown accepts the 'short name' or the 'mimetype' of anything in there.</p>
<p>You can also use a fence style for code.</p>
<pre><code>This is a code block, fenced-style
</code></pre>
<p>Which you create with this code:</p>
<pre><code>```
This is a code block, fenced-style
```
</code></pre>
<p>See <a href="http://michelf.ca/projects/php-markdown/extra/">Michel Fortin's blog</a> to try out more examples of this coding style. Not everything he demos is guaranteed to work though.</p>
<hr />
<h1 id="horizontalrules">Horizontal Rules</h1>
<p>You can produce a horizontal line with any of the following codes:</p>
<pre><code>* * *
***
*****
- - - -
-----------------------
</code></pre>
<p>The output looks like this:</p>
<hr />
<hr />
<hr />
<hr />
<hr />
<hr />