Document title


    A subtitle or whatever deemed appropriate to be displayed near the title

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

## Block quotations

Email-style indenting creates a block quotation:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown
> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
> tempor incididunt ut labore et dolore magna aliqua.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Only an empty line closes a block quotation. This requirement prevents a text editor's hard wrapping functionality from messing up blockquotes:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown
Here comes a famous passage:
> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Still in a block quotation...

No longer in a block quotation.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

Here comes a famous passage:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still in a block quotation...

No longer in a block quotation.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Block quotes are processed before most kinds of Foremark constructs (even HTML tags!). However, code blocks are processed earlier so that quotation marks inside a code fence are handled as intended: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown > This `` element does not > have the `>` sign in it. > > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown > > > > > > > ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

This <i> element does not have the > sign in it.

> >
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ## Fenced code blocks A line starting with three or more tildes (`~`) or backticks (`) starts a fenced code block. The fence can be followed by one or more keywords and the first one specifies the language: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Shell $ yes hello world ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ None output hello world hello world ... ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted $ yes hello world hello world hello world ... ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown ``````````````````````````````` You sometimes want backticks but that's okay too! ``````````````````````````````` ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted You sometimes want backticks but that's okay too! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ## HTML tags Foremark Text interprets well-formed HTML tags embedded in a text node as HTML tags. The criterions are chosen to be very strict in order to minimize the chance of misdetections. A HTML tag will not be interpreted as a HTML tag unless all of the following criterias are met: - It's not inside a code block or an inline code markup. (HTML tags are processed after code blocks and inline code markups.) - It must use a strictly valid XML syntax, which means: - No self-closing tags. `
` (empty-element tag) should be used in place of `
`. - `<`, `>`, and `"` inside an attribute must be escaped. - Every attribute must have a value. - Only the following XML entities are permitted inside: `&` `<` `>` `"` - It must not include a XML namespace in the tag name. - It must not contain any redundant whitespaces in the following places: - Between `<` or `` of a closing tag. - Between `<`, `>`, and `/`. - If it doesn't use an empty-element tag, then there must exist a matching closing tag. - The tag name and all attribute names match `/^[a-z][-a-z0-9]*$/` [^tag-name]. [^tag-name]: This is a subset of [XML NCName][]. It's quite restricted but still covers all standard HTML and Foremark XML elements. [XML NCName]: https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-NCName ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown Valid tag:
Extra whitespaces: < br / > (displayed as "< br / >") Self-closing:
(displayed as "
" unless there's `
`) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

Valid tag:
Extra whitespaces: < br / > (displayed as "< br / >") Self-closing: <br> (displayed as "<br>" unless there's </br>)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ !!! Note The conversion described in this section only applies to HTML tags *embedded as a textual content* (like most of the Foremark Text constructs). If HTML tags are not wrapped by ``, they will be parsed by the XHTML parser and converted to XHTML elements before the Foremark text processing takes place. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML Bold text <b>Bold text</b> Bold text ]]]> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ## Hyperlinks ### Normal hyperlinks ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown [This](https://www.example.com) is a normal Markdown hyperlink. [This](https://www.example.com "lo mupli" attr="value") has some attributes. https://www.example.com/ほげ test@example.com ipfs://QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco/wiki/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

This is a normal Markdown hyperlink.

This has some attributes.

https://www.example.com/ほげ test@example.com

ipfs://QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco/wiki/

myproto://www.example.com/lorem ipsum weird address@example.com

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ### Symbolic hyperlinks Link targets can be placed out-of-text: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown [**This**] [] is a symbolic hyperlink with an implied symbol name. [This] [example] is a symbolic hyperlink with an explicit symbol name. Also, notice that the link target can span across multiple lines. All link breaks within a link target are removed. [**This**]: https://www.example.com [example]: https:// www.example.com "title text here" attr="value" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

This is a symbolic hyperlink with an implied symbol name.

This is a symbolic hyperlink with an explicit symbol name. Also, notice that the link target can span across multiple lines. All link breaks within a link target are removed.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Symbol names are case-sensitive. A link target definition is only associated with the closest preceding symbolic hyperlink. A symbolic hyperlink is associated with a link target definition only if: - The hyperlink precedes the link target definition. - There is no hyperlink or link target definiton with an identical symbol name between the hyperlink and the link target definition. A symbolic hyperlink is not formed if no link target could be associated. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown [This][example] is not a hyperlink and is displayed as `[This][example]`. [This][example] is a hyperlink. [example]: https://www.example.com [example]: https://www.example.com/this-link-target-definition-is-ignored ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

[This][example] is not a hyperlink and is displayed as [This][example].

This is a hyperlink.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The association cannot be formed across the boundaries of ``. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML [This][example] is not a hyperlink and is displayed as `[This][example]`. [example]: https://www.example.com ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ## Media ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown The pudding face looks like ![alt text (optional)](https://derpicdn.net/img/2018/11/8/1877696/medium.png) or ![alt text (optional)][pudding]. [pudding]: https://derpicdn.net/img/2018/11/8/1877696/medium.png ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

The pudding face looks like or .

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Inline media are directly rendered as `` elements. Read [Symbolic hyperlinks](#foremarktext/hyperlinks/symbolichyperlinks) for more about symbolic hyperlinks (`[pudding]` in the above example). Use the block syntax to insert a media block using ``. The block syntax is distinguished by the colon at the end and the addition of an optional media label: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown The pudding faces are shown below: ![^][alttext](https://derpicdn.net/img/2018/11/8/1877696/medium.png): Media block (manually positioned) ![!!][alttext](https://derpicdn.net/img/2018/11/8/1877696/medium.png): Media block (manually positioned) but takes entire a row ![!Figure fig1][alttext](https://derpicdn.net/img/2018/11/8/1877696/medium.png): Figure (possibly automatically positioned) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

The pudding faces are shown below:

Media block (manually positioned)

Media block (manually positioned) but takes entire a row

Figure (possibly automatically positioned)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The first part (`[^]`, `[!Figure fig1]`) is based on [the floating contents block syntax](#foremarktext/floatingcontents). Sidenote labels (e.g., `[!basenameonly]`) may not be used. !!! Warning `![^][][symbol]:` (A media block with a symbolic name) is not supported. A media tag optionally include XML attributes: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown ![](https://derpicdn.net/img/2018/11/8/1877696/medium.png style="animation: 2000ms _2qw9KkueUdLlzZdwjgAKzl both infinite linear") ![^][](https://derpicdn.net/img/2018/11/8/1877696/medium.png style="animation: 2000ms _2qw9KkueUdLlzZdwjgAKzl both infinite linear"): Media caption ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

Media caption

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ## Floating contents Figures and sidenotes use a (somewhat) unified syntax: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown Let there be some paragraph text[^sidenote]. See [!!Figure fig1] as well as [!Table table]. [!図:fig2]も併せてご覧下さい。 .i ko zgana [!le pixra pe li mupli-pixra] [^]: This is displayed as a sidenote without numbering. [^sidenote]: Here comes the sidenote. Sidenotes are different from figures in the point that the first line is not treated specially as a caption. [!!Figure fig1]: Twily for dummies. ![](https://derpicdn.net/img/2013/8/4/391426/large.png) [!Table table]: Since the caption line was left empty, this table has no caption. | Elements of Harmony | Pillars of Old Equestria | |---------------------|--------------------------| | Honesty | Strength | | Kindness | Healing | | Laughter | Hope | | Generosity | Beauty | | Loyalty | Bravery | | Magic | Sorcery | [!図:fig2]: Yay. ![](https://derpicdn.net/img/2018/8/18/1809969/large.png) [!le pixra pe li mupli-pixra]: Empty figure. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The part surrounded by brackets is called a *label*. A label consists of the following components: - A preceding `^` (caret), `!` (exclamation mark), or `!!` (two exclamation marks) specify how the content should be layouted. - `^` — The default mode. On a large screen, the content is moved to the side margin. - `!` — Translated to `size="large"`. The content is not moved to the side margin and always occupies a row. - `!!` — Translated to `size="full"`. The content occupies the maximum available width (including the side margin). - An optional label identifier, which consists of: - An optional number prefix. This serves the purpose of identifying an independent counter for each figure type (e.g., figure/table), and as a text to be displayed before a number. There are two forms: - The space-delimited form like `[^Figure fig]` inserts a whitespace between the prefix and a number. - The non-space-delimited form like `[^図:fig]` does not insert a whitespace. This component is included in the floating element ID along with the base name. - A non-empty base name. A base name may not include `:` or a whitespace character. Therefore, a label `[^le pixra pe li mupli-pixra]` is interpreted as `le pixra pe li` + `mupli-pixra`[^jbopixra]. The number prefix and the base name together forms a label identifier. !!! Tip Although the figure syntax described here can be used for any kinds of contents, it's better to use the media block syntax if you just intend to display a media file as a figure. !!! Note: Differences from Markdeep - Figures and sidenotes use the unified system. Still, there is a dedicated syntax for figures. - Like Markdeep, sidenotes may contain multiple lines, but they must be indented to be included. - Sidenotes can contain multiple paragraphs. !!! TODO: Yet to be written about... - Find a way to place table captions above tables but not figure captions. And there is a syntax for citations, which is similar to that of sidenotes: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown Here's a citation [#A2018]. [#A2018]: From a casual conversation with Person A in 2018. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

Here's a citation .

From a casual conversation with Person A in 2018.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ !!! Tip The preceding `^`, `!`, and `#` symbols do not constitute the label identifier. so it's technically possible to refer to a figure with a different symbol. However, it's considered a bad practice because it makes it harder to find a tag using a text editor's search functionality. The following table summarizes all forms of labels: | Label | Reference | Definition | `size` | `id` | |-------------------|-----------|---------------|-----------------------|---------------| | `[!!]` | N/A | `` | `"full"` [!full-note] | note | | `[!]` | N/A | `` | `"large"` | note | | `[^]` | N/A | `` | | note | | `[!!endnote]` | ¹ | `` | `"full"` [!full-note] | `endnote` | | `[!endnote]` | ² | `` | `"large"` | `endnote` | | `[^sidenote]` | ³ | `` | | `sidenote` | | `[#cite]` | [cite] | `` | | `cite` | | `[!!Figure fig1]` | Figure 1 | `` | `"full"` | `Figure fig1` | | `[!Figure fig2]` | Figure 2 | `` | `"large"` | `Figure fig2` | | `[^Figure fig3]` | Figure 3 | `` | | `Figure fig3` | | `[!!図:fig2]` | 図1 | `` | `"full"` | `図:fig2` | | `[!図:fig2]` | 図2 | `` | `"large"` | `図:fig2` | | `[^図:fig3]` | 図3 | `` | | `図:fig3` | [!full-note]: Does not have an effect. Treated as `"large"`. - The **Label** column shows the raw source code. - All reference tags are translated into `` elements. The **Reference** column shows how a `` is displayed. - The contents of a floating element is wrapped by an element shown in the **Definition** column. This element has the attributes shown in the last two columns, **`size`** and **`id`**. Unreferenced labels are omitted from the output. [^jbopixra]: `«le pixra pe li □»` roughly means "the picture pertaining to number □" in [Lojban][]. It could be written more concisely as `«le li □ pixra»`, which isn't supported by Foremark at this point. [Lojban]: https://en.wikipedia.org/wiki/Lojban ## Diagrams Colon symbols create a diagram (``): ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Foremark The railroad diagram of Foremark figure label: ::: .---. ::: .->| |-. ::: .---------. .---------. / '---' \ .-----------. .------------. ::: o--> |"^][><\t"| ---> |"^][><\t"| -*-+ +-> |"^][><\t :"| ---- |"^][><\t :" | -+->o ::: '---------' ^ '---------' / \ .---. / '-----------' ^ '------------' / ::: \ / '->| : |-' \ / ::: '----------' '---' '-------------' ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

The railroad diagram of Foremark figure label:

.---. .->| |-. .---------. .---------. / '---' \ .-----------. .------------. o--> |"^][><\t"| ---> |"^][><\t"| -*-+ +-> |"^][><\t :"| ---- |"^][><\t :" | -+->o '---------' ^ '---------' / \ .---. / '-----------' ^ '------------' / \ / '->| : |-' \ / '----------' '---' '-------------' ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Alternative style: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Foremark ::::::::::::::::::::::::::::: :: ,-----, ​:: :: | | "le si'o kurfa" ​:: :: '-----' ​:: ::::::::::::::::::::::::::::: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted ,-----, ​ | | "le si'o kurfa" ​ '-----' ​ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ !!! Warning Markdeep-style diagrams are not supported. Diagram lines must not include other texts. ## Headings ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Markdown First level =========== Second level ------------ # First level ## Second level ### Third level #### Fourth level ##### Fifth level ... ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted

First level

Second level

First level

Second level

Third level

Fourth level

Fifth level

...

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ## Horizontal rules ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Foremark ----- - - - _____ _ _ _ ***** * * * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ XML converted





~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ## Lists The following types of lists are supported: | Marker | Type | CSS class | |-----------------|--------------------------|-------------| | `-` | Unordered list (`