JoliMarkdown Demo

This is an example paragraph with an example &lt;abbr&gt; tag for defining what is an <abbr title="Application Programming Interface">API</abbr>. And also with [a link](https://example.com).

The following tag is [<abbr title=”Broken abbr Tag>BROKEN</abbr>](/).


Example with a <abbr title="Wrongly Closed Abbr Tag">WCAT<abbr> (the closing tag misses the `/` char).

This is an example paragraph with an example &lt;abbr&gt; tag for defining what is an <abbr title="Application Programming Interface">API</abbr>. And also with [a link](https://example.com).

The following tag is [<abbr title="Broken abbr Tag">BROKEN</abbr>](/).

Example with a <abbr title="Wrongly Closed Abbr Tag">WCAT<abbr> (the closing tag misses the `/` char).</abbr></abbr>

<blockquote class="example" lang="en">
    <p>Some blockquote</p>
    <ul>
        <li>with a list</li>
        <li>and more</li>
    </ul>
</blockquote>

{.example lang="en"}
> Some blockquote
> 
> - with a list
> - and more

Paragraph 1

<br/>

Paragraph 2

<br>

Paragraph 3

<hr />

Paragraph 4

<hr>

Paragraph 5

Paragraph 1

<br/>

Paragraph 2

<br/>

Paragraph 3

---

Paragraph 4

---

Paragraph 5

<pre><code class="language-javascript">{
  "example": "example",
  "authors": [
    "John Appleseed <john at example.com>"
  ]
}</code></pre>

<pre><code class="language-javascript">{
  "example": "example",
  "authors": [
    "John Appleseed &lt;john at example.com&gt;"
  ]
}</code></pre>

```javascript
{
  "example": "example",
  "authors": [
    "John Appleseed "
  ]
}
```

```javascript
{
  "example": "example",
  "authors": [
    "John Appleseed <john at example.com>"
  ]
}
```

Inline <code>&lt;div&gt;</code> tag.

Inline `<div>` tag.

Hello,

Here is a <div> tag:

<div class="foo" style="color: red">
    Some paragraph text.
</div>

{.bar}
Some other paragraph text.





<article class="nested block elements">

<p>
over several lines
<span>should still work</span>
</p>

</article>


<p>
over several lines
<span>should still work</span>
</p>

Hello,

Here is a <div> tag:

{.foo style="color: red"}
Some paragraph text.

{.bar}
Some other paragraph text.

<article class="nested block elements">
<p>
over several lines
<span>should still work</span>
</p>
</article>

over several lines should still work

* There was a footnote[^1],
* There was another one[^2].

There was a regular chapter.

There was an image ![](https://example.com/image.png).

[^1]: First footnote with a **bold text**
[^2]: Second footnote with a <a href="https://example.com/">Link inside</a>, not the last element of the footnote.

- There was a footnote[^1],
- There was another one[^2].

There was a regular chapter.

There was an image ![](https://example.com/image.png).

[^1]: First footnote with a **bold text**
[^2]: Second footnote with a [Link inside](https://example.com/), not the last element of the footnote.

<div style="text-align:center;">
<img src="https://example.com/image.jpg" alt="Example" />
<!-- Some <strong>comment</strong> here -->
</div>

Some paragraph <!-- with a comment -->

<!--
A multiline
comment.
-->

{.example}
Some other paragraph.

Some paragraph<!-- with a comment -->

{style="text-align:center;"}
![Example](https://example.com/image.jpg)
<!-- Some <strong>comment</strong> here -->

Some paragraph <!-- with a comment -->

<!--
A multiline
comment.
-->

{.example}
Some other paragraph.

Some paragraph<!-- with a comment -->

Some paragraph

<img src="/image.jpg" alt="example" />

Some other paragraph.

<img src="https://google.com/image/with a space.jpg" alt="example" />

Some paragraph

![example](/image.jpg)

Some other paragraph.

![example](https://google.com/image/with%20a%20space.jpg)

[An example !](://www.internaldomain.com)

<a href="https://example.com/some non encoded url.html">example</a>

<a href="/">These are</a> <a href="/">two links</a> separated with a space.

<a href="/">This app</a><a href="/">ears to be</a> one link.

[An example !](/)

[example](https://example.com/some%20non%20encoded%20url.html)

[These are](/) [two links](/) separated with a space.

[This app](/)[ears to be](/) one link.

## Some title

Here goes a paragraph.

<table class="table-class">
<thead>
<tr>
<th>Tables</th>
<th align="center">Are</th>
<th align="right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
</tbody>
</table>

The above array should be parsed back to a markdown array, then converted to a HTML one.

## Some title

Here goes a paragraph.

{.table-class}
| Tables | Are | Cool |
|---|:-:|--:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |

The above array should be parsed back to a markdown array, then converted to a HTML one.

This is a list:

* First Item <img hello="yolo" src="/media/image.jpg" alt="Some alternate text with multiple words and some Accents : é à ç" class="yolo" style="display: block;" />
* Second item
  * Item 2.1
  * Item 2.2
    * Item 2.2.1 <img hello="yolo" src="/media/image.jpg" alt="Some alternate text with multiple words and some Accents : é à ç" class="yolo" style="display: block;" />
  * Item 2.3

Some paragraph

<ul class="this-is-a-second-list">
  <li>
    First item of the second list
    <ul class="this-is-another-list">
        <li>With an item</li>
    </ul>
  </li>
  <li>Second item of the second list</li>
</ul>

Some paragraph

* First Item

    <img hello="yolo" src="/media/image.jpg" alt="Some alternate text with multiple words and some Accents : é à ç" class="yolo" style="display: block;" />

* Second item

Some paragraph

<ul class="this-is-a-third-list">
  <li>
    <p>First item <code>with code</code> and an image after this</p>
    <p><img hello="yolo" src="/media/image.jpg" alt="Some alternate text with multiple words and some Accents : é à ç" class="yolo" style="display: block;" /></p>
  </li>
  <li>Second item of the second list</li>
</ul>

Some paragraph

- A first list item
- Another one
- A last one
And it contains an additional sentence!

This is a list:

- First Item ![Some alternate text with multiple words and some Accents : é à ç](/media/image.jpg){hello="yolo" .yolo style="display: block;"}
- Second item
  - Item 2.1
  - Item 2.2
    - Item 2.2.1 ![Some alternate text with multiple words and some Accents : é à ç](/media/image.jpg){hello="yolo" .yolo style="display: block;"}
  - Item 2.3

Some paragraph

{.this-is-a-second-list}
- First item of the second list
  {.this-is-another-list}
  - With an item
- Second item of the second list

Some paragraph

- First Item
  ![Some alternate text with multiple words and some Accents : é à ç](/media/image.jpg){hello="yolo" .yolo style="display: block;"}
- Second item

Some paragraph

{.this-is-a-third-list}
- First item `with code` and an image after this
  ![Some alternate text with multiple words and some Accents : é à ç](/media/image.jpg){hello="yolo" .yolo style="display: block;"}
- Second item of the second list

Some paragraph

- A first list item
- Another one
- A last one
  And it contains an additional sentence!