<!DOCTYPE html>
<html>
<head>
<title>MDxt Reference</title>
<style>@media screen and (orientation: landscape) {
html {
font-size: 21px;
}
}
body .markdown {
background-color: #404040;
color: #ffffff;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 1px;
}
body .markdown ::selection {
background-color: #bfbfbf;
color: #000000;
}
body .markdown hr.footnote-hr {
margin-top: 2.857rem;
}
body .markdown img {
max-width: 21.43rem;
max-height: 21.43rem;
}
/* Blockquote */
.markdown blockquote {
background-color: #00000080;
width: 75%;
border-left: 0.238rem solid #808080;
padding: 0.571rem;
}
/* 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: 0.571rem;
margin: 0.571rem;
border: 0.143rem solid #808080;
}
.markdown div.box.no-border {
border: none;
}
/* Sizes */
.markdown .size-tiny {
font-size: 0.619rem;
}
.markdown .size-tiny img {
max-width: 11.9rem;
max-height: 11.9rem;
}
.markdown .size-small {
font-size: 0.762rem;
}
.markdown .size-small img {
max-width: 16.67rem;
max-height: 16.67rem;
}
.markdown .size-medium {
font-size: 1rem;
}
.markdown .size-medium img {
max-width: 21.43rem;
max-height: 21.43rem;
}
.markdown .size-big {
font-size: 1.19rem;
}
.markdown .size-big img {
max-width: 28.57rem;
max-height: 28.57rem;
}
.markdown .size-giant {
font-size: 1.571rem;
}
.markdown .size-giant img {
max-width: 34.29rem;
max-height: 34.29rem;
}
/* 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: 2.667rem;
margin-top: 2.857rem;
margin-bottom: 1.4285rem;
transition: color 0.3s;
}
.markdown h1:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h2 {
font-size: 2.286rem;
margin-top: 2.571rem;
margin-bottom: 1.2855rem;
transition: color 0.3s;
}
.markdown h2:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h3 {
font-size: 2rem;
margin-top: 2.143rem;
margin-bottom: 1.0715rem;
transition: color 0.3s;
}
.markdown h3:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h4 {
font-size: 1.714rem;
margin-top: 1.857rem;
margin-bottom: 0.9285rem;
transition: color 0.3s;
}
.markdown h4:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h5 {
font-size: 1.286rem;
margin-top: 1.429rem;
margin-bottom: 0.7145rem;
transition: color 0.3s;
}
.markdown h5:hover {
color: #ffffff80;
transition: color 0.3s;
}
.markdown h1, .markdown h2 {
border-bottom: 0.143rem solid #808080;
}
/* Links */
.markdown a:link {
border-bottom: 0.143rem 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: 0.143rem solid #40c0ff;
}
.markdown a::selection {
color: #bf3f00;
}
/* Fenced Code Block */
.markdown pre.line-num-width-0 span.code-fence-index {
min-width: 1.071rem;
}
.markdown pre.line-num-width-1 span.code-fence-index {
min-width: 1.571rem;
}
.markdown pre.line-num-width-2 span.code-fence-index {
min-width: 2.071rem;
}
.markdown pre.line-num-width-3 span.code-fence-index {
min-width: 2.571rem;
}
.markdown pre.line-num-width-4 span.code-fence-index {
min-width: 3.071rem;
}
.markdown pre.line-num-width-5 span.code-fence-index {
min-width: 3.571rem;
}
.markdown pre.line-num-width-6 span.code-fence-index {
min-width: 4.071rem;
}
.markdown pre {
padding: 0.571rem;
background-color: #000000;
width: 90%;
overflow: auto;
line-height: 1;
}
.markdown pre span.code-fence-index {
display: inline-block;
border-right: 0.143rem solid #40ffc0;
text-align: right;
padding-right: 0.571rem;
margin-right: 0.571rem;
padding-top: 0.143rem;
padding-bottom: 0.143rem;
}
.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: 0.143rem;
padding-bottom: 0.143rem;
}
.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: 0.143rem 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: 1rem;
padding: 0.286rem;
border-radius: 0.286rem;
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: 0.143rem;
padding: 0.143rem 0.286rem 0.143rem;
}
/* Table */
.markdown table {
border-collapse: collapse;
margin: 0.571rem;
}
.markdown th {
background-color: #808080;
transition: padding 0.5s ease-out;
}
.markdown td, .markdown th {
padding: 0.857rem;
}
.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: 0.286rem;
transition: padding 0.5s ease-out;
}
.markdown .invisible th, .markdown .invisible td {
display: none;
}
/*
----- Lists -----
*/
.markdown ul, .markdown ol {
padding-left: 1.524rem;
}
.markdown ul.no-bullet-list, .markdown ol.no-bullet-list {
list-style-type: none;
}
.markdown li {
padding: 0.286rem;
}
/*
----- Checkbox for task lists -----
*/
.markdown div.unchecked-box, .markdown div.checked-box {
position: relative;
top: 0.25rem;
display: inline-block;
border-radius: 0.19rem;
width: 1rem;
height: 1rem;
}
.markdown div.unchecked-box {
background-color: #808080;
margin-right: 0.571rem;
}
.markdown div.checked-box {
background-color: #000000;
margin-right: 0.571rem;
}
.markdown span.checkmark {
display: block;
position: relative;
left: 0.25rem;
top: 0.125rem;
width: 0.3333333333rem;
height: 0.5rem;
border-bottom: 0.143rem solid #ffffff;
border-right: 0.143rem solid #ffffff;
transform: rotate(45deg);
}
.markdown span.triangle {
display: block;
position: relative;
width: 0;
height: 0;
left: 0.1666666667rem;
top: 0.3333333333rem;
border-left: 0.3333333333rem solid #0000;
border-right: 0.3333333333rem solid #0000;
border-bottom: 0.3333333333rem solid #ffffff;
}
</style>
</head>
<body>
<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><li><a href="#list-macros">List Macros</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="#metadata">Metadata</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-ref-0"><a href="#footnote-cite-0">[0]</a></sup></p><p>This is another footnote.<sup id="footnote-ref-1"><a href="#footnote-cite-1">[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">- [^] Triangle</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>Triangle</li></ul><h4 id="list-macros">List Macros</h4><pre><code><span class="code-fence-row"><span class="code-fence-code">- !![[no bullet]]</span></span>
<span class="code-fence-row"><span class="code-fence-code">- no</span></span>
<span class="code-fence-row"><span class="code-fence-code">- bullet</span></span>
<span class="code-fence-row"><span class="code-fence-code"> - 123</span></span>
<span class="code-fence-row"><span class="code-fence-code"> - 456</span></span>
<span class="code-fence-row"><span class="code-fence-code">- 789</span></span>
<span class="code-fence-row"><span class="code-fence-code"> a. !![[start = 20]]</span></span>
<span class="code-fence-row"><span class="code-fence-code"> a. `[[start = t]]` is invalid.</span></span>
<span class="code-fence-row"><span class="code-fence-code"> a. hahaha</span></span>
</code></pre><p>is rendered to </p><pre><code><span class="code-fence-row"><span class="code-fence-code"><span class="color-white"><</span><span class="color-red">ul</span><span class="color-white"> </span><span class="color-gold">class</span><span class="color-white">=</span><span class="color-white">"</span><span class="color-green">no-bullet-list</span><span class="color-white">"</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">li</span><span class="color-white">></span><span class="color-white">no</span><span class="color-white"></</span><span class="color-red">li</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">li</span><span class="color-white">></span><span class="color-white">bullet</span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">ul</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">li</span><span class="color-white">></span><span class="color-white">123</span><span class="color-white"></</span><span class="color-red">li</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">li</span><span class="color-white">></span><span class="color-white">456</span><span class="color-white"></</span><span class="color-red">li</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"></</span><span class="color-red">ul</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"></</span><span class="color-red">li</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">li</span><span class="color-white">></span><span class="color-white">789</span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">ol</span><span class="color-white"> </span><span class="color-gold">type</span><span class="color-white">=</span><span class="color-white">"</span><span class="color-green">a</span><span class="color-white">"</span><span class="color-white"> </span><span class="color-gold">start</span><span class="color-white">=</span><span class="color-white">"</span><span class="color-green">20</span><span class="color-white">"</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">li</span><span class="color-white">></span><span class="color-white"><</span><span class="color-red">code</span><span class="color-white"> </span><span class="color-gold">class</span><span class="color-white">=</span><span class="color-white">"</span><span class="color-green">short</span><span class="color-white">"</span><span class="color-white">></span><span class="color-white">[[start = t]]</span><span class="color-white"></</span><span class="color-red">code</span><span class="color-white">></span><span class="color-white"> is invalid.</span><span class="color-white"></</span><span class="color-red">li</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"><</span><span class="color-red">li</span><span class="color-white">></span><span class="color-white">hahaha</span><span class="color-white"></</span><span class="color-red">li</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"></</span><span class="color-red">ol</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"> </span><span class="color-white"></</span><span class="color-red">li</span><span class="color-white">></span></span></span>
<span class="code-fence-row"><span class="code-fence-code"><span class="color-white"></</span><span class="color-red">ul</span><span class="color-white">></span></span></span>
</code></pre><p>which looks like</p><ul class="no-bullet-list"><li>no</li><li>bullet<ul><li>123</li><li>456</li></ul></li><li>789<ol type="a" start="20"><li><code class="short">[[start = t]]</code> is invalid.</li><li>hahaha</li></ol></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"> let z = x < 3 && y > 4;</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-violet">let</span><span class="color-white"> z </span><span class="color-white">=</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 class="color-white">&</span><span class="color-white">&</span><span class="color-white"> y </span><span class="color-white">></span><span class="color-white"> </span><span class="color-gold">4</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-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">15</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">16</span><span class="code-fence-code"><span class="color-white">}</span></span></span>
<span class="highlight code-fence-row"><span class="code-fence-index">17</span><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-index">18</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">19</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">20</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">21</span><span class="code-fence-code"><span class="color-white">}</span></span></span>
<span class="highlight code-fence-row"><span class="code-fence-index">22</span><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-index">23</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(6)">Copy</button></pre><h3 id="blockquotes">Blockquotes</h3><blockquote>This is a blockquote. <blockquote>This is another blockquote. </blockquote></blockquote><h3 id="metadata">Metadata</h3><p>The engine can read metadata in your markdown files. Metadata section starts with <code class="short">---</code> and ends with <code class="short">---</code>. There can only be one or less metadata section in each file. A metadata section must be the very first part of the document, if exists.</p><p>The engine uses <a href="https://github.com/chyh1990/yaml-rust">yaml-rust</a> crate to parse metadata. Metadata should be a valid yaml object. Since yaml is superset of json, you can also use json objects as metadata.</p><p>Below is an example of a metadata section.</p><pre><code><span class="code-fence-row"><span class="code-fence-code">---</span></span>
<span class="code-fence-row"><span class="code-fence-code">date: [2022, 8, 7]</span></span>
<span class="code-fence-row"><span class="code-fence-code">author: Baehyunsol</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"># Header</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">Paragraph</span></span>
</code></pre><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. That means,</p><pre><code><span class="code-fence-row"><span class="code-fence-code">[[center]] This text is not centered.[[/center]]</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[[center]]</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 text is centered.</span></span>
<span class="code-fence-row"><span class="code-fence-code"></span></span>
<span class="code-fence-row"><span class="code-fence-code">[[/center]]</span></span>
</code></pre><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 the <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 the above code is rendered, see <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 list of available characters, visit <a href="MDxt-Character-Reference.html">here</a>.</p><p><code class="short">[[br]]</code> is rendered to <code class="short"><br/></code> and <code class="short">[[blank]]</code> is rendered to <code class="short">&nbsp;</code> If you want multiple blanks, <code class="short">[[blank=3]]</code> and <code class="short">[[br=4]]</code> are your options.</p><h3 id="icons">Icons</h3><p>WIP</p><h3 id="math">Math</h3><p><code class="short">[[math]] sqrt{sup{a}{2} + sup{b}{2}} [[/math]]</code> is rendered to <math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></msqrt></math>. It renders the output in <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">MathML</a>.</p><p>To see the list of 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-cite-0"></a>0. <a href="#footnote-ref-0"> [0]</a> Hi, there!<br/><a id="footnote-cite-1"></a>1. <a href="#footnote-ref-1"> [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");
}
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 let z = x < 3 && y > 4;\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></article>
</body>
</html>