<h1 id="mdxt-showcase">MDxt Showcase</h1><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-showcase">MDxt Showcase</a><ol type="1"><li><a href="#tables">Tables</a><ol type="1"><li><a href="#collapsible-tables">Collapsible Tables</a></li></ol></li><li><a href="#footnotes">Footnotes</a></li><li><a href="#fenced-code-blocks">Fenced Code blocks</a></li><li><a href="#inline-elements">Inline elements</a></li><li><a href="#task-lists">Task lists</a></li><li><a href="#macros">Macros</a><ol type="1"><li><a href="#colors">Colors</a></li></ol></li></ol></li></ol> </td></tr></tbody></table><h2 id="tables">Tables</h2><p>Tables with multiline-headers, colspans and column alingments!</p><pre><code><table><tbody><tr><td>| | [[colspan=2]] Compiled | Interpreted |</td></tr><tr><td>| | Rust | Zig | Python |</td></tr><tr><td>|-----------|--------------|-------------|-----------------|</td></tr><tr><td>| Repo | [Rust] | [Zig] | [Python] |</td></tr><tr><td>| Stars | 68.5k | 14.9k | 46.1k |</td></tr><tr><td>| License | Apache | MIT | Python |</td></tr><tr><td></td></tr><tr><td>| | Column 1 | Column 2 | Column 3 |</td></tr><tr><td>|-------------|:------------:|:------------|-------------:|</td></tr><tr><td>| Alignment | Center | Left | Right |</td></tr><tr><td>| Colspan | [[colspan=2]] 2 | 1 |</td></tr><tr><td>| Colspan | 1 | [[colspan=2]] 2 |</td></tr></tbody></table></code></pre><table><thead><tr><th> </th><th colspan="2"> Compiled </th><th> Interpreted </th></tr><tr><th> </th><th> Rust </th><th> Zig </th><th> Python </th></tr></thead><tbody><tr><td> Repo </td><td> <a href="https://github.com/rust-lang/Rust">Rust</a> </td><td> <a href="https://github.com/ziglang/zig">Zig</a> </td><td> <a href="https://github.com/python/cpython">Python</a> </td></tr><tr><td> Stars </td><td> 68.5k </td><td> 14.9k </td><td> 46.1k </td></tr><tr><td> License </td><td> Apache </td><td> MIT </td><td> Python </td></tr></tbody></table><table><thead><tr><th> </th><th><div class="align_center"> Column 1 </div></th><th><div class="align_left"> Column 2 </div></th><th><div class="align_right"> Column 3 </div></th></tr></thead><tbody><tr><td> Alignment </td><td><div class="align_center"> Center </div></td><td><div class="align_left"> Left </div></td><td><div class="align_right"> Right </div></td></tr><tr><td> Colspan </td><td colspan="2"><div class="align_center"> 2 </div></td><td><div class="align_right"> 1 </div></td></tr><tr><td> Colspan </td><td><div class="align_center"> 1 </div></td><td colspan="2"><div class="align_left"> 2 </div></td></tr></tbody></table><h3 id="collapsible-tables">Collapsible Tables</h3><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-3" class="collapsible" onclick ="collapse_table('3')"><tr><th> Click Me! (Default shown) </th></tr></thead><tbody id="collapsible-table-3"><tr><td> Hi, there! </td></tr></tbody></table><table><thead id="table-collapse-toggle-4" class="collapsible collapsed" onclick ="collapse_table('4')"><tr><th> Click Me! (Default hidden) </th></tr></thead><tbody id="collapsible-table-4" class="invisible"><tr><td> Hi, there! </td></tr></tbody></table><h2 id="footnotes">Footnotes</h2><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="fenced-code-blocks">Fenced Code blocks</h2><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></tbody></table></code></pre><h2 id="inline-elements">Inline elements</h2><p><code class="short">CO~2~</code> is rendered to CO<sub>2</sub>. <br/> <code class="short">E = mc^2^</code> is rendered to E = mc<sup>2</sup>. <br/> <code class="short">~~del~~</code> is rendered to <del>del</del>. <br/> <code class="short">~_underline_~</code> is rendered to <u>underline</u>.</p><h2 id="task-lists">Task lists</h2><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><h2 id="macros">Macros</h2><p><code class="short">[[big]][[red]]Big red text.[[/red]][[/big]]</code> is rendered to <span class="size_big"><span class="color_red">Big red text.</span></span>.</p><p><code class="short">[[math]]cfrac{-b pm sqrt{b sup{2} - 4 a c}}{2a}[[/math]]</code> is rendered to \(\cfrac{-b \pm \sqrt{b ^{2} - 4 a c}}{2a}\).</p><p><code class="short">[[highlight=red]]This text is highlighted![[/highlight]]</code> is rendered to <span class="highlight_red">This text is highlighted!</span>.</p><h3 id="colors">Colors</h3><table><thead><tr><th> Name </th><th> Color </th></tr></thead><tbody><tr><td> Black </td><td> <span class="color_black"> Black </span> </td></tr><tr><td> Dark </td><td> <span class="color_dark"> Dark </span> </td></tr><tr><td> Gray </td><td> <span class="color_gray"> Gray </span> </td></tr><tr><td> Lightgray </td><td> <span class="color_lightgray"> Lightgray </span> </td></tr><tr><td> White </td><td> <span class="color_white"> White </span> </td></tr><tr><td> Red </td><td> <span class="color_red"> Red </span> </td></tr><tr><td> Green </td><td> <span class="color_green"> Green </span> </td></tr><tr><td> Blue </td><td> <span class="color_blue"> Blue </span> </td></tr><tr><td> Aqua </td><td> <span class="color_aqua"> Aqua </span> </td></tr><tr><td> Emerald </td><td> <span class="color_emerald"> Emerald </span> </td></tr><tr><td> Violet </td><td> <span class="color_violet"> Violet </span> </td></tr><tr><td> Pink </td><td> <span class="color_pink"> Pink </span> </td></tr><tr><td> Grassgreen </td><td> <span class="color_grassgreen"> Grassgreen </span> </td></tr><tr><td> Gold </td><td> <span class="color_gold"> Gold </span> </td></tr></tbody></table><p>Drag texts to see highlighted colors!</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 id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>