<!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: 56px;
margin-top: 60px;
margin-bottom: 30px;
transition: color 0.3s;
}
.markdown h1:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h2 {
font-size: 48px;
margin-top: 54px;
margin-bottom: 27px;
transition: color 0.3s;
}
.markdown h2:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h3 {
font-size: 42px;
margin-top: 45px;
margin-bottom: 22.5px;
transition: color 0.3s;
}
.markdown h3:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h4 {
font-size: 36px;
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.line-num-width-0 span.code-fence-index {
min-width: 22.5px;
}
.markdown pre.line-num-width-1 span.code-fence-index {
min-width: 33px;
}
.markdown pre.line-num-width-2 span.code-fence-index {
min-width: 43.5px;
}
.markdown pre.line-num-width-3 span.code-fence-index {
min-width: 54px;
}
.markdown pre.line-num-width-4 span.code-fence-index {
min-width: 64.5px;
}
.markdown pre.line-num-width-5 span.code-fence-index {
min-width: 75px;
}
.markdown pre.line-num-width-6 span.code-fence-index {
min-width: 85.5px;
}
.markdown pre {
padding: 12px;
background-color: #000000;
width: 90%;
overflow: auto;
line-height: 1;
}
.markdown pre span.code-fence-index {
display: inline-block;
border-right: 3px solid #40ffc0;
text-align: right;
padding-right: 12px;
margin-right: 12px;
padding-top: 3px;
padding-bottom: 3px;
}
.markdown pre span.code-fence-row {
display: inline-block;
width: 100%;
}
.markdown pre span.code-fence-row:hover {
background-color: #404040;
}
.markdown pre span.code-fence-code {
display: inline-block;
padding-top: 3px;
padding-bottom: 3px;
}
.markdown pre span.highlight.code-fence-row {
background-color: #ffffff;
color: #000000;
}
.markdown pre span.highlight.code-fence-row span.code-fence-index {
border-right: 3px solid #bf003f;
}
.markdown pre span.highlight.code-fence-row:hover {
background-color: #ffffff80;
}
.markdown pre span.highlight span .color_black {
color: #ffffff;
}
.markdown pre span.highlight span .color_dark {
color: #bfbfbf;
}
.markdown pre span.highlight span .color_gray {
color: #7f7f7f;
}
.markdown pre span.highlight span .color_lightgray {
color: #3f3f3f;
}
.markdown pre span.highlight span .color_white {
color: #000000;
}
.markdown pre span.highlight span .color_red {
color: #3fbfbf;
}
.markdown pre span.highlight span .color_green {
color: #bf3fbf;
}
.markdown pre span.highlight span .color_blue {
color: #bfbf3f;
}
.markdown pre span.highlight span .color_aqua {
color: #bf3f00;
}
.markdown pre span.highlight span .color_emerald {
color: #bf003f;
}
.markdown pre span.highlight span .color_violet {
color: #3fbf00;
}
.markdown pre span.highlight span .color_pink {
color: #00bf3f;
}
.markdown pre span.highlight span .color_grassgreen {
color: #3f00bf;
}
.markdown pre span.highlight span .color_gold {
color: #003fbf;
}
.markdown button.copy-fenced-code {
background-color: #404040;
border: none;
color: #ffffff;
font-size: 21px;
padding: 6px;
border-radius: 6px;
cursor: pointer;
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><a id="tocsample"></a></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><span class="code-fence-row"><span class="code-fence-code">This is a footnote.[^A]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">This is another footnote.[^B]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[^A]: Hi, there!</span></span>
<span class="code-fence-row"><span class="code-fence-code">[^B]: Hello!</span></span>
</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><span class="code-fence-row"><span class="code-fence-code">| Click Me! (Default shown) |</span></span>
<span class="code-fence-row"><span class="code-fence-code">|----------------------------------------|</span></span>
<span class="code-fence-row"><span class="code-fence-code">|!![[collapsible, default=shown]] |</span></span>
<span class="code-fence-row"><span class="code-fence-code">| Hi, there! |</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">| Click Me! (Default hidden) |</span></span>
<span class="code-fence-row"><span class="code-fence-code">|---------------------------------------|</span></span>
<span class="code-fence-row"><span class="code-fence-code">|!![[collapsible, default=hidden]] |</span></span>
<span class="code-fence-row"><span class="code-fence-code">| Hi, there! |</span></span>
</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><span class="code-fence-row"><span class="code-fence-code">- [ ] Unchecked</span></span>
<span class="code-fence-row"><span class="code-fence-code">- [X] Checked</span></span>
<span class="code-fence-row"><span class="code-fence-code">- [^] Not yet</span></span>
</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><span class="code-fence-row"><span class="code-fence-code">```rust, line_num, highlight(6, 17, 22)</span></span>
<span class="code-fence-row"><span class="code-fence-code">/*</span></span>
<span class="code-fence-row"><span class="code-fence-code"> multiline</span></span>
<span class="code-fence-row"><span class="code-fence-code"> comment</span></span>
<span class="code-fence-row"><span class="code-fence-code">*/</span></span>
<span class="code-fence-row"><span class="code-fence-code">// single line comment</span></span>
<span class="code-fence-row"><span class="code-fence-code">fn main() {</span></span>
<span class="code-fence-row"><span class="code-fence-code"> let mut x = 3;</span></span>
<span class="code-fence-row"><span class="code-fence-code"> let mut y = if x == 3 {</span></span>
<span class="code-fence-row"><span class="code-fence-code"> 4</span></span>
<span class="code-fence-row"><span class="code-fence-code"> } else {</span></span>
<span class="code-fence-row"><span class="code-fence-code"> 5</span></span>
<span class="code-fence-row"><span class="code-fence-code"> };</span></span>
<span class="code-fence-row"><span class="code-fence-code"> println!("Hello World!\n");</span></span>
<span class="code-fence-row"><span class="code-fence-code"> println!("{:?}", 3 + 4);</span></span>
<span class="code-fence-row"><span class="code-fence-code">}</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">pub struct Point {</span></span>
<span class="code-fence-row"><span class="code-fence-code"> x: f32,</span></span>
<span class="code-fence-row"><span class="code-fence-code"> y: f32</span></span>
<span class="code-fence-row"><span class="code-fence-code">}</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">pub const CONST: u32 = 1;</span></span>
<span class="code-fence-row"><span class="code-fence-code">```</span></span>
</code></pre><pre class="line-num-width-1"><code><span class="code-fence-row"><span class="code-fence-index">1</span><span class="code-fence-code"><span class="color_gray">/*</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">2</span><span class="code-fence-code"><span class="color_gray"> multiline</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">3</span><span class="code-fence-code"><span class="color_gray"> comment</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">4</span><span class="code-fence-code"><span class="color_gray">*/</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">5</span><span class="code-fence-code"><span class="color_gray">//</span><span class="color_gray"> single line comment</span></span></span>
<span class="highlight code-fence-row"><span class="code-fence-index">6</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">7</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">8</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">9</span><span class="code-fence-code"><span class="color_white"> </span><span class="color_gold">4</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">10</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">11</span><span class="code-fence-code"><span class="color_white"> </span><span class="color_gold">5</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">12</span><span class="code-fence-code"><span class="color_white"> </span><span class="color_white">}</span><span class="color_white">;</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">13</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">14</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">15</span><span class="code-fence-code"><span class="color_white">}</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">16</span><span class="code-fence-code"></span></span>
<span class="highlight code-fence-row"><span class="code-fence-index">17</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">18</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">19</span><span class="code-fence-code"><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></span></span>
<span class="code-fence-row"><span class="code-fence-index">20</span><span class="code-fence-code"><span class="color_white">}</span></span></span>
<span class="code-fence-row"><span class="code-fence-index">21</span><span class="code-fence-code"></span></span>
<span class="highlight code-fence-row"><span class="code-fence-index">22</span><span class="code-fence-code"><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></span></span>
</code><button class="copy-fenced-code" onclick="copy_code_to_clipboard(4)">Copy</button></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><span class="code-fence-row"><span class="code-fence-code">[[box]]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">A paragraph in a box.</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[[box]]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">A paragraph in a box in a box.</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[[/box]]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[[box, no border]]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">A paragraph in a borderless box in a box.</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[[/box]]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[[/box]]</span></span>
</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><span class="code-fence-row"><span class="code-fence-code">| Table of Contents |</span></span>
<span class="code-fence-row"><span class="code-fence-code">|-------------------|</span></span>
<span class="code-fence-row"><span class="code-fence-code">|!![[collapsible]] |</span></span>
<span class="code-fence-row"><span class="code-fence-code">| [[toc]] |</span></span>
</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><p><code class="short">[[char = copy]]</code> is rendered to <code class="short">&copy;</code>, which is ©.</p><p>To see the complete list of available characters, visit <a href="MDxt-Character-Reference.html">here</a>.</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><p>To see available math elements, visit <a href="MDxt-Math-Reference.html">here</a>.</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><span class="code-fence-row"><span class="code-fence-code">[[red]]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">These 3 paragraphs are</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">rendered to</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">red texts.</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[[/red]]</span></span>
</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 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>