HTML-flavoured markdown-inspired client-side renderer
Markout borrows a lot of nice features from Markdown, but uses a completely different rendering architecture that makes it easy to also leverage builtin features of the actual HTML renderer.
While the engine caters primarily to the richer features of the DOM, it does so with clear intent to make it work in a shell-based environment longer-term.
Current experimental efforts divide the rendering into two phases, the first portion uses a custom tokenizer that captures HTML and other notation, yielding the static content (HTML for now) output, the second portion uses a custom element and real-time DOM operations to yield the dynamic content (HTML for now) tailored to every aspect of the user experience.
Intended for Markout viewing
- - Inline Styles
-
Declarative
-
<span color:=red>one</span>one
-
-
Italics
-
one *two* three— "two"one two three -
one*two*three— "two"onetwothree -
_one_*two*_three_— allonetwothree -
one\*two\*three— escapeone*two*three -
one_two_three— sicone_two_three
-
-
Bold
-
one **two** three— "two"one two three -
one**two**three— "two"onetwothree -
**one****two****three**— allone**two**three -
one\**two\**three— escapeone**two**three -
one\*\*two\*\*three— escapeone**two**three
-
-
Bold + Italics
-
one **_two_ three**— "two"one two three -
**_one_****_two_****_three_**— allone**two**three
-
-
Strikethrough
-
one ~~two~~ three— "two"onetwothree -
one~~two~~three— "two"onetwothree -
~~one~~~~two~~~~three~~— allone~~~~two~~~~three -
one\~~two\~~three— sicone~~two~~three
-
- - Lists
- Unordered Lists
- Ordered Lists
- Checklists
- Nested Checklist
- Hybrid Lists
- Unordered
- Ordered
- Checked
- - Indeterminate
- Unchecked
- Dynamic Checklists
- Recursive Autofill
- Partial when unchecked
- Unchecked when all unchecked
- Checked when all checked
- Recursive Autofill
- abc
- efg
- Heading groups are created from well-chained heading blocks
- ATX headings
- HTML headings
- Title are implicitly defined from leading heading(s)
- Title are explicitly defined from first
<title>tag
2. abc
a. 123
3. efga. 123
# Heading 1
## Subheading
---
## Heading 2
### Subheading
#### Subsubheading
---
# Heading 1
### Heading 3
---
# Heading 1
## Heading 2# Heading 1
---
## Heading 2
---
### Heading 3
---
#### Heading 4
---
##### Heading 5
---
###### Heading 6
---
####### No Heading 7<h1>Heading 1</h1>
---
<h2>Heading 2</h2>
---
<h3>Heading 3</h3>
---
<h4>Heading 4</h4>
---
<h5>Heading 5</h5>
---
<h6>Heading 6</h6>
---
<h7>No Heading 7</h7># Hello World <!-- Title ---># Hello World
<title>Hello World!</title> <!-- Title --->
<title>Hello World!!</title>