EYHN / echo

echo

基于 markdown-it 的颜艺 markdown 解析器

特殊操作

下面是本解析器有异于标准 markdown 的特殊操作。

ruby

markdown:

*马猴烧酒^まほうしょうじょ*

*滑稽^zui qiang*

HTML:

<p><ruby>马猴烧酒<rp></rp><rt>まほうしょうじょ</rt><rp></rp></ruby></p>
<p><ruby>滑稽<rp></rp><rt>zui qiang</rt><rp></rp></ruby></p>

范例:

马猴烧酒まほうしょうじょ

滑稽zui qiang

sub

markdown:

H~2~0

HTML:

<p>H<sub>2</sub>0</p>

范例:

H₂0

sup

markdown:

29^th^

HTML:

<p>29<sup>th</sup></p>

范例:

29^th

footnote

markdown:

Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

HTML:

<p>Here is a footnote reference,<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> and another.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup></p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Here is the footnote. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Here’s one with multiple blocks.</p>
<p>Subsequent paragraphs are indented to show that they
belong to the previous footnote. <a href="#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>

范例:

Here is a footnote reference,^[1] and another.^[2]

---

1. Here is the footnote. ↩︎

2. Here’s one with multiple blocks.

   Subsequent paragraphs are indented to show that they belong to the previous footnote. ↩︎

deflist

markdown:

Term 1

:   Definition 1

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

Term 1
    ~ Definition 1

  Term 2
    ~ Definition 2a
    ~ Definition 2b

HTML:

<dl>
<dt>Term 1</dt>
<dd>
<p>Definition 1</p>
</dd>
<dt>Term 2 with <em>inline markup</em></dt>
<dd>
<p>Definition 2</p>
<pre><code>  { some code, part of Definition 2 }
</code></pre>
<p>Third paragraph of definition 2.</p>
</dd>
<dt>Term 1</dt>
<dd>
<p>Definition 1</p>
</dd>
<dt>Term 2</dt>
<dd>
<p>Definition 2a</p>
</dd>
<dd>
<p>Definition 2b</p>
</dd>
</dl>

范例:

Term 1

Definition 1

Term 2 with inline markup

Definition 2

  { some code, part of Definition 2 }

Third paragraph of definition 2.

Term 1

Definition 1

Term 2

Definition 2a

Definition 2b

abbr

markdown:

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification
is maintained by the W3C.

HTML:

<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification
is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>

范例:

The HTML specification is maintained by the W3C.

emoji

markdown:

:) :(

HTML:

<p><img class="emoji" draggable="false" alt="😃" src="https://twemoji.maxcdn.com/2/72x72/1f603.png"/> <img class="emoji" draggable="false" alt="😦" src="https://twemoji.maxcdn.com/2/72x72/1f626.png"/></p>

范例:

container

markdown:

::: warning
*here be dragons*
:::

HTML:

<div class="warning">
<em>here be dragons</em>
</div>

范例:

here be dragons

ins

markdown:

++inserted++

HTML:

<p><ins>inserted</ins></p>

范例:

inserted

mark

markdown:

==marked==

HTML:

<p><mark>marked</mark></p>

范例:

marked

anchor

markdown:

# 123

HTML:

<h1 id="123">123 <a class="header-anchor" href="#123" aria-hidden="true">¶</a></h1>

范例:

123 ¶

highlight

详情见 highlight.js

linkify

markdown:

https://github.com/EYHN/echo

HTML:

<p><a href="https://github.com/EYHN/echo">https://github.com/EYHN/echo</a></p>

范例:

https://github.com/EYHN/echo

typographer

markdown:

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

HTML:

<p>© © ® ® ™ ™ § § ±</p>

范例:

© © ® ® ™ ™ § § ±

task-lists

markdown:

- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)
- [x] Mars
- [ ] Jupiter
- [ ] Saturn
- [ ] Uranus
- [ ] Neptune
- [ ] Comet Haley

HTML:

<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> Mercury</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> Venus</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> Earth (Orbit/Moon)</li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> Mars</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> Jupiter</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> Saturn</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> Uranus</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> Neptune</li>
<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> Comet Haley</li>
</ul>

范例:

• Mercury
• Venus
• Earth (Orbit/Moon)
• Mars
• Jupiter
• Saturn
• Uranus
• Neptune
• Comet Haley