<!DOCTYPE html>
<html>
<head>
<title>MDxt Reference</title>
</head>
<body>
<style>body .markdown {
background-color: #404040;
color: #ffffff;
font-size: 21px;
line-height: 1.5;
letter-spacing: 1px;
}
body .markdown ::selection {
background-color: #bfbfbf;
color: #000000;
}
body .markdown hr.footnote_hr {
margin-top: 60px;
}
body .markdown img {
max-width: 450px;
max-height: 450px;
}
/* Blockquote */
.markdown blockquote {
background-color: #00000080;
width: 75%;
border-left: 5px solid #808080;
padding: 12px;
}
/* Colors */
.markdown .color_black {
color: #000000;
}
.markdown .color_black::selection {
color: #ffffff;
}
.markdown .highlight_black {
background-color: #000000;
}
.markdown .highlight_black::selection {
background-color: #ffffff;
}
.markdown .color_dark {
color: #404040;
}
.markdown .color_dark::selection {
color: #bfbfbf;
}
.markdown .highlight_dark {
background-color: #404040;
}
.markdown .highlight_dark::selection {
background-color: #bfbfbf;
}
.markdown .color_gray {
color: #808080;
}
.markdown .color_gray::selection {
color: #7f7f7f;
}
.markdown .highlight_gray {
background-color: #808080;
}
.markdown .highlight_gray::selection {
background-color: #7f7f7f;
}
.markdown .color_lightgray {
color: #c0c0c0;
}
.markdown .color_lightgray::selection {
color: #3f3f3f;
}
.markdown .highlight_lightgray {
background-color: #c0c0c0;
}
.markdown .highlight_lightgray::selection {
background-color: #3f3f3f;
}
.markdown .color_white {
color: #ffffff;
}
.markdown .color_white::selection {
color: #000000;
}
.markdown .highlight_white {
background-color: #ffffff;
}
.markdown .highlight_white::selection {
background-color: #000000;
}
.markdown .color_red {
color: #c04040;
}
.markdown .color_red::selection {
color: #3fbfbf;
}
.markdown .highlight_red {
background-color: #c04040;
}
.markdown .highlight_red::selection {
background-color: #3fbfbf;
}
.markdown .color_green {
color: #40c040;
}
.markdown .color_green::selection {
color: #bf3fbf;
}
.markdown .highlight_green {
background-color: #40c040;
}
.markdown .highlight_green::selection {
background-color: #bf3fbf;
}
.markdown .color_blue {
color: #4040c0;
}
.markdown .color_blue::selection {
color: #bfbf3f;
}
.markdown .highlight_blue {
background-color: #4040c0;
}
.markdown .highlight_blue::selection {
background-color: #bfbf3f;
}
.markdown .color_aqua {
color: #40c0ff;
}
.markdown .color_aqua::selection {
color: #bf3f00;
}
.markdown .highlight_aqua {
background-color: #40c0ff;
}
.markdown .highlight_aqua::selection {
background-color: #bf3f00;
}
.markdown .color_emerald {
color: #40ffc0;
}
.markdown .color_emerald::selection {
color: #bf003f;
}
.markdown .highlight_emerald {
background-color: #40ffc0;
}
.markdown .highlight_emerald::selection {
background-color: #bf003f;
}
.markdown .color_violet {
color: #c040ff;
}
.markdown .color_violet::selection {
color: #3fbf00;
}
.markdown .highlight_violet {
background-color: #c040ff;
}
.markdown .highlight_violet::selection {
background-color: #3fbf00;
}
.markdown .color_pink {
color: #ff40c0;
}
.markdown .color_pink::selection {
color: #00bf3f;
}
.markdown .highlight_pink {
background-color: #ff40c0;
}
.markdown .highlight_pink::selection {
background-color: #00bf3f;
}
.markdown .color_grassgreen {
color: #c0ff40;
}
.markdown .color_grassgreen::selection {
color: #3f00bf;
}
.markdown .highlight_grassgreen {
background-color: #c0ff40;
}
.markdown .highlight_grassgreen::selection {
background-color: #3f00bf;
}
.markdown .color_gold {
color: #ffc040;
}
.markdown .color_gold::selection {
color: #003fbf;
}
.markdown .highlight_gold {
background-color: #ffc040;
}
.markdown .highlight_gold::selection {
background-color: #003fbf;
}
/* Box */
.markdown div.box {
width: 80%;
padding: 12px;
margin: 12px;
border: 3px solid #808080;
}
.markdown div.box.no-border {
border: none;
}
/* Sizes */
.markdown .size_tiny {
font-size: 13px;
}
.markdown .size_tiny img {
max-width: 250px;
max-height: 250px;
}
.markdown .size_small {
font-size: 16px;
}
.markdown .size_small img {
max-width: 350px;
max-height: 350px;
}
.markdown .size_medium {
font-size: 21px;
}
.markdown .size_medium img {
max-width: 450px;
max-height: 450px;
}
.markdown .size_big {
font-size: 25px;
}
.markdown .size_big img {
max-width: 600px;
max-height: 600px;
}
.markdown .size_giant {
font-size: 33px;
}
.markdown .size_giant img {
max-width: 720px;
max-height: 720px;
}
/* Alignments */
.markdown .align_center {
text-align: center;
}
.markdown .align_center table, .markdown .align_center img, .markdown .align_center .box, .markdown .align_center blockquote, .markdown .align_center svg {
margin-left: auto;
margin-right: auto;
}
.markdown .align_right {
text-align: right;
}
.markdown .align_right table, .markdown .align_right img, .markdown .align_right .box, .markdown .align_right blockquote, .markdown .align_right svg {
margin-left: auto;
margin-right: 0;
}
.markdown .align_left {
text-align: left;
}
.markdown .align_left table, .markdown .align_left img, .markdown .align_left .box, .markdown .align_left blockquote, .markdown .align_left svg {
margin-left: 0;
margin-right: auto;
}
/* Headers */
.markdown h1 {
font-size: 66px;
margin-top: 60px;
margin-bottom: 30px;
transition: color 0.3s;
}
.markdown h1:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h2 {
font-size: 54px;
margin-top: 54px;
margin-bottom: 27px;
transition: color 0.3s;
}
.markdown h2:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h3 {
font-size: 45px;
margin-top: 45px;
margin-bottom: 22.5px;
transition: color 0.3s;
}
.markdown h3:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h4 {
font-size: 33px;
margin-top: 39px;
margin-bottom: 19.5px;
transition: color 0.3s;
}
.markdown h4:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h5 {
font-size: 27px;
margin-top: 30px;
margin-bottom: 15px;
transition: color 0.3s;
}
.markdown h5:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h1, .markdown h2 {
border-bottom: 3px solid #808080;
}
/* Links */
.markdown a:link {
border-bottom: 3px solid #40c0ff80;
color: #40c0ff;
text-decoration: none;
transition: border 0.3s;
}
.markdown a:visited {
color: #40c0ff;
text-decoration: none;
}
.markdown a:hover {
text-decoration: none;
border-bottom: 3px solid #40c0ff;
}
.markdown a::selection {
color: #bf3f00;
}
/* Fenced Code Block */
.markdown pre {
padding: 6px;
background-color: #000000;
width: 90%;
overflow: auto;
}
.markdown pre table {
width: 90%;
}
.markdown pre td {
line-height: 1.2;
padding-top: 0px;
padding-bottom: 0px;
background-color: #000000;
height: 25.2px;
/* So that it renders empty lines */
white-space: pre;
}
.markdown pre td.index {
border-right: 3px solid #40ffc0;
text-align: right;
width: 24px;
}
.markdown pre tr:hover td {
background-color: #404040;
}
.markdown pre tr.copy-button-row:hover td {
background-color: #000000;
}
.markdown pre tr.highlight td {
background-color: #ffffff;
color: #000000;
}
.markdown pre tr.highlight td .color_black {
color: #ffffff;
}
.markdown pre tr.highlight td .color_dark {
color: #bfbfbf;
}
.markdown pre tr.highlight td .color_gray {
color: #7f7f7f;
}
.markdown pre tr.highlight td .color_lightgray {
color: #3f3f3f;
}
.markdown pre tr.highlight td .color_white {
color: #000000;
}
.markdown pre tr.highlight td .color_red {
color: #3fbfbf;
}
.markdown pre tr.highlight td .color_green {
color: #bf3fbf;
}
.markdown pre tr.highlight td .color_blue {
color: #bfbf3f;
}
.markdown pre tr.highlight td .color_aqua {
color: #bf3f00;
}
.markdown pre tr.highlight td .color_emerald {
color: #bf003f;
}
.markdown pre tr.highlight td .color_violet {
color: #3fbf00;
}
.markdown pre tr.highlight td .color_pink {
color: #00bf3f;
}
.markdown pre tr.highlight td .color_grassgreen {
color: #3f00bf;
}
.markdown pre tr.highlight td .color_gold {
color: #003fbf;
}
.markdown button.copy-fenced-code {
background-color: #0000;
border: none;
color: #ffffff;
font-size: 21px;
padding: 6px;
border-radius: 6px;
transition: background-color 0.5s ease-out;
}
.markdown button.copy-fenced-code:hover {
background-color: #ffffff80;
transition: background-color 0.5s ease-out;
}
/* Code Spans */
.markdown code.short {
color: #ffc040;
background-color: #000000;
border-radius: 3px;
padding: 3px 6px 3px;
}
/* Table */
.markdown table {
border-collapse: collapse;
margin: 12px;
}
.markdown th {
background-color: #808080;
transition: padding 0.5s ease-out;
}
.markdown td, .markdown th {
padding: 18px;
}
.markdown tr:nth-last-child(odd) {
background-color: #000000;
}
.markdown tr:nth-last-child(even) {
background-color: #404040;
}
.markdown thead.collapsible {
cursor: pointer;
}
.markdown thead.collapsed th {
padding: 6px;
transition: padding 0.5s ease-out;
}
.markdown .invisible th, .markdown .invisible td {
display: none;
}
/*
----- Checkbox for task lists -----
*/
div.unchecked_box, div.checked_box {
position: relative;
top: 5.25px;
display: inline-block;
border-radius: 4px;
width: 21px;
height: 21px;
}
div.unchecked_box {
background-color: #808080;
margin-right: 12px;
}
div.checked_box {
background-color: #000000;
margin-right: 12px;
}
span.checkmark {
display: block;
position: relative;
left: 5.25px;
top: 2.625px;
width: 7px;
height: 10.5px;
border-bottom: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: rotate(45deg);
}
span.triangle {
display: block;
position: relative;
width: 0;
height: 0;
left: 3.5px;
top: 7px;
border-left: 7px solid #0000;
border-right: 7px solid #0000;
border-bottom: 7px solid #ffffff;
}
</style>
<article class="markdown"><h1 id="mdxt-reference">MDxt Reference</h1><p>MDxt is an extended version of Markdown.</p><p><anchor id="tocsample"></anchor></p><table><thead id="table-collapse-toggle-0" class="collapsible" onclick ="collapse_table('0')"><tr><th> Table of Contents </th></tr></thead><tbody id="collapsible-table-0"><tr><td> <ol type="1"><li><a href="#mdxt-reference">MDxt Reference</a><ol type="1"><li><a href="#inline-elements">Inline Elements</a><ol type="1"><li><a href="#code-spans"><code class="short">Code spans</code></a></li><li><a href="#italic"><em>Italic</em></a></li><li><a href="#bold"><strong>Bold</strong></a></li><li><a href="#_underline_"><u>Underline</u></a></li><li><a href="#deletion"><del>Deletion</del></a></li><li><a href="#subscript"><sub>Subscript</sub></a></li><li><a href="#superscript"><sup>Superscript</sup></a></li><li><a href="#links">Links</a></li><li><a href="#images">Images</a></li><li><a href="#footnotes">Footnotes</a></li></ol></li><li><a href="#containers">Containers</a><ol type="1"><li><a href="#headers">Headers</a></li><li><a href="#tables">Tables</a><ol type="1"><li><a href="#column-alignments">Column Alignments</a></li><li><a href="#multiline-table-head">Multiline Table Head</a></li><li><a href="#colspan">Colspan</a></li><li><a href="#collapsible-tables">Collapsible Tables</a></li></ol></li><li><a href="#lists">Lists</a><ol type="1"><li><a href="#task-list">Task list</a></li></ol></li><li><a href="#fenced-code-blocks">Fenced Code Blocks</a></li><li><a href="#blockquotes">Blockquotes</a></li><li><a href="#unlike-gfm">Unlike GFM...</a></li></ol></li><li><a href="#macros">Macros</a><ol type="1"><li><a href="#colors">Colors</a></li><li><a href="#sizes">Sizes</a></li><li><a href="#alignments">Alignments</a></li><li><a href="#highlights">Highlights</a></li><li><a href="#box">Box</a></li><li><a href="#table-of-contents">Table of Contents</a></li><li><a href="#special-characters">Special Characters</a></li><li><a href="#icons">Icons</a></li><li><a href="#math">Math</a></li><li><a href="#multiline-macro">Multiline Macro</a></li></ol></li><li><a href="#plugins">Plugins</a></li><li><a href="#characters">Characters</a><ol type="1"><li><a href="#escapes">Escapes</a></li><li><a href="#tabs">Tabs</a></li></ol></li></ol></li></ol> </td></tr></tbody></table><h2 id="inline-elements">Inline Elements</h2><h3 id="code-spans"><code class="short">Code spans</code></h3><p><code class="short">`abc`</code> is rendered to <code class="short"><code class="short">abc</code></code>. If the first and the last character of the code span is a whitespace, both are ignored. If a code span opens with n <code class="short">`</code>s, it has to be closed with the same number n of <code class="short">`</code>s.</p><h3 id="italic"><em>Italic</em></h3><p><code class="short">*abc*</code> is rendered to <code class="short"><em>abc</em></code>. The inner text may not start/end with whitespace(s).</p><h3 id="bold"><strong>Bold</strong></h3><p><code class="short">**abc**</code> is rendered to <code class="short"><strong>abc</strong></code>. The inner text may not start/end with whitespace(s).</p><h3 id="_underline_"><u>Underline</u></h3><p><code class="short">~_abc_~</code> is rendered to <code class="short"><u>abc</u></code>. The inner text may not start/end with whitespace(s).</p><h3 id="deletion"><del>Deletion</del></h3><p><code class="short">~~abc~~</code> is rendered to <code class="short"><del>abc</del></code>. The inner text may not start/end with whitespace(s).</p><h3 id="subscript"><sub>Subscript</sub></h3><p><code class="short">~abc~</code> is rendered to <code class="short"><sub>abc</sub></code>. The inner text may not start/end with whitespace(s).</p><h3 id="superscript"><sup>Superscript</sup></h3><p><code class="short">^abc^</code> is rendered to <code class="short"><sup>abc</sup></code>. The inner text may not start/end with whitespace(s).</p><h3 id="links">Links</h3><h3 id="images">Images</h3><p>A valid link after a bang(!) character is rendered to an <code class="short">img</code> tag.</p><p><code class="short"></code> is rendered to <code class="short"><img src="def" alt="abc"></code>.</p><h3 id="footnotes">Footnotes</h3><pre><code><table><tbody><tr><td>This is a footnote.[^A]</td></tr><tr><td></td></tr><tr><td>This is another footnote.[^B]</td></tr><tr><td></td></tr><tr><td>[^A]: Hi, there!</td></tr><tr><td>[^B]: Hello!</td></tr></tbody></table></code></pre><p>This is a footnote.<sup id="footnote_ref0"><a href="#footnote_cite0">[0]</a></sup></p><p>This is another footnote.<sup id="footnote_ref1"><a href="#footnote_cite1">[1]</a></sup></p><h2 id="containers">Containers</h2><h3 id="headers">Headers</h3><p><code class="short">### Headers</code> is rendered to <code class="short"><h3>Headers</h3></code>.</p><h3 id="tables">Tables</h3><h4 id="column-alignments">Column Alignments</h4><h4 id="multiline-table-head">Multiline Table Head</h4><h4 id="colspan">Colspan</h4><h4 id="collapsible-tables">Collapsible Tables</h4><pre><code><table><tbody><tr><td>| Click Me! (Default shown) |</td></tr><tr><td>|----------------------------------------|</td></tr><tr><td>|!![[collapsible, default=shown]] |</td></tr><tr><td>| Hi, there! |</td></tr><tr><td></td></tr><tr><td>| Click Me! (Default hidden) |</td></tr><tr><td>|---------------------------------------|</td></tr><tr><td>|!![[collapsible, default=hidden]] |</td></tr><tr><td>| Hi, there! |</td></tr></tbody></table></code></pre><table><thead id="table-collapse-toggle-1" class="collapsible" onclick ="collapse_table('1')"><tr><th> Click Me! (Default shown) </th></tr></thead><tbody id="collapsible-table-1"><tr><td> Hi, there! </td></tr></tbody></table><table><thead id="table-collapse-toggle-2" class="collapsible collapsed" onclick ="collapse_table('2')"><tr><th> Click Me! (Default hidden) </th></tr></thead><tbody id="collapsible-table-2" class="invisible"><tr><td> Hi, there! </td></tr></tbody></table><h3 id="lists">Lists</h3><h4 id="task-list">Task list</h4><pre><code><table><tbody><tr><td>- [ ] Unchecked</td></tr><tr><td>- [X] Checked</td></tr><tr><td>- [^] Not yet</td></tr></tbody></table></code></pre><ul><li><div class="unchecked_box"></div>Unchecked</li><li><div class="checked_box"><span class="checkmark"></span></div>Checked</li><li><div class="checked_box"><span class="triangle"></span></div>Not yet</li></ul><h3 id="fenced-code-blocks">Fenced Code Blocks</h3><p>Fenced code blocks are rendered to <code class="short"><table></code> tags in html. Be aware if you're writing custom css files for mdxt.</p><pre><code><table><tbody><tr><td>```rust, line_num, highlight(6, 17, 22)</td></tr><tr><td>/*</td></tr><tr><td> multiline</td></tr><tr><td> comment</td></tr><tr><td>*/</td></tr><tr><td>// single line comment</td></tr><tr><td>fn main() {</td></tr><tr><td> let mut x = 3;</td></tr><tr><td> let mut y = if x == 3 {</td></tr><tr><td> 4</td></tr><tr><td> } else {</td></tr><tr><td> 5</td></tr><tr><td> };</td></tr><tr><td> println!("Hello World!\n");</td></tr><tr><td> println!("{:?}", 3 + 4);</td></tr><tr><td>}</td></tr><tr><td></td></tr><tr><td>pub struct Point {</td></tr><tr><td> x: f32,</td></tr><tr><td> y: f32</td></tr><tr><td>}</td></tr><tr><td></td></tr><tr><td>pub const CONST: u32 = 1;</td></tr><tr><td>```</td></tr></tbody></table></code></pre><pre><code><table><tbody><tr><td class="index">1</td><td><span class="color_gray">/*</span></td></tr><tr><td class="index">2</td><td><span class="color_gray"> multiline</span></td></tr><tr><td class="index">3</td><td><span class="color_gray"> comment</span></td></tr><tr><td class="index">4</td><td><span class="color_gray">*/</span></td></tr><tr><td class="index">5</td><td><span class="color_gray">//</span><span class="color_gray"> single line comment</span></td></tr><tr class="highlight"><td class="index">6</td><td><span class="color_violet">fn</span><span class="color_white"> </span><span class="color_aqua">main</span><span class="color_white">(</span><span class="color_white">)</span><span class="color_white"> </span><span class="color_white">{</span></td></tr><tr><td class="index">7</td><td><span class="color_white"> </span><span class="color_violet">let</span><span class="color_white"> </span><span class="color_violet">mut</span><span class="color_white"> x </span><span class="color_white">=</span><span class="color_white"> </span><span class="color_gold">3</span><span class="color_white">;</span></td></tr><tr><td class="index">8</td><td><span class="color_white"> </span><span class="color_violet">let</span><span class="color_white"> </span><span class="color_violet">mut</span><span class="color_white"> y </span><span class="color_white">=</span><span class="color_white"> </span><span class="color_violet">if</span><span class="color_white"> x </span><span class="color_white">=</span><span class="color_white">=</span><span class="color_white"> </span><span class="color_gold">3</span><span class="color_white"> </span><span class="color_white">{</span></td></tr><tr><td class="index">9</td><td><span class="color_white"> </span><span class="color_gold">4</span></td></tr><tr><td class="index">10</td><td><span class="color_white"> </span><span class="color_white">}</span><span class="color_white"> </span><span class="color_violet">else</span><span class="color_white"> </span><span class="color_white">{</span></td></tr><tr><td class="index">11</td><td><span class="color_white"> </span><span class="color_gold">5</span></td></tr><tr><td class="index">12</td><td><span class="color_white"> </span><span class="color_white">}</span><span class="color_white">;</span></td></tr><tr><td class="index">13</td><td><span class="color_white"> </span><span class="color_white">println!</span><span class="color_white">(</span><span class="color_white">"</span><span class="color_green">Hello World!</span><span class="color_emerald">\n</span><span class="color_white">"</span><span class="color_white">)</span><span class="color_white">;</span></td></tr><tr><td class="index">14</td><td><span class="color_white"> </span><span class="color_white">println!</span><span class="color_white">(</span><span class="color_white">"</span><span class="color_gold">{:?}</span><span class="color_white">"</span><span class="color_white">,</span><span class="color_white"> </span><span class="color_gold">3</span><span class="color_white"> </span><span class="color_white">+</span><span class="color_white"> </span><span class="color_gold">4</span><span class="color_white">)</span><span class="color_white">;</span></td></tr><tr><td class="index">15</td><td><span class="color_white">}</span></td></tr><tr><td class="index">16</td><td></td></tr><tr class="highlight"><td class="index">17</td><td><span class="color_violet">pub</span><span class="color_white"> </span><span class="color_violet">struct</span><span class="color_white"> </span><span class="color_white">Point</span><span class="color_white"> </span><span class="color_white">{</span></td></tr><tr><td class="index">18</td><td><span class="color_white"> </span><span class="color_red">x</span><span class="color_white">:</span><span class="color_white"> </span><span class="color_violet">f32</span><span class="color_white">,</span></td></tr><tr><td class="index">19</td><td><span class="color_white"> </span><span class="color_red">y</span><span class="color_white">:</span><span class="color_white"> </span><span class="color_violet">f32</span></td></tr><tr><td class="index">20</td><td><span class="color_white">}</span></td></tr><tr><td class="index">21</td><td></td></tr><tr class="highlight"><td class="index">22</td><td><span class="color_violet">pub</span><span class="color_white"> </span><span class="color_violet">const</span><span class="color_white"> </span><span class="color_gold">CONST</span><span class="color_white">:</span><span class="color_white"> </span><span class="color_violet">u32</span><span class="color_white"> </span><span class="color_white">=</span><span class="color_white"> </span><span class="color_gold">1</span><span class="color_white">;</span></td></tr><tr class="copy-button-row"><td><button class="copy-fenced-code" onclick="copy_code_to_clipboard(4)">Copy</button></td></tr></tbody></table></code></pre><h3 id="blockquotes">Blockquotes</h3><blockquote>This is a blockquote. <blockquote>This is another blockquote. </blockquote></blockquote><h3 id="unlike-gfm">Unlike GFM...</h3><p>MDxt doesn't support setext headers and indented code blocks.</p><h2 id="macros">Macros</h2><p>Macros are inline elements. Which means an opening macro and the closing one has to be in the same paragraph. But there are many cases where you want to apply macros to multiple paragraphs. Read <a href="#multiline-macro">multiline macro</a> section for that.</p><p>A valid macro consists of <code class="short">A-Z</code>, <code class="short">a-z</code>, <code class="short">0-9</code>, <code class="short">=</code>, <code class="short">,</code>, <code class="short">_</code>, and <code class="short"> </code>. If a double square bracket contains invalid characters, that won't be parsed as a macro. Whitespaces and <code class="short">_</code>s inside macros are ignored, and all the alphabet characters are lowered. That means <code class="short">[[box, no_border]]</code> and <code class="short">[[box, n o border]]</code> are exactly the same macro.</p><h3 id="colors">Colors</h3><p>It has 14 colors: black, dark, gray, lightgray, white, red, green, blue, aqua, emerald, violet, pink, grassgreen, and gold.</p><table><thead><tr><th> MDxt </th><th> html </th><th> output </th></tr></thead><tbody><tr><td>[[black]]black[[/black]] </td><td> <span class="color_black">black</span> </td><td> <span class="color_black">black</span> </td></tr><tr><td>[[dark]]dark[[/dark]] </td><td> <span class="color_dark">dark</span> </td><td> <span class="color_dark">dark</span> </td></tr><tr><td>[[gray]]gray[[/gray]] </td><td> <span class="color_gray">gray</span> </td><td> <span class="color_gray">gray</span> </td></tr><tr><td>[[lightgray]]lightgray[[/lightgray]] </td><td> <span class="color_lightgray">lightgray</span> </td><td> <span class="color_lightgray">lightgray</span> </td></tr><tr><td>[[white]]white[[/white]] </td><td> <span class="color_white">white</span> </td><td> <span class="color_white">white</span> </td></tr><tr><td>[[red]]red[[/red]] </td><td> <span class="color_red">red</span> </td><td> <span class="color_red">red</span> </td></tr><tr><td>[[green]]green[[/green]] </td><td> <span class="color_green">green</span> </td><td> <span class="color_green">green</span> </td></tr><tr><td>[[blue]]blue[[/blue]] </td><td> <span class="color_blue">blue</span> </td><td> <span class="color_blue">blue</span> </td></tr><tr><td>[[aqua]]aqua[[/aqua]] </td><td> <span class="color_aqua">aqua</span> </td><td> <span class="color_aqua">aqua</span> </td></tr><tr><td>[[emerald]]emerald[[/emerald]] </td><td> <span class="color_emerald">emerald</span> </td><td> <span class="color_emerald">emerald</span> </td></tr><tr><td>[[violet]]violet[[/violet]] </td><td> <span class="color_violet">violet</span> </td><td> <span class="color_violet">violet</span> </td></tr><tr><td>[[pink]]pink[[/pink]] </td><td> <span class="color_pink">pink</span> </td><td> <span class="color_pink">pink</span> </td></tr><tr><td>[[grassgreen]]grassgreen[[/grassgreen]] </td><td> <span class="color_grassgreen">grassgreen</span> </td><td> <span class="color_grassgreen">grassgreen</span> </td></tr><tr><td>[[gold]]gold[[/gold]] </td><td> <span class="color_gold">gold</span> </td><td> <span class="color_gold">gold </span> </td></tr></tbody></table><h3 id="sizes">Sizes</h3><p>It has 5 sizes: tiny, small, medium, big, and giant.</p><p><code class="short">[[tiny]] tiny [[/tiny]]</code> is rendered to <code class="short"><span class="size_tiny"> tiny </span></code>. The same rule is applied to the other sizes.</p><table><thead><tr><th> MDxt </th><th> html </th><th> output </th></tr></thead><tbody><tr><td>[[tiny]]tiny[[/tiny]] </td><td> <span class="size_tiny">tiny</span> </td><td> <span class="size_tiny">tiny</span> </td></tr><tr><td>[[small]]small[[/small]] </td><td> <span class="size_small">small</span> </td><td> <span class="size_small">small</span> </td></tr><tr><td>[[medium]]medium[[/medium]] </td><td> <span class="size_medium">medium</span> </td><td> <span class="size_medium">medium</span> </td></tr><tr><td>[[big]]big[[/big]] </td><td> <span class="size_big">big</span> </td><td> <span class="size_big">big</span> </td></tr><tr><td>[[giant]]giant[[/giant]] </td><td> <span class="size_giant">giant</span> </td><td> <span class="size_giant">giant</span> </td></tr></tbody></table><h3 id="alignments">Alignments</h3><p>It has 3 alignments: left, right, and center.</p><p><code class="short">[[center]] center [[/center]]</code> is rendered to <code class="short"><span class="align_center"> center </span></code>. The same rule is applied to the other alignments.</p><p>Inline alignments are rendered to <code class="short">span</code> tags and multi-lines are rendered to <code class="short">div</code>. In most cases, <code class="short">span</code> tags don't work with alignments.</p><h3 id="highlights">Highlights</h3><p><code class="short">[[highlight = red]] This text is highlighted! [[/highlight]]</code> is rendered to <code class="short"><span class="highlight_red"> This text is highlighted! </span></code>. The same rule is applied to the other colors.</p><p>To see available colors, read <a href="#colors">Colors</a> section.</p><h3 id="box">Box</h3><p><code class="short">[[box]]A text in a box.[[/box]]</code> is rendered to <code class="short"><div class="box">A text in a box.</div></code>.</p><p><code class="short">[[box, no border]]A text in a box.[[/box]]</code> is rendered to <code class="short"><div class="box no-border">A text in a box.</div></code>.</p><pre><code><table><tbody><tr><td>[[box]]</td></tr><tr><td></td></tr><tr><td>A paragraph in a box.</td></tr><tr><td></td></tr><tr><td>[[box]]</td></tr><tr><td></td></tr><tr><td>A paragraph in a box in a box.</td></tr><tr><td></td></tr><tr><td>[[/box]]</td></tr><tr><td></td></tr><tr><td>[[box, no border]]</td></tr><tr><td></td></tr><tr><td>A paragraph in a borderless box in a box.</td></tr><tr><td></td></tr><tr><td>[[/box]]</td></tr><tr><td></td></tr><tr><td>[[/box]]</td></tr></tbody></table></code></pre><div class="box"><p>A paragraph in a box.</p><div class="box"><p>A paragraph in a box in a box.</p></div><div class="box no-border"><p>A paragraph in a borderless box in a box.</p></div></div><h3 id="table-of-contents">Table of Contents</h3><pre><code><table><tbody><tr><td>| Table of Contents |</td></tr><tr><td>|-------------------|</td></tr><tr><td>|!![[collapsible]] |</td></tr><tr><td>| [[toc]] |</td></tr></tbody></table></code></pre><p>See how that's rendered <a href="#tocsample">here</a></p><h3 id="special-characters">Special Characters</h3><p><code class="short">[[char = 44032]]</code> is rendered to <code class="short">&#44032;</code>, which is 가.</p><h3 id="icons">Icons</h3><p>WIP</p><h3 id="math">Math</h3><p><code class="short">[[math]] sqrt{a sup{2} + b sup{2}} [[/math]]</code> is rendered to \( \sqrt{a ^{2} + b ^{2}} \). It uses the <a href="https://www.mathjax.org/">mathjax</a> library to render math formula.</p><h3 id="multiline-macro">Multiline Macro</h3><p>If a paragraph has a macro and no other contents at all, the paragraph is rendered to a multiline macro.</p><pre><code><table><tbody><tr><td>[[red]]</td></tr><tr><td></td></tr><tr><td>These 3 paragraphs are</td></tr><tr><td></td></tr><tr><td>rendered to</td></tr><tr><td></td></tr><tr><td>red texts.</td></tr><tr><td></td></tr><tr><td>[[/red]]</td></tr></tbody></table></code></pre><p>As you see above, the first and the last paragraph only consist of a macro. The macro will be rendered to <code class="short"><div class="color_red"></code>.</p><h2 id="plugins">Plugins</h2><p>WIP</p><h2 id="characters">Characters</h2><h3 id="escapes">Escapes</h3><p>Backslashes (<code class="short">\</code>) inside code spans and fenced code blocks are not escaped. All the other backslash characters are escape characters.</p><h3 id="tabs">Tabs</h3><p>All the tab characters (<code class="short">\t</code>) are converted to 4 whitespaces. All the newline characters except <code class="short">\n</code> are ignored.</p><hr/><p>😄</p><p>😢</p><p>🌏</p><p>←</p><p>∨</p><p>≈</p><p>⊇</p><p>∫</p><p>→</p><p>∮</p><p>😍</p><p>∩</p><p>🌙</p><p>↑</p><p>∴</p><p>≡</p><p>•</p><p>⊃</p><p>∧</p><p>↓</p><p>∉</p><p>ℜ</p><p>∃</p><p>∬</p><p>⊅</p><p>≤</p><p>™</p><p>∈</p><p>∞</p><p>∋</p><p>Ω</p><p>∅</p><p>⊄</p><p>₩</p><p>≥</p><p>∑</p><p>∏</p><p>©</p><p>⊂</p><p>⊆</p><p>∝</p><p>€</p><p>∇</p><p>∂</p><p>∀</p><p>≠</p><p>🌞</p><p>∴</p><p>∵</p><p>∪</p><hr class="footnote_hr"/><p><a id="footnote_cite0"></a>0. <a href="#footnote_ref0"> [0]</a> Hi, there!<br/><a id="footnote_cite1"></a>1. <a href="#footnote_ref1"> [1]</a> Hello!<br/></p><script>function collapse_table(n) {
var head = document.getElementById("table-collapse-toggle-" + n);
head.classList.toggle("collapsed");
var content = document.getElementById("collapsible-table-" + n);
content.classList.toggle("invisible");
}</script><script>
const fenced_code_block_contents = ["", "", "", "", "/*\n multiline\n comment\n*/\n// single line comment\nfn main() {\n let mut x = 3;\n let mut y = if x == 3 {\n 4\n } else {\n 5\n };\n println!(\"Hello World!\\n\");\n println!(\"{:?}\", 3 + 4);\n}\n\npub struct Point {\n x: f32,\n y: f32\n}\n\npub const CONST: u32 = 1;"];
function copy_code_to_clipboard(index) {
navigator.clipboard.writeText(fenced_code_block_contents[index]);
}</script><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script></article>
</body>
</html>