StarMirror/showdown
1
0
Fork 0
mirror of https://github.com/showdownjs/showdown.git synced 2024-03-22 13:30:55 +08:00
Code Issues Projects Releases Wiki Activity

feat(underline): add EXPERIMENTAL support for underline

Browse Source 
Syntax is:
```
__double underscores__
or
___triple unserscores___
```
Keep in mind that, with this option enabled, underscore no longer
parses as `<em>` or `<strong>`

Closes #450
This commit is contained in:
Estevao Soares dos Santos 2017-10-24 16:46:40 +01:00
parent 9cdc35e705
commit 084b819b14
13 changed files with 957 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -357,6 +357,9 @@ var defaultOptions = showdown.getDefaultOptions();
* **emoji**: (boolean) [default false] Enable emoji support. Ex: `this is a :smile: emoji`
For more info on available emojis, see https://github.com/showdownjs/showdown/wiki/Emojis **(since v.1.8.0)**
* **underline**: (boolean) [default false] ***EXPERIMENTAL FEATURE*** Enable support for underline.
Syntax is **double** or **triple** **underscores** ex: `__underlined word__`. With this option enabled, underscores are no longer parses into `<em>` and `<strong>`.
**NOTE**: Please note that until **version 1.6.0**, all of these options are ***DISABLED*** by default in the cli tool.
## Flavors

BIN
dist/showdown.js vendored
View File

Binary file not shown.

BIN
dist/showdown.js.map vendored
View File

Binary file not shown.

BIN
dist/showdown.min.js vendored
View File

Binary file not shown.

BIN
dist/showdown.min.js.map vendored
View File

Binary file not shown.

5
src/options.js
View File

@ -145,6 +145,11 @@ function getDefaultOpts (simple) {
defaultValue: false,
description: 'Enable emoji support. Ex: `this is a :smile: emoji`',
type: 'boolean'
},
underline: {
defaultValue: false,
description: 'Enable support for underline. Syntax is double or triple underscores: `__underline word__`. With this option enabled, underscores no longer parses into `<em>` and `<strong>`',
type: 'boolean'
}
};
if (simple === false) {

1
src/subParsers/spanGamut.js
View File

@ -21,6 +21,7 @@ showdown.subParser('spanGamut', function (text, options, globals) {
text = showdown.subParser('autoLinks')(text, options, globals);
text = showdown.subParser('simplifiedAutoLinks')(text, options, globals);
text = showdown.subParser('emoji')(text, options, globals);
text = showdown.subParser('underline')(text, options, globals);
text = showdown.subParser('italicsAndBold')(text, options, globals);
text = showdown.subParser('strikethrough')(text, options, globals);

26
src/subParsers/underline.js Normal file
View File

@ -0,0 +1,26 @@
showdown.subParser('underline', function (text, options, globals) {
'use strict';
if (!options.underline) {
return text;
}
text = globals.converter._dispatch('underline.before', text, options, globals);
if (options.literalMidWordUnderscores) {
text = text.replace(/\b_?__(\S[\s\S]*)___?\b/g, function (wm, txt) {
return '<u>' + txt + '</u>';
});
} else {
text = text.replace(/_?__(\S[\s\S]*?)___?/g, function (wm, m) {
return (/\S$/.test(m)) ? '<u>' + m + '</u>' : wm;
});
}
// escape remaining underscores to prevent them being parsed by italic and bold
text = text.replace(/(_)/g, showdown.helper.escapeCharactersCallback);
text = globals.converter._dispatch('underline.after', text, options, globals);
return text;
});

368
test/features/underline/fulltext.html Normal file
View File

@ -0,0 +1,368 @@
<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 />

520
test/features/underline/fulltext.md Normal file
View File

@ -0,0 +1,520 @@
Markdown test adapted from BitBucket
====================
[Markdown][fireball] 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.
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 [Markdown][fireball] site.
You can also use [Markdown mark up][BBmarkup] in comments, issues, and commit messages.
On this page:
* [Span Elements](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-span-elements)
* [Emphasis](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-emphasis)
* [Strikethrough](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-strikethrough)
* [Preformatted code](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-preformatted-code)
* [Links](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-links)
* [Images](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-images)
* [Block Elements](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-block-elements)
* [Headings](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-headings)
* [Paragraphs and blockquotes](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-paragraphs-and-blockquotes)
* [Lists](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-lists)
* [Tables](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-tables)
* [Code and Syntax highlighting](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-code-and-syntax-highlighting)
* [Horizontal rules](https://Markdown.org/tutorials/markdowndemo/overview#markdown-header-horizontal-rules)
- - -
# Span Elements
These elements occur within a line of text. So, for example font changes or links.
## Emphasis
Markdown treats * (asterisk) as emphasis markers.
*single asterisks*
**double asterisks**
All are created from this:
*single asterisks*
**double asterisks**
## Underline [experimental]
__double underscores__
___triple underscores___
All are created from this:
__double underscores__
___triple underscores___
You must use the same character must be used to open and close an emphasis span. Emphasis can be used in the mi*dd*le of a word.
Emphasis can be used in the mi*dd*le of a word.
But if you surround an * or _ with spaces, it will be treated as a literal asterisk or underscore.
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:
\*this text is surrounded by literal asterisks\*
## Strikethrough
Markdown's Markdown parser supports strikethrough by wrapping text in `~~`:
~~text that has been struckthrough~~
is created from:
~~text that has been struckthrough~~
## Preformatted code
To indicate a span of code, wrap it with `` ` `` (backtick). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:
Use the `printf()` function.
is produced from:
Use the `printf()` function.
To include a literal backtick character within a code span, you can use multiple backticks as the opening and closing delimiters:
``There is a literal backtick (`) here.``
## Links
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:
[ Text for the link ](URL)
So an inline link to [Yahoo](http://www.yahoo.com) looks like this:
So an inline link to [Yahoo](http://www.yahoo.com) looks like this:
Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:
This is [an example][id] reference-style link.
Which gives you a link like this:
This is [an example][id] reference-style link.
Elsewhere in the document, usually at the bottom of the file, you define your link label on a line by itself:
[id]: http://example.com/ "Optional Title Here"
Links can get pretty fancy, so if you want the long form version, visit the
official [Markdown][fireball] docs.
## Images
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:
![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)
![Alt text](http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png "Optional title")
- - -
# Block Elements
These are elements that are a single or multiple lines in length
## Headings
You can create Atx-style headings by prefixing with a # (hash mark)
# Heading 1 markup `# Heading 1`
#
## Heading 2 markup `## Heading 2`
##
### Heading 3 markup `### Heading 3`
###
#### Heading 4 markup `#### Heading 4`
####
##### Heading 5 markup `##### Heading 5`
#####
###### Heading 6 markup `###### Heading 6`
######
You can also create Setext-style headings which have two levels.
Level 1 markup use an equal sign = (equal sign)
==============================
Level 1 markup use an equal sign = (equal sign)
==============================
Level 2 markup uses - (dashes)
-------------
Level 2 markup uses - (dashes)
-------------
## PARAGRAPHS and BLOCKQUOTES
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.
This is one paragraph.
This is a second.
This is one paragraph.
This is a second.
Markdown uses email-style > (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 > before every line:
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.
Blockquotes can be nested (i.e. a blockquote-in-a-blockquote):
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.
Blockquotes can contain other Markdown elements, including headers, lists, and code blocks:
> ## This is a header.
>
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
> return shell_exec("echo $input | $markdown_script");
> ## This is a header.
>
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
> return shell_exec("echo $input | $markdown_script");
## Lists
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.
Form bulleted lists with any of * (asterisk), + (plus), or - (dash). You can one or any or mix of these to form a list:
* Red
+ Green
- Blue
* Red
+ Green
- Blue
Ordered lists require a numeric character followed by a . (period).
1. Item one
1. Item two
1. Item three
1. Item one
1. Item two
1. Item three
Notice the actual value of the number doesn't matter in the list result. However, for readability better to use this markup:
1. Item one
2. Item two
3. Item three
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:
* 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
The code for these embedded lists or paragraphs is:
* 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
You can also embed blockquotes in a list.
* Green
> What is this? It is embedded blockquote. Mix 'em and match 'em.
* Blue
* Red
* Green
> What is this? It is embedded blockquote. Mix 'em and match 'em.
* Blue
* Red
You can also embed code blocks in a list.
* Green
Try this code:
This is an embedded code block.
Then this:
More code!
* Blue
* Red
* Green
Try this code:
This is an embedded code block.
Then this:
More code!
* Blue
* Red
## Tables
Markdown does not support `<html>` 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.
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:
First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
Comes from this code:
First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
You can only put simple lines in a table.
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.
Right | Left | Center
---------:| :----- |:-----:
Computer | $1600 | one
Phone | $12 | three
Pipe | $1 | eleven
Right | Left | Center
---------:| :----- |:-----:
Computer | $1600 | one
Phone | $12 | three
Pipe | $1 | eleven
You can apply inline formatting (span-level changes such as fonts or links) to the content of each cell using regular Markdown syntax:
| Function name | Description |
| ------------- | ------------------------------ |
| `help()` | Display the __help__ window. |
| `destroy()` | **Destroy your computer!** |
| Function name | Description |
| ------------- | ------------------------------ |
| `help()` | Display the __help__ window. |
| `destroy()` | **Destroy your computer!** |
- - -
## Code and Syntax highlighting
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 `<pre>` and `<code>` tags.
To produce a code block in Markdown, indent every line of the block by at least 4 spaces or 1 tab. For :
This is a normal paragraph:
This is a code block.
The code reveals the indentation.
This is a normal paragraph:
This is a code block.
A code block continues until it reaches a line that is not indented (or the end of the page).
Within a code block, & (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>Here is an example of AppleScript:</p>
<p>Here is an example of AppleScript:</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:
You can also highlight snippets of text (Markdown uses the excellent [Pygments][] library) to allow you to use code highlighting Here's an example of some Python code:
```
#!python
#
def wiki_rocks(text): formatter = lambda t: "funky"+t return formatter(text)
```
To do this, do not indent the block. Start the block with ` ``` ` three ticks. Then, provide the comment with the type of syntax you are using. There is a [the vast library of Pygment lexers][lexers]. Markdown accepts the 'short name' or the 'mimetype' of anything in there.
You can also use a fence style for code.
```
This is a code block, fenced-style
```
Which you create with this code:
```
This is a code block, fenced-style
```
See [Michel Fortin's blog][extra] to try out more examples of this coding style. Not everything he demos is guaranteed to work though.
- - -
# Horizontal Rules
You can produce a horizontal line with any of the following codes:
* * *
***
*****
- - - -
-----------------------
The output looks like this:
* * *
***
*****
- - -
-----------------------
- - -
[lexers]: http://pygments.org/docs/lexers/
[fireball]: http://daringfireball.net/projects/markdown/
[Pygments]: http://pygments.org/
[Extra]: http://michelf.ca/projects/php-markdown/extra/
[id]: http://example.com/ "Optional Title Here"
[BBmarkup]: https://confluence.atlassian.com/x/xTAvEw

4
test/features/underline/simple.html Normal file
View File

@ -0,0 +1,4 @@
<p>this is <u>underlined</u> word</p>
<p><u>an underlined sentence</u></p>
<p><u>three underscores are fine</u></p>
<p>_single_ underscores are left alone</p>

7
test/features/underline/simple.md Normal file
View File

@ -0,0 +1,7 @@
this is __underlined__ word
__an underlined sentence__
___three underscores are fine___
_single_ underscores are left alone

31
test/node/testsuite.features.js
View File

@ -11,7 +11,8 @@ var bootstrap = require('../bootstrap.js'),
disableForced4SpacesIndentedSublistsSuite = bootstrap.getTestSuite('test/features/disableForced4SpacesIndentedSublists/'),
rawHeaderIdSuite = bootstrap.getTestSuite('test/features/rawHeaderId/'),
rawPrefixHeaderIdSuite = bootstrap.getTestSuite('test/features/rawPrefixHeaderId/'),
emojisSuite = bootstrap.getTestSuite('test/features/emojis/');
emojisSuite = bootstrap.getTestSuite('test/features/emojis/'),
underlineSuite = bootstrap.getTestSuite('test/features/underline/');
describe('makeHtml() features testsuite', function () {
'use strict';
@ -98,7 +99,7 @@ describe('makeHtml() features testsuite', function () {
}
});
// test Table Syntax Support
/** test Table Syntax Support **/
describe('table support', function () {
var converter,
suite = tableSuite;
@ -114,7 +115,7 @@ describe('makeHtml() features testsuite', function () {
}
});
// test simplifiedAutoLink Support
/** test simplifiedAutoLink Support **/
describe('simplifiedAutoLink support in', function () {
var converter,
suite = simplifiedAutoLinkSuite;
@ -132,7 +133,7 @@ describe('makeHtml() features testsuite', function () {
}
});
// test openLinksInNewWindow support
/** test openLinksInNewWindow support **/
describe('openLinksInNewWindow support in', function () {
var converter,
suite = openLinksInNewWindowSuite;
@ -146,7 +147,7 @@ describe('makeHtml() features testsuite', function () {
}
});
// test disableForced4SpacesIndentedSublists support
/** test disableForced4SpacesIndentedSublists support **/
describe('disableForced4SpacesIndentedSublists support in', function () {
var converter,
suite = disableForced4SpacesIndentedSublistsSuite;
@ -156,7 +157,7 @@ describe('makeHtml() features testsuite', function () {
}
});
// test rawHeaderId support
/** test rawHeaderId support **/
describe('rawHeaderId support', function () {
var converter,
suite = rawHeaderIdSuite;
@ -170,7 +171,7 @@ describe('makeHtml() features testsuite', function () {
}
});
// test rawPrefixHeaderId support
/** test rawPrefixHeaderId support **/
describe('rawPrefixHeaderId support', function () {
var converter,
suite = rawPrefixHeaderIdSuite;
@ -180,7 +181,7 @@ describe('makeHtml() features testsuite', function () {
}
});
// test emojis support
/** test emojis support **/
describe('emojis support', function () {
var converter,
suite = emojisSuite;
@ -194,4 +195,18 @@ describe('makeHtml() features testsuite', function () {
it(suite[i].name.replace(/-/g, ' '), assertion(suite[i], converter));
}
});
/** test emojis support **/
describe('emojis support', function () {
var converter,
suite = underlineSuite;
for (var i = 0; i < suite.length; ++i) {
if (suite[i].name === 'simplifiedautolinks') {
converter = new showdown.Converter({underline: true, simplifiedAutoLink: true});
} else {
converter = new showdown.Converter({underline: true});
}
it(suite[i].name.replace(/-/g, ' '), assertion(suite[i], converter));
}
});
});