Skip to content

Commit

Permalink
test markdown to html conversion
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmos
bmos committed Feb 14, 2025
1 parent 15b9e88 commit 326edef
Show file tree
Hide file tree
Showing 3 changed files with 466 additions and 0 deletions.
209 changes: 209 additions & 0 deletions tests/main/markdown_example/markdown.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
<hr/>
<p><strong>Advertisement :)</strong></p>
<ul>
<li><strong><a href="https://nodeca.github.io/pica/demo/">pica</a></strong> - high quality and fast image<br/>
resize in browser.</li>
<li><strong><a href="https://github.com/nodeca/babelfish/">babelfish</a></strong> - developer friendly<br/>
i18n with plurals support and easy syntax.</li>
</ul>
<p>You will like those projects!</p>
<hr/>
<h1>h1 Heading 8-)</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
<h2>Horizontal Rules</h2>
<hr/>
<hr/>
<hr/>
<h2>Typographic replacements</h2>
<p>Enable typographer option to see result.</p>
<p>(c) (C) (r) (R) (tm) (TM) (p) (P) +-</p>
<p>test.. test… test..... test?..... test!....</p>
<p>!!!!!! ???? ,, – —</p>
<p>“Smartypants, double quotes” and ‘single quotes’</p>
<h2>Emphasis</h2>
<p><strong>This is bold text</strong></p>
<p><strong>This is bold text</strong></p>
<p><em>This is italic text</em></p>
<p><em>This is italic text</em></p>
<p>~~Strikethrough~~</p>
<h2>Blockquotes</h2>
<blockquote>
<p>Blockquotes can also be nested…</p>
<blockquote>
<p>…by using additional greater-than signs right next to each other…</p>
<blockquote>
<p>…or with spaces between arrows.</p>
</blockquote>
</blockquote>
</blockquote>
<h2>Lists</h2>
<p>Unordered</p>
<ul>
<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>
<li>Sub-lists are made by indenting 2 spaces:</li>
<li>Marker character change forces new list start:<ul>
<li>Ac tristique libero volutpat at</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
</ul>
</li>
<li>Very easy!</li>
</ul>
<p>Ordered</p>
<ol>
<li>
<p>Lorem ipsum dolor sit amet</p>
</li>
<li>
<p>Consectetur adipiscing elit</p>
</li>
<li>
<p>Integer molestie lorem at massa</p>
</li>
<li>
<p>You can use sequential numbers…</p>
</li>
<li>
<p>…or keep all the numbers as <code>1.</code></p>
</li>
</ol>
<p>Start numbering with offset:</p>
<ol>
<li>foo</li>
<li>bar</li>
</ol>
<h2>Code</h2>
<p>Inline <code>code</code></p>
<p>Indented code</p>
<pre><code>// Some comments
line 1 of code
line 2 of code
line 3 of code
</code></pre>
<p>Block code “fences”</p>
<pre><code>Sample text here...
</code></pre>
<p>Syntax highlighting</p>
<pre><code class="language-js">var foo = function (bar) {
return bar++;
};

console.log(foo(5));
</code></pre>
<h2>Tables</h2>
<table>
<thead>
<tr style="background-color: #000000; border:1px solid #FFFFFF;">
<th>Option</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #1C1C1E; border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF; padding:0.5em;">data</td>
<td style="border:1px solid #FFFFFF; padding:0.5em;">path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr style="background-color: #000000; border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF; padding:0.5em;">engine</td>
<td style="border:1px solid #FFFFFF; padding:0.5em;">engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr style="background-color: #1C1C1E; border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF; padding:0.5em;">ext</td>
<td style="border:1px solid #FFFFFF; padding:0.5em;">extension to be used for dest files.</td>
</tr>
</tbody>
</table>
<p>Right aligned columns</p>
<table>
<thead>
<tr style="background-color: #000000; border:1px solid #FFFFFF;">
<th style="text-align: right;">Option</th>
<th style="text-align: right;">Description</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #1C1C1E; border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF; padding:0.5em;">data</td>
<td style="border:1px solid #FFFFFF; padding:0.5em;">path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr style="background-color: #000000; border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF; padding:0.5em;">engine</td>
<td style="border:1px solid #FFFFFF; padding:0.5em;">engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr style="background-color: #1C1C1E; border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF; padding:0.5em;">ext</td>
<td style="border:1px solid #FFFFFF; padding:0.5em;">extension to be used for dest files.</td>
</tr>
</tbody>
</table>
<h2>Links</h2>
<p><a href="http://dev.nodeca.com">link text</a></p>
<p><a href="http://nodeca.github.io/pica/demo/" title="title text!">link with title</a></p>
<p>Autoconverted link https://github.com/nodeca/pica (enable linkify to see)</p>
<h2>Images</h2>
<p><a href="https://octodex.github.com/images/minion.png">Minion</a><br/>
<a href="https://octodex.github.com/images/stormtroopocat.jpg">Stormtroopocat</a></p>
<p>Like links, Images also have a footnote style syntax</p>
<p><a href="https://octodex.github.com/images/dojocat.jpg">Alt text</a></p>
<p>With a reference later in the document defining the URL location:</p>
<h2>Plugins</h2>
<p>The killer feature of <code>markdown-it</code> is very effective support of<br/>
<a href="https://www.npmjs.org/browse/keyword/markdown-it-plugin">syntax plugins</a>.</p>
<h3><a href="https://github.com/markdown-it/markdown-it-emoji">Emojies</a></h3>
<blockquote>
<p>Classic markup: :wink: :cry: :laughing: :yum:</p>
<p>Shortcuts (emoticons): :-) :-( 8-) ;)</p>
</blockquote>
<p>see <a href="https://github.com/markdown-it/markdown-it-emoji#change-output">how to change output</a> with twemoji.</p>
<h3><a href="https://github.com/markdown-it/markdown-it-sub">Subscript</a> / <a href="https://github.com/markdown-it/markdown-it-sup">Superscript</a></h3>
<ul>
<li>19^th^</li>
<li>H~2~O</li>
</ul>
<h3><a href="https://github.com/markdown-it/markdown-it-ins">\<ins></ins></a></h3>
<p>++Inserted text++</p>
<h3><a href="https://github.com/markdown-it/markdown-it-mark">\<mark></mark></a></h3>
<p>==Marked text==</p>
<h3><a href="https://github.com/markdown-it/markdown-it-footnote">Footnotes</a></h3>
<p>Footnote 1 link[^first].</p>
<p>Footnote 2 link[^second].</p>
<p>Inline footnote^[Text of inline footnote] definition.</p>
<p>Duplicated footnote reference[^second].</p>
<p>[^first]: Footnote <strong>can have markup</strong></p>
<pre><code>and multiple paragraphs.
</code></pre>
<p>[^second]: Footnote text.</p>
<h3><a href="https://github.com/markdown-it/markdown-it-deflist">Definition lists</a></h3>
<dl>
<dt>Term 1</dt>
<dd>
<p>Definition 1<br/>
with lazy continuation.</p>
</dd>
<dt>Term 2 with <em>inline markup</em></dt>
<dd>
<p>Definition 2</p>
</dd>
</dl>
<pre><code> { some code, part of Definition 2 }

Third paragraph of definition 2.
</code></pre>
<p><em>Compact style:</em></p>
<p>Term 1<br/>
~ Definition 1</p>
<p>Term 2<br/>
~ Definition 2a<br/>
~ Definition 2b</p>
<h3><a href="https://github.com/markdown-it/markdown-it-abbr">Abbreviations</a></h3>
<p>This is HTML abbreviation example.</p>
<p>It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.</p>
<p>*[HTML]: Hyper Text Markup Language</p>
<h3><a href="https://github.com/markdown-it/markdown-it-container">Custom containers</a></h3>
<p>::: warning<br/>
<em>here be dragons</em><br/>
:::</p>
Loading

0 comments on commit 326edef

Please sign in to comment.