A simple and powerful markup language
[cite Orange markup language] is an "original" markup language,
design to replace both Markdown and HTML5.
[="π Story"
After looking for some alternative to Markdown, I discover PML
(Practical Markup Language) and [_ IMO] it's the best designed markup
language so far.
But I found it's a bit waste opportunity to have such a beautiful syntax
that can directly harvest the raw power of HTML5 but chose not to do so.
And although PML's way of doing list and table is more consistent
to it's syntax, I just miss the simple Markdown way.
This motivates me to create a new markup language but with a different
approac: by using HTML5 as the core, change the syntax to PML, add some
features from Markdown, and we have [* Orange markup language!]
]
[="β¨ Features"
- With the raw power of HTML5 plus:
- Beautiful syntax inspired by PML.
- Tag's aliases.
- Can be integrated with web frameworks (WIP).
- Come with many Markdown's convenient features:
- Code spans.
- Simple lists.
- Simple tables.
]Here are some comparison:
| Markdown | AsciiDoc | HTML | ORML | Style |
|---|---|---|---|---|
**...** or __...__ |
*...* |
<b>...</b> |
[b ...] |
Bold |
*...* or _..._ |
_..._ |
<i>...</i> |
[i ...] |
Italic |
<u>...</u> |
[.underline]#...# |
<u>...</u> |
[u ...] |
UΜ²nΜ²dΜ²eΜ²rΜ²lΜ²iΜ²nΜ²eΜ²dΜ² |
~~...~~ |
[.line-through]#...# |
<s>...</s> |
[s ...] |
|
<mark>...</mark> |
#...# |
<mark>...</mark> |
[% ...] |
ππ’π π‘π₯π’π π‘πππ |
<sub>...</sub> |
~...~ |
<sub>...</sub> |
[, ...] |
subscripted |
<sup>...</sup> |
^...^ |
<sup>...</sup> |
[^ ...] |
superscripted |
`...` |
`...` |
<pre>...</pre> |
[$ ...] |
Monospace |
After a while I start to realize that maybe we don't need another markdown language anymore:
- For developer, HTML is the best choice because HTML's tags syntax is very clear compared to ORML.
- For causal writing usage, Markdown and AsciiDoc is good enough (even more prefer than ORML).
This document attempts to specify Orange markup language syntax.
Orange markup language will often be referred to as ORML in this document.
ORML is basically HTML5 under the hood. So every syntaxes, elements and rulesets (even & character reference) of HTML will be applied to ORML but with changes declared below.
An HTML element is defined by a start tag, some content , and an end tag (some time not require):
- A start tag open with a
<character follow by the tag name and optionally with some attributes, then end with a>character. An end tag is the same but open with</.- An attribute start with the attribute name follow by a
=character then some value wrapped by"/'characters.Examples:
<tagname> <tagname>content</tagname> <tagname attribute="value" more-attribute="value"></tagname> <tagname attribute="value" more-attribute="value">content</tagname>
An ORML element is defined by a tag with some context inside it:
- A tag open with a
[character follow by the tag name and optionally with some attributes then/or some context, and end with a]character. - An attribute start with the attribute name follow by a
=character then some value wrapped by"/'characters. - If a tag content any attribute, the attributes must be separate from the context by a vertical bar
|.
Examples:
[tagname]
[tagname content]
[tagname attribute="value" more-attribute="value"]
[tagname attribute="value" more-attribute="value" | content]
The following HTML tags have been removed or replaced on ORML:
| HTML tags | ORML tags | Description |
|---|---|---|
<!DOCTYPE> |
Remove | Defines the document type |
<html>...</html> |
Remove | Defines an HTML document |
<!--...--> |
[# ...] |
Defines a comment |
To make ORML more readable, the following HTML tags have aliases (and it's the prefer way to write those tags):
NOTE: Some of the aliases are strict, meaning that you have to write it in exactly that specific way.
| HTML tags | ORML alias tags | Description |
|---|---|---|
<strong>...</strong> |
[* ...] |
Defines important text |
<em>...</em> |
[_ ...] |
Defines emphasized text |
<ins>...</ins> |
[+ ...] |
Defines text that has been inserted into a document |
<del>...</del> |
[- ...] |
Defines text that has been deleted from a document |
<mark>...</mark> |
[% ...] |
Defines marked/highlighted text |
<pre>...</pre> |
[$ ...] |
Defines monospace text (preformatted text) |
<small>...</small> |
[. ...] |
Defines smaller text |
<sub>...</sub> |
[, ...] |
Defines subscripted text |
<sup>...</sup> |
[^ ...] |
Defines superscripted text |
<hr> (<hr>...</hr>) |
[---] ([--- ...]) |
Defines thematic change in the content |
<span>...</span> |
[; ...] |
Defines section in a document |
<span class="spoiler">...</span> |
[? ...] |
Defines spoiler text |
<input type="checkbox" disabled=""> |
[ ] strict |
Defines unchecked checkbox |
<input type="checkbox" disabled="" checked=""> |
[@] strict |
Defines checked checkbox |
<a href="URL">...</a> or <a href='URL'>...</a> |
["URL" ...] or ['URL' ...] |
Defines hyperlink |
If the hyperlink alias tag doesn't have any content, it will use the URL as content:
- If it's also a cross reference, it will remove the first
#character of the content and wrapped by a square brackets ([,]).- If it's also a email address (start with
mailto:), it will trimmailto:and the following whitespaces at the beginning of the content.
Tag: [="HEADER" ...]
Inspired by PML's Chapter node,
chapter tag is an alias for the HTML's <section> tag with a definedable header:
- The header level will automatically be assigned by how many chapter tag is the current one in plus one.
- If there is a chapter tag inside more than 5 chapter tags, it's will be header level will alway be 6.
- Header can include any inline elements like tags, autolinks, code spans...
Examples:
[section
[h1 Title]
[section
[h2 [_ About]]
Some introduction...
]
[section
[h2 Tutorial]
How to...
[section
[h3 The `print()` command]
Information...
]
]
]
Can be better write as:
[="Title"
[="[_ About]"
Some introduction...
]
[="Tutorial"
How to...
[="The `print()` command"
Information...
]
]
]
To make the language easier to read and write, ORML include many feature from GFM.
Because ORML doesn't support indented code blocks so every element (fenced code blocks, lists, tables, ...) can be indented freely (by it own rule) without become a code block.
ORML support autolinks (extension) (not the original autolinks) exactly like from GFM.
Examples:
You can just type https://github.com/NNBnh and it will turn in to a link.
|
You can just type https://github.com/NNBnh and it will turn in to a link. |
ORML support fenced code blocks from GFM but with the following difference:
- A code fence is a sequence of at least three consecutive
`characters (and not~characters). - The line with the closing code fence may optionally contain some text that start with the
.character following the code fence; this is trimmed of leading and trailing whitespace and called the info string (and it may not contain any`characters).
ORML support code spans from GFM but with the following difference:
- The closing backtick strings of a code spans may optionally contain some text that start with the
.character that function like fenced code blocks's info string
Examples:
This is a code span: `print("Hello, World!")`.python
This is a code block:
```
string = "y"
while True:
print(string)
```.python
|
This is a code span: This is a code block: string = "y"
while True:
print(string) |
ORML support list items and lists from GFM but with the following difference:
- A bullet list marker is a
-character (and not a+nor a*character). - An ordered list marker is a sequence of 1β9 arabic digits
0-9, followed by a.character (and not followed by a)character).
Examples:
Unordered list items:
- Start with a `-` character:
- Not with `+`.
- Nor with `*`.
- Very simple
Ordered list items:
1. Make every entry clarify
2. Look professional
|
Unordered list items:
Ordered list items:
|
ORML support tables from GFM but with the following difference:
- A table is an arrangement of data with rows and columns, consisting of at least one data rows, some header rows or/and footer rows (both are optional) separate by a delimiter row.
- The delimiter row consists of cells whose only content are hyphens
-, and optionally, a leading or trailing period.(and not colon:), or both, to indicate left, right, or center alignment respectively.- If there is no delimiter row in the table, all rows are data.
- If there is one delimiter row in the table, all rows above the delimiter row are header, the rest are data.
- If there is two or more delimiter row in the table, all rows above the first delimiter row are header, all rows below the last delimiter row are footer, the rest are data.
Except inside code spans or fenced code blocks, any punctuation or space character preceded by a backslash will be treated literally, even if it would normally indicate formatting.
| Escapes | Charater | Name |
|---|---|---|
\\ |
\ |
Backslash |
\& |
& |
Ampersand |
| β | ||
\[ |
[ |
Left square brackets |
\] |
] |
Right square brackets |
\' |
' |
Apostrophe |
\" |
" |
Quotation marks |
| β | ||
\` |
` |
Grave accent |
| β | ||
\- |
- |
Hyphen/minus |
\. |
. |
Period |
| β | ||
\| |
| |
Vertical bar |
Special thanks to:
- PML (Practical Markup Language) by Christian Neumanns
- HTML5 (HyperText Markup Language) by W3C
- GitHub Flavored Markdown by Github
- Pandoc by John MacFarlane
Made with β€οΈ by NNB
