| date | hide | |||
|---|---|---|---|---|
|
true |
MDxt is an extended version of Markdown.
[[anchor, id = toc sample]][[/anchor]]
| Table of Contents |
|---|
| !![[collapsible]] |
| [[toc]] |
Most features require extra style sheets and scripts. For better experience, I recommend you to use this framework. It's a full-featured frontend framework that uses MDxt.
`abc` is rendered to <code class="short">abc</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 `s, it has to be closed with the same number n of `s.
*abc* is rendered to <em>abc</em>. The inner text may not start/end with whitespace(s).
**abc** is rendered to <strong>abc</strong>. The inner text may not start/end with whitespace(s).
~_abc_~ is rendered to <u>abc</u>. The inner text may not start/end with whitespace(s).
~~abc~~ is rendered to <del>abc</del>. The inner text may not start/end with whitespace(s).
~abc~ is rendered to <sub>abc</sub>. The inner text may not start/end with whitespace(s).
^abc^ is rendered to <sup>abc</sup>. The inner text may not start/end with whitespace(s).
The link syntaxes resemble that of GFM's.
A valid link after a bang(!) character is rendered to an img tag.
 is rendered to <img src="def" alt="abc">.
The engine tries to figure out the type of the image. If the file extension is mp4 or webm, it'd generate a <video> tag. If the extension is mp3, ogg, m4a, or wav, it'd be <audio> tag. Otherwise it's an <img> or a youtube video.
If the file destination meets the below conditions, the engine will embed a youtube video.
- It starts with 10 ~ 12 characters of
[0-9A-Za-z_-], which is a video id. - A query for time may follow the video id. The query starts with
?t=, and ends with an integer.
Only insert the video id, not the full url.
- Valid examples
- Only an id
- id + time
- Invalid examples
- full url
Links whose names begin with ^ are rendered to footnotes. A footnote may have multiple lines, but it can have only 1 paragraph. Don't ref another footnote inside a footnote.
Below is an example.
This is a footnote.[^A]
This is another footnote.[^B]
[^A]: Hi, there!
[^B]: Hello!
This is a footnote.1
This is another footnote.2
### Headers is rendered to <h3>Headers</h3>.
Table cells and table itself can have a macro. A table cell with a macro must start with the macro. For example, |[[colspan=3]] valid cell| is a valid table cell with a macro, but |invalid macro [[colspan=3]]| is a valid cell without a macro.
Macros applied table-wide come at the first row of a table. The row shall have only one cell. The cell contains only macros and whitespaces. Each table-wide macro must be prefixed by !!. See the examples below.
Syntaxes of column alignments resemble that of GFM's.
| [[colspan = 6]] Shopping List |
| [[colspan = 3]] Food | [[colspan = 3]] Drink |
|-------|:-----:|-------|:-----:|-------|-------|
| Bread | Cake | Pie | Beer | Water | Coffee|
| None | Center| None | Center| None | None |
| Foo | [[colspan = 4]] *Bar* |
| [[colspan = 6]] Shopping List | | [[colspan = 3]] Food | [[colspan = 3]] Drink | |-------|:-----:|-------|:-----:|-------|-------| | Bread | Cake | Pie | Beer | Water | Coffee| | None | Center| None | Center| None | None | | Foo | [[colspan = 4]] Bar |
The previous example contains colspan macros.
| Click Me! (Default shown) |
|----------------------------------------|
|!![[collapsible, default=shown]] |
| Hi, there! |
| Click Me! (Default hidden) |
|---------------------------------------|
|!![[collapsible, default=hidden]] |
| Hi, there! |
| Click Me! (Default shown) |
|---|
| !![[collapsible, default=shown]] |
| Hi, there! |
| Click Me! (Default hidden) |
|---|
| !![[collapsible, default=hidden]] |
| Hi, there! |
| This table head is not shown. |
|------------------------------------|
|!![[headless]] |
| This is a headless table. |
| This is another row of the table. |
| This table head is not shown. |
|---|
| !![[headless]] |
| This is a headless table. |
| This is another row of the table. |
If both headless and collapsible are enabled, headless is ignored.
You can set ids and classes of tables, using [[id]] and [[class]]
| A table head |
|------------------------------|
|!![[id=abcd]] [[class=efgh]] |
| When rendered to html, |
| the `<table>` tag has an id |
| and a class. |
| A table head |
|---|
| !![[id=abcd]] [[class=efgh]] [[class=ijkl]] |
| When rendered to html, |
the <table> tag has an id |
| and a class. |
An id and class name may only contain lower case alphabets and numbers.
TODO: not implemented yet
| Date | Money | Stuff |
|-------------|--------|------------|
|!![[sort]] |
| 2023.07.16 | 12$ | Dinner |
| 2023.07.16 | 6$ | Coffee |
| 2023.07.16 | 21$ | Taxi |
| 2023.07.17 | 11$ | [[green]]Movie[[/green]] |
| 2023.07.17 | 4$ | Ice Cream || Date | Money | Stuff |
|---|---|---|
| !![[sort]] | ||
| 2023.07.16 | 12$ | Dinner |
| 2023.07.16 | 6$ | Coffee |
| 2023.07.16 | 21$ | Taxi |
| 2023.07.17 | 11$ | [[green]]Movie[[/green]] |
| 2023.07.17 | 4$ | Ice Cream |
MDxt doesn't know anything about dates. It sorts dates by alphabetic order. So you should use YYYYMMDD format if you want it to be sortable.
If all the rows have the same format: NUMBER + SUFFIX and the suffix is the same, it only reads the numbers. It uses Rust's f64 parser to parse the numbers. If it doesn't understand the format, it sorts the rows in alphabetic order.
It ignores all the decorations. It only reads the inner text. If a cell is hidden due to a colspan macro, it considers that as an empty string.
- [ ] Unchecked
- [X] Checked
- [^] Triangle
- Unchecked
- Checked
- [^] Triangle
- !![[no bullet]]
- no
- bullet
- 123
- 456
- 789
a. !![[start = 20]]
a. `[[start = t]]` is invalid.
a. hahaha
is rendered to
<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>which looks like
- !![[no bullet]]
- no
- bullet
- 123
- 456
- 789
a. !![[start = 20]]
a.
[[start = t]]is invalid. a. hahaha
Use 3 or more ` or ~ to start and end a fenced code block. An info-string may follow after the starting code fence. An info-string may contain the name of the language (for syntax highlighting), "line_num" (if enabled, it shows the line numbers), and highlighted lines (which ones to highlight). If a block has line numbers, a copy-button is enabled by default. If you want to disable it, use copy_button(false). Info-strings don't allow whitespaces between an identifer and parenthesis.
```rust, line_num, highlight(6, 17, 22)
/*
multiline
comment
*/
// single line comment
fn main() {
let mut x = 3;
let mut y = if x == 3 {
4
} else {
5
};
let z = x < 3 && y > 4;
println!("Hello World!\n");
println!("{:?}", 3 + 4);
}
pub struct Point {
x: f32,
y: f32
}
pub const CONST: u32 = 1;
```
/*
multiline
comment
*/
// single line comment
fn main() {
let mut x = 3;
let mut y = if x == 3 {
4
} else {
5
};
let z = x < 3 && y > 4;
println!("Hello World!\n");
println!("{:?}", 3 + 4);
}
pub struct Point {
x: f32,
y: f32
}
pub const CONST: u32 = 1;If you want custom syntax highlightings, add .sublime-syntax files to ./extra_syntaxes directory.
You can also set ids and classes of fenced code blocks using info-strings. See the example below.
```id(abcd), class(efgh), class(ijkl)
Use the developer tool to check its attributes!
```
Use the developer tool to check its attributes!
An id and class name may only contain lower case alphabets and numbers.
This is a blockquote.
This is another blockquote.
The engine can read metadata in your markdown files. Metadata section starts with --- and ends with ---. 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.
The engine uses yaml-rust 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.
Below is an example of a metadata section.
---
date: [2022, 8, 7]
author: Baehyunsol
---
# Header
Paragraph
MDxt doesn't support setext headers, and underscore emphasis. (but coming soon!)
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 multiline macro section for that.
A valid macro consists of A-Z, a-z, 0-9, =, ,, _, and . If a double square bracket contains invalid characters, that won't be parsed as a macro. Whitespaces and _s inside macros are ignored, and all the alphabet characters are lowered. That means [[box, no_border]] and [[box, n o border]] are exactly the same macro.
It has 18 colors: black, dark, gray, lightgray, white, red, green, blue, brown, slateblue, seagreen, aqua, emerald, violet, turquoise, pink, grassgreen, and gold.
| MDxt | html | output |
|---|---|---|
| [[black]]black[[/black]] | black | [[black]]black[[/black]] |
| [[dark]]dark[[/dark]] | dark | [[dark]]dark[[/dark]] |
| [[gray]]gray[[/gray]] | gray | [[gray]]gray[[/gray]] |
| [[lightgray]]lightgray[[/lightgray]] | lightgray | [[lightgray]]lightgray[[/lightgray]] |
| [[white]]white[[/white]] | white | [[white]]white[[/white]] |
| [[red]]red[[/red]] | red | [[red]]red[[/red]] |
| [[green]]green[[/green]] | green | [[green]]green[[/green]] |
| [[blue]]blue[[/blue]] | blue | [[blue]]blue[[/blue]] |
| [[brown]]brown[[/brown]] | brown | [[brown]]brown[[/brown]] |
| [[slateblue]]slateblue[[/slateblue]] | slateblue | [[slateblue]]slateblue[[/slateblue]] |
| [[seagreen]]seagreen[[/seagreen]] | seagreen | [[seagreen]]seagreen[[/seagreen]] |
| [[aqua]]aqua[[/aqua]] | aqua | [[aqua]]aqua[[/aqua]] |
| [[emerald]]emerald[[/emerald]] | emerald | [[emerald]]emerald[[/emerald]] |
| [[violet]]violet[[/violet]] | violet | [[violet]]violet[[/violet]] |
| [[turquoise]]turquoise[[/turquoise]] | turquoise | [[turquoise]]turquoise[[/turquoise]] |
| [[pink]]pink[[/pink]] | pink | [[pink]]pink[[/pink]] |
| [[grassgreen]]grassgreen[[/grassgreen]] | grassgreen | [[grassgreen]]grassgreen[[/grassgreen]] |
| [[gold]]gold[[/gold]] | gold | [[gold]]gold [[/gold]] |
It has 5 sizes: tiny, small, medium, big, and giant.
[[tiny]] tiny [[/tiny]] is rendered to <span class="size-tiny"> tiny </span>. The same rule is applied to the other sizes.
| MDxt | html | output |
|---|---|---|
| [[tiny]]tiny[[/tiny]] | tiny | [[tiny]]tiny[[/tiny]] |
| [[small]]small[[/small]] | small | [[small]]small[[/small]] |
| [[medium]]medium[[/medium]] | medium | [[medium]]medium[[/medium]] |
| [[big]]big[[/big]] | big | [[big]]big[[/big]] |
| [[giant]]giant[[/giant]] | giant | [[giant]]giant[[/giant]] |
It has 5 heights: tiny, small, medium, big and giant.
[[line height = tiny]]
Tiny lines\
Tiny lines\
Tiny lines
[[/line height]]
[[line height = tiny]]
Tiny lines
Tiny lines
Tiny lines
[[/line height]]
It has 3 alignments: left, right, and center.
[[center]] center [[/center]] is rendered to <span class="align-center"> center </span>. The same rule is applied to the other alignments.
Inline alignments are rendered to span tags and multi-lines are rendered to div. In most cases, span tags don't work with alignments. That means,
[[center]] This text is not centered.[[/center]]
[[center]]
This text is centered.
[[/center]]
[[highlight = red]] This text is highlighted! [[/highlight]] is rendered to <span class="highlight-red"> This text is highlighted! </span>. The same rule is applied to the other colors.
[[highlight = red]] This text is highlighted! [[/highlight]]
To see available colors, read the Colors section.
[[box]]A text in a box.[[/box]] is rendered to <span class="box">A text in a box.</span>.
[[box, no border]]A text in a box.[[/box]] is rendered to <span class="box no-border">A text in a box.</span>.
[[box]]
A paragraph in a box.
[[box]]
A paragraph in a box in a box.
[[/box]]
[[box, no border]]
A paragraph in a borderless box in a box.
[[/box]]
[[/box]]
[[box]]
A paragraph in a box.
[[box]]
A paragraph in a box in a box.
[[/box]]
[[box, no border]]
A paragraph in a borderless box in a box.
[[/box]]
[[/box]]
You can set box's width/height using attributes. See examples below.
[[box, width = giant, height = giant]]
A Giant Box
[[/box]]
[[box, width = tiny, height = tiny]]
A Tiny Box
[[/box]]
[[box, width = giant, height = giant]]
A Giant Box
[[/box]]
[[box, width = tiny, height = tiny]]
A Tiny Box
[[/box]]
There's another attribute: inline, which is a bit tricky. An inline [[box]] macro is rendered to a <span> tag, while a multiline [[box]] macro with an inline attribute is rendered to a <div> tag with an "inline" class.
[[tooltip]] macro generates a tooltip. See the example below.
[[tooltip=abc]] Hover over me! [[/tooltip]]
[^abc]: This is a tooltip message.
[[tooltip=abc]] Hover over me! [[/tooltip]]
A tooltip message's syntax is the same as footnote cite's. There are some limitations, though. You cannot nest a tooltip inside another tooltip.
| Table of Contents |
|-------------------|
|!![[collapsible]] |
| [[toc]] |
See how the above code is rendered, see here.
[[char = 44032]] is rendered to 가, which is [[char = 44032]].
[[char = copy]] is rendered to ©, which is [[char = copy]].
To see the list of available characters, visit here.
[[br]] is rendered to <br/> and [[blank]] is rendered to If you want multiple blanks, [[blank=3]] and [[br=4]] are your options.
[[icon = star]][[icon = tree]][[icon = terminal]]
You can embed SVG icons using the [[icon]] macro. The full documentation can be found here.
[[math]] sqrt{sup{a}{2} + sup{b}{2}} [[/math]] is rendered to [[math]] sqrt{sup{a}{2} + sup{b}{2}} [[/math]]. It renders the output in MathML.
To see the list of available math elements, visit here.
[[sidebar]]
[[toc]]
[[/sidebar]]
[[sidebar]]
[[toc]]
[[/sidebar]]
[[sidebar]] macro generates a sidebar. It only works as a multiline-macro. If multiple sidebars are declared, it only accepts the last one. In order for it to work properly, it requires a css and js. Check the css files in its repo.
If a paragraph has a macro and no other contents at all, the paragraph is rendered to a multiline macro.
[[red]]
These 3 paragraphs are
rendered to
red texts.
[[/red]]
As you see above, the first and the last paragraph only consist of a macro. The macro will be rendered to <div class="color-red">.
If an opening macro is declared as a multiline-macro, the closing one must also be multiline.
WIP
Backslashes (\) inside code spans and fenced code blocks are not escaped. All the other backslash characters are escape characters.
All the tab characters (\t) are converted to 4 whitespaces. All the newline characters except \n are ignored.