Page Tabs

Syntax of page tabs as follow:

--- Title of sidebar

    The brief introduction of the article.

--- [#id.classname1.classname2 title of page](doc path of page)

--- [#id.classname1.classname2 title of page](doc path of page)

...

1. Example

:header[![[../logo.png]][Showdowns Features](https://jhuix.github.io/showdowns)]{.doc-title.align-center.header-shadow.title1}!!

--- :a[Reference]{.nav-link href="."}

    <br/>![Showdowns](../logo.png)

    [Showdowns](https://github.com/jhuix/showdowns) is a lib that make markdown to html with some extensions of showdown.js.

    :::attention[Please pay more attention to us]
    If you think the showdowns library can help you or also hope to encourage the author, click on the top right corner to give me a [Star](https://github.com/jhuix/showdowns)⭐️.
    :::

    Showdowns Markdown Syntax, refer to the document -- [Showdowns Features](https://jhuix.github.io/showdowns).

    The showdowns lib supports the following diagram rendering:

    :::tip[Diagram Render]

    | Diagram | Render |
    | ------- | :------: |
    | ABCJS | ✔ |
    | AntV infographic| ✔ |
    | Echarts | ✔ |
    | Flowchart | ✔ |
    | Gnuplot | Registration rendering method |
    | LaTex | Registration rendering method |
    | kroki | https://kroki.io |
    | Mermaid | ✔ |
    | Plantuml | http://plantuml.com |
    | Plotly | ✔ |  
    | Railroad | ✔ |
    | Vega | ✔ |
    | Viz | ✔ |
    | WaveDrom | ✔ |    
    | ZenUML for mermaid | ✔ |
    | ZenUML | ✔ |

    :::

--- [.page-icons.icon-info Markdown syntax](../Showdown's-Markdown-syntax.md)
--- [.page-icons.icon-pages Page Tabs](../pages/page-tabs.md)
--- [.page-icons.icon-admontions Directives](../pages/directives.md)
--- [.page-icons.icon-contenttabs Content Tabs](../pages/content-tabs.md)
--- [.page-icons.icon-toc Table Of Content](../pages/toc.md)
--- [.page-icons.icon-tables Tables](../pages/tables.md)
--- [.page-icons.icon-images Images](../pages/images.md)
--- [.page-icons.icon-footnotes Footnotes](../pages/footnotes.md)
--- [.page-icons.icon-codeblocks Code Blocks](../pages/codeblocks.md)
--- [.page-icons.icon-math Math](../pages/math.md)
--- [.page-icons.icon-css CSS](../pages/css.md)
--- [.page-icons.icon-mermaid Mermaid](../pages/mermaid.md)
--- [.page-icons.icon-uml ZenUML](../pages/zenuml.md)
--- [.page-icons.icon-uml Plantuml](../pages/plantuml.md)
--- [.page-icons.icon-diagrams AntV Infographic](../pages/antv.md)
--- [.page-icons.icon-diagrams Echarts](../pages/echarts.md)
--- [.page-icons.icon-diagrams Flowchart](../pages/flowchart.md)
--- [.page-icons.icon-diagrams GraphViz](../pages/graphviz.md)
--- [.page-icons.icon-diagrams Network Sequence](../pages/network.md)
--- [.page-icons.icon-diagrams Railroad](../pages/railroad.md)
--- [.page-icons.icon-diagrams WaveDrom](../pages/wavedrom.md)
--- [.page-icons.icon-diagrams Vega](../pages/vega.md)
--- [.page-icons.icon-diagrams Plotly](../pages/plotly.md)
--- [.page-icons.icon-diagrams Abc](../pages/abc.md)

Showdowns Features

Showdown's Markdown syntax

1. Table of contents

• Introduction
• Paragraphs
• Headings
  • Atx Style
  • Setext style
  • Header IDs
• Blockquotes
• Bold and Italic
• Strikethrough
• Emojis
• Code formatting
  • Inline formats
  • Multiple lines
• Lists
  • Unordered lists
  • Ordered lists
  • TaskLists (GFM Style)
  • List syntax
  • Nested blocks
  • Nested lists
  • Nested code blocks
• Links
  • Simple
  • Inline
  • Reference Style
• Images
  • Inline
  • Reference Style
  • Image dimensions
  • Base64 encoded images
• Tables
• Mentions
• Handling HTML in markdown documents
• Escaping entities
  • Escaping markdown entities
  • Escaping html tags
• Known differences and Gotchas

2. Introduction

Showdown was created by John Fraser as a direct port of the original parser written by markdown's creator, John Gruber. Although Showdown has evolved since its inception, in "vanilla mode", it tries to follow the original markdown spec (henceforth refereed as vanilla) as much as possible. There are, however, a few important differences, mainly due to inconsistencies in the original spec, which we addressed following the author's advice as stated in the markdown's "official" newsletter.

Showdown also support "extra" syntax not defined in the original spec as opt-in features. This means new syntax elements are not enabled by default and require users to enable them through options.

This document provides a quick description the syntax supported and the differences in output from the original markdown.pl implementation.

3. Paragraphs

Paragraphs in Showdown are just one or more lines of consecutive text followed by one or more blank lines.

On July 2, an alien mothership entered Earth's orbit and deployed several dozen 
saucer-shaped "destroyer" spacecraft, each 15 miles (24 km) wide.

On July 3, the Black Knights, a squadron of Marine Corps F/A-18 Hornets, 
participated in an assault on a destroyer near the city of Los Angeles.

The implication of the “one or more consecutive lines of text” is that Showdown supports
“hard-wrapped” text paragraphs. This means the following examples produce the same output:

A very long line of text

A very
long line
of text

If you DO want to add soft line breaks (which translate to <br> in HTML) to a paragraph,
you can do so by adding 3 space characters to the end of the line ().

You can also force every line break in paragraphs to translate to <br> (as Github does) by
enabling the option simpleLineBreaks.

4. Headings

4.1. Atx Style

You can create a heading by adding one or more # symbols before your heading text. The number of # you use will determine the size of the heading. This is similar to atx style.

# The largest heading (an <h1> tag)
## The second largest heading (an <h2> tag)
…
###### The 6th largest heading (an <h6> tag)

The space between # and the heading text is not required but you can make that space mandatory by enabling the option requireSpaceBeforeHeadingText.

You can wrap the headings in #. Both leading and trailing # will be removed.

## My Heading ##

If, for some reason, you need to keep a leading or trailing #, you can either add a space or escape it:

# # My header # #

#\# My Header \# #

4.2. Setext style

You can also use setext style headings, although only two levels are available.

This is an H1
=============

This is an H2
-------------

Note:
In live preview editors, when a paragraph is followed by a list it can cause an awkward effect.

![awkward effect][]

You can prevent this by enabling the option smoothPreview.

4.3. Header IDs

Showdown generates bookmarks anchors in titles automatically, by adding an id property to an heading.

# My cool header with ID

<h1 id="mycoolheaderwithid">My cool header with ID</h1>

This behavior can be modified with options:

• noHeaderId disables automatic id generation;
• ghCompatibleHeaderId generates header ids compatible with github style (spaces are replaced with dashes and a bunch of non alphanumeric chars are removed)
• prefixHeaderId adds a prefix to the generated header ids (either automatic or custom).
• headerLevelStart sets the header starting level. For instance, setting this to 3 means that # header will be converted to <h3>.

Read the README.md for more info

5. Blockquotes

You can indicate blockquotes with a >.

In the words of Abraham Lincoln:

> Pardon my french

Blockquotes can have multiple paragraphs and can have other block elements inside.

> A paragraph of text
>
> Another paragraph
>
> - A list
> - with items

6. Bold and Italic

You can make text bold or italic.

*This text will be italic*
**This text will be bold**

Both bold and italic can use either a * or an _ around the text for styling. This allows you to combine both bold and italic if needed.

**Everyone _must_ attend the meeting at 5 o'clock today.**

7. Strikethrough

With the option strikethrough enabled, Showdown supports strikethrough elements.
The syntax is the same as GFM, that is, by adding two tilde (~~) characters around
a word or groups of words.

a ~~strikethrough~~ element

a strikethrough element

8. Emojis

Since version 1.8.0, showdown supports github's emojis. A complete list of available emojis can be foun here.

this is a :smile: smile emoji

this is a 😄 smile emoji

9. Code formatting

9.1. Inline formats

Use single backticks (`) to format text in a special monospace format. Everything within the backticks appear as-is, with no other special formatting.

Here's an idea: why don't we take `SuperiorProject` and turn it into `**Reasonable**Project`.

<p>Here's an idea: why don't we take <code>SuperiorProject</code> and turn it into <code>**Reasonable**Project</code>.</p>

9.2. Multiple lines

To create blocks of code you should indent it by four spaces.

this is a piece
    of
    code

If the options ghCodeBlocks is activated (which is by default), you can use triple backticks (```) to format text as its own distinct block.

Check out this neat program I wrote:

```
x = 0
x = 2 + 2
what is x
```

10. Lists

Showdown supports ordered (numbered) and unordered (bulleted) lists.

10.1. Unordered lists

You can make an unordered list by preceding list items with either a *, a - or a +. Markers are interchangeable too.

* Item
+ Item
- Item

10.2. Ordered lists

You can make an ordered list by preceding list items with a number.

1. Item 1
2. Item 2
3. Item 3

It’s important to note that the actual numbers you use to mark the list have no effect on the HTML output Showdown produces. So you can use the same number in all items if you wish to.

10.3. TaskLists (GFM Style)

Showdown also supports GFM styled takslists if the tasklists option is enabled.

- [x] checked list item
 - [ ] unchecked list item

• checked list item
• unchecked list item

10.4. List syntax

List markers typically start at the left margin, but may be indented by up to three spaces.

* this is valid
   * this is too

List markers must be followed by one or more spaces or a tab.

To make lists look nice, you can wrap items with hanging indents:

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing.

But if you want to be lazy, you don’t have to

If one list item is separated by a blank line, Showdown will wrap all the list items in <p> tags in the HTML output.
So this input:

* Bird

* Magic
* Johnson

Results in:

<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
<li><p>Johnson</p></li>
</ul>

This differs from other markdown implementations such as GFM (github) or commonmark.

10.5. Nested blocks

List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:

1.  This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

2.  Suspendisse id sem consectetuer libero luctus adipiscing.

This is valid for other block elements such as blockquotes:

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

or event other lists.

10.6. Nested lists

You can create nested lists by indenting list items by four spaces.

1.  Item 1
    1. A corollary to the above item.
    2. Yet another point to consider.
2.  Item 2
    * A corollary that does not need to be ordered.
    * This is indented four spaces
    * You might want to consider making a new list.
3.  Item 3

This behavior is consistent with the original spec but differs from other implementations such as GFM or commonmark. Prior to version 1.5, you just needed to indent two spaces for it to be considered a sublist.
You can disable the four spaces requirement with option disableForced4SpacesIndentedSublists

To nest a third (or more) sublist level, you need to indent 4 extra spaces (or 1 extra tab) for each level.

1.  level 1
    1.  Level 2
        *   Level 3
    2.  level 2
        1.  Level 3
1.  Level 1

10.7. Nested code blocks

You can nest fenced codeblocks the same way you nest other block elements, by indenting by fours spaces or a tab:

1.  Some code:

    ```js
    var foo = 'bar';
    console.log(foo);
    ```

To put a indented style code block within a list item, the code block needs to be indented twice — 8 spaces or two tabs:

1.  Some code:

    var foo = 'bar';
    console.log(foo);

11. Links

11.1. Simple

If you wrap a valid URL or email in <> it will be turned into a link whose text is the link itself.

link to <http://www.google.com/>

this is my email <somedude@mail.com>

In the case of email addreses, Showdown will also perform a bit of randomized decimal and hex entity-encoding to help obscure your address from address-harvesting spambots.
You can disable this obfuscation setting encodeEmails option to false.

With the option simplifiedAutoLink enabled, Showdown will automagically turn every valid URL it finds in the text body to links for you, without the need to wrap them in <>.

link to http://www.google.com/

this is my email somedude@mail.com

11.2. Inline

You can create an inline link by wrapping link text in brackets ( [ ] ), and then wrapping the link in parentheses ( ( ) ).

For example, to create a hyperlink to github.com/showdownjs/showdown, with a link text that says, Get Showdown!, you'd write this in Markdown: [Get Showdown!](https://github.com/showdownjs/showdown).

11.3. Reference Style

You can also use the reference style, like this:

this is a [link to google][1]

[1]: www.google.com

Showdown also supports implicit link references:

this is a link to [google][]

[google]: www.google.com

12. Images

Markdown uses an image syntax that is intended to resemble the syntax for links, also allowing for two styles: inline and reference.

12.1. Inline

Inline image syntax looks like this:

![Alt text](url/to/image)

![Alt text](url/to/image "Optional title")

That is:

• An exclamation mark: !;
• followed by a set of square brackets, containing the alt attribute text for the image;
• followed by a set of parentheses, containing the URL or path to the image, and an optional title attribute enclosed in double or single quotes.

12.2. Reference Style

Reference-style image syntax looks like this:

![Alt text][id]

Where “id” is the name of a defined image reference. Image references are defined using syntax identical to link references:

[id]: url/to/image  "Optional title attribute"

Implicit references are also supported in images, similar to what happens with links:

![showdown logo][]

[showdown logo]: http://showdownjs.github.io/demo/img/editor.logo.white.png

12.3. Image dimensions

When the option parseImgDimension is activated, you can also define the image dimensions, like this:

![Alt text](url/to/image =250x250 "Optional title")

or in reference style:

![Alt text][id]

[id]: url/to/image =250x250

12.4. Base64 encoded images

Showdown also supports Base64 encoded images, both reference and inline style.
Since version 1.7.4, wrapping base64 strings, which are usually extremely long lines of text, is supported.
You can add newlines arbitrarily, as long as they are added after the , character.

inline style

![Alt text](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7l
jmRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAY
SURBVBhXYwCC/2AAZYEoOAMs8Z+BgQEAXdcR7/Q1gssAAAAASUVORK5CYII=)

reference style

![Alt text][id]

[id]:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7l
jmRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7D
AcdvqGQAAAAYSURBVBhXYwCC/2AAZYEoOAMs8Z+BgQEAXdcR7/Q1gssAAAAASUVORK5CYII=

Please note that with reference style base64 image sources, regardless of "wrapping", a double newline is needed after the base64 string to separate them from a paragraph or other text block (but references can be adjacent).

wrapped reference style

![Alt text][id]
![Alt text][id2]

[id]:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7l
jmRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7D
AcdvqGQAAAAYSURBVBhXYwCC/2AAZYEoOAMs8Z+BgQEAXdcR7/Q1gssAAAAASUVORK5CYII=
[id2]:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7l
jmRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7D
AcdvqGQAAAAYSURBVBhXYwCC/2AAZYEoOAMs8Z+BgQEAXdcR7/Q1gssAAAAASUVORK5CYII=

this text needs to be separated from the references by 2 newlines

13. Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Showdown supports them by turning on the option tables.

Colons can be used to align columns.

In the new version, the outer pipes (|) are optional, matching GFM spec.

You also don't need to make the raw Markdown line up prettily.

You can also use other markdown syntax inside them.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| **col 3 is**  | right-aligned | $1600 |
| col 2 is      | *centered*    |   $12 |
| zebra stripes | ~~are neat~~  |    $1 |

14. Mentions

Showdown supports github mentions by enabling the option ghMentions. This will turn every @username into a link to their github profile.

hey @tivie, check this out

Since version 1.6.2 you can customize the generated link in mentions with the option ghMentionsLink.
For instance, setting this option to http://mysite.com/{u}/profile:

<p>hey <a href="http://mysite.com/tivie/profile">@tivie</a>, check this out</p>

15. Handling HTML in markdown documents

Showdown, in most cases, leaves HTML tags alone, leaving them untouched in the output document.

some markdown **here**
<div>this is *not* **parsed**</div>

<p>some markdown <strong>here</strong></p>
<div>this is *not* **parsed**</div>

However, there are exceptions to this. With <code> and <pre><code> tags, their contents are always escaped.

some markdown **here** with <code>foo & bar <baz></baz></code>

<p>some markdown <strong>here</strong> with <code>foo &amp; bar &lt;baz&gt;&lt;/baz&gt;</code></p>

If you wish to enable markdown parsing inside a specific HTML tag, you can enable it by using the html attribute markdown or markdown="1" or data-markdown="1".

some markdown **here**
<div markdown="1">this is *not* **parsed**</div>

<p>some markdown <strong>here</strong></p>
<div markdown="1"><p>this is <em>not</em> <strong>parsed</strong></p></div>

16. Escaping entities

16.1. Escaping markdown entities

Showdown allows you to use backslash (\) escapes to generate literal characters which would otherwise have special meaning in markdown’s syntax. For example, if you wanted to surround a word with literal underscores (instead of an HTML <em> tag), you can use backslashes before the unserscores, like this:

\_literal underscores\_

Showdown provides backslash escapes for the following characters:

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

16.2. Escaping HTML tags

Since version 1.7.2 backslash escaping HTML tags is supported when backslashEscapesHTMLTags option is enabled.

\<div>a literal div\</div>

17. Known differences and Gotchas

In most cases, Showdown's output is identical to that of Perl Markdown v1.0.2b7. What follows is a list of all known deviations. Please file an issue if you find more.

• Since version 1.4.0, showdown supports the markdown="1" attribute, but for older versions, this attribute is ignored. This means:

  <div markdown="1">
       Markdown does *not* work in here.
  </div>

• You can only nest square brackets in link titles to a depth of two levels:

  [[fine]](http://www.github.com/)
  [[[broken]]](http://www.github.com/)

  If you need more, you can escape them with backslashes.

• A list is single paragraph if it has only 1 line-break separating items and it becomes multi paragraph if ANY of its items is separated by 2 line-breaks:

- foo

    - bar
    - baz

becomes

```html
<ul>
  <li><p>foo</p></li>
  <li><p>bar</p></li>
  <li><p>baz</p></li>
</ul>
```

This new ruleset is based on the comments of Markdown's author John Gruber in the Markdown discussion list.

Directives

It's implemented in showdown-directive.js, allows you to create container directive, leaf directive, text directive.
Generic directives syntax can refer to generic-directives-plugins-syntax of commonmark.

1. Container Directives

The special container directive syntax by wrapping text with a set of greater or equal 3 colons or exclamation marks, as seen below:

::: name [label] {attributes}
contents, which are sometimes further block elements
:::

OR

!!! name [label] {attributes}
contents, which are sometimes further block elements
!!!

The special container directive syntax is classified as container syntax and callout syntax and admonitions syntax.
But the admonitions syntax also includes rST-style syntax and compatible syntax.

Default the admonitions styles are note , alert, simple style name in admonitions syntax.
Also customize the type name as a custom style name.
Each style includes the following types, each type corresponds to a class name of css:

And you can also customize the style and type.

1.1. Container Syntax

Container blocks contain further blocks. The proposed syntax for container block directives is:

::: name [label] {#id.x.y attributes}
contents, which are sometimes further block elements
:::

OR

!!! name [label] {#id.x.y attributes}
contents, which are sometimes further block elements
!!!

Analogous to fenced code blocks, an arbitrary number of colons or exclamation marks greater or equal three could be used as long as the closing line is longer than the opening line. That way, you can even nest blocks (think divs) by using successively fewer colons for each containing block.

When the name string in the container directive syntax is container (also defaults to container when empty string), row, or col, it is called container syntax; details string is called details-summary syntax; other strings are called admonitions syntax.

• The container syntax, for example:

:::::
::::row

:::col-one
!!!tip[tip example]{#example-one.note style="width:100%;"}
one contents, which are sometimes further block elements
!!!
:::

:::col-two
!!! info [info example] {#example-two.alert style="width:100%;"}
two contents, which are sometimes further block elements
!!!
:::

::::
:::::

Which will be rendered as:

<div class="container">
  <div class="container-content">
    <div class="row">
      <div class="row-content">
        <div class="col one">
          <div class="col-content">
            <div id="example-one" class="admonition note tip" style="width:100%;">
              <div class="admonition-title">tip example</div>
              <div class="admonition-content">
                <p>one contents, which are sometimes further block elements</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col two">
          <div class="col-content">
            <div id="example-two" class="admonition alert info" style="width:100%;">
              <div class="admonition-title">info example</div>
              <div class="admonition-content">
                <p>two contents, which are sometimes further block elements</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

• The details-summary syntax, for example:

::: details[summary title]{#example}
contents, which are sometimes further block elements
:::

Which will be rendered as:

<details id="example" class="details">
  <summary class="details-title">
    summary title
  </summary>
  <div class="details-content">
    <p>contents, which are sometimes further block elements</p>
  </div>
</details>

When adding a '+' or '-' after the details token, the admonition is rendered as an expandable block with a small toggle on the right side:

• The admonitions of container syntax, for example:

::: tip [tip example] {#example.alert style="width:100%;"}
You should info that the title will be automatically capitalized.
:::

OR

!!! tip [tip example] {#example.alert style="width:100%;"}
You should info that the title will be automatically capitalized.
!!!

Which will be rendered as:

<div id="example" class="admonition alert tip" style="width:100%;">
  <div class="admonition-title">
    tip example
  </div>
  <div class="admonition-content">
    <p>You should info that the title will be automatically capitalized.</p>
  </div>
</div>

1.2. rST-style Syntax

Admonitions of rST-style or mkdocs-material are created using the following syntax:

!!! types "optional explicit title within double quotes"
    Any number of other indented markdown elements.

    This is the second paragraph.

Type will be used as the CSS class name and as default title. It must be a single word and default style is simple. So, for instance:

!!! info
    You should type name(info) or style name(simple) that the title will be automatically capitalized.

will render:

<div class="admonition simple info">
  <div class="admonition-title">
    info
  </div>
  <div class="admonition-content">
    <p>You should info that the title will be automatically capitalized.</p>
  </div>
</div>

• Changing the title

By default, the title will equal the type qualifier in titlecase. However, it can be changed by adding a quoted string containing valid Markdown (including links, formatting, …) after the type qualifier:

!!! info "Phasellus posuere in sem ut cursus"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

will render:

<div class="admonition simple info">
  <div class="admonition-title">
    Phasellus posuere in sem ut cursus
  </div>
  <div class="admonition-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.</p>
  </div>
</div>

• Collapsible blocks

When an admonition block is started with ??? instead of !!!, the admonition is rendered as an expandable block with a small toggle on the right side:
Admonition, collapsible

??? tip

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.

will render:

<details class="admonition simple tip">
  <summary class="admonition-title">
    note
  </summary>
  <div class="admonition-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.</p>
  </div>
</details>

Adding a + after the ??? token renders the block expanded:

???+ info

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.

will render:

<details class="admonition simple info" open>
  <summary class="admonition-title">
    note
  </summary>
  <div class="admonition-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.</p>
  </div>
</details>

1.3. Compatible Syntax

A compatible admonitions syntax by wrapping text with a set of greater or equal 3 colons, as seen below:

::: <name | name0-name1-...> <label>
*Some text*
:::

For Example:

::: simple-warning A Compatible Syntax
*Some text*
:::

Which will be rendered as:

<div class=`admonition simple warning`>
  <div class=`admonition-title`>
    A Compatible Syntax
  </div>
  <div class=`admonition-content`>
    <p>
      <em>Some text</em>
    </p>
  </div>
</div>

1.4. Callout Syntax

A callout syntax by wrapping text with below:

> [!name] title
> content line 1
> content line 2
> ...

For example:

> [!tip] Callouts can have custom titles
> Like this one.

will render:

<div class="callout note tip">
  <div class="callout-title">
    Callouts can have custom titles
  </div>
  <div class="callout-content">
    <p>Like this one.</p>
  </div>
</div>

You can even omit the body to create title-only callouts:

> [!tip] Title-only callout

will render:

<div class="callout note tip">
  <div class="callout-title">
    Title-only callout
  </div>
</div>

• Foldable callouts

You can make a callout foldable by adding a plus (+) or a minus (-) directly after the type identifier.

A plus sign expands the callout by default, and a minus sign collapses it instead.

> [!faq]- Are callouts foldable?
> Yes! In a foldable callout, the contents are hidden when the callout is collapsed.

will render:

<details class="callout note faq">
  <summary class="callout-title">
    Are callouts foldable?
  </summary>
  <div class="callout-content">
    <p>Yes! In a foldable callout, the contents are hidden when the callout is collapsed.</p>
  </div>
</details>

1.5. Container Example

For note, alert, simple style examples.

1.5.1. Note Style

1.5.2. Alert Style

1.5.3. Simple Style

2. Leaf Directives

The syntax for leaf block directives:

:: name [title | content] {#id.x.y attributes(key=val)}

To be recognized as a directive, this has to form an otherwise empty paragraph. But as opposed to text directives, there are two colons now, the brackets [] are optional as well, and spaces may be interspersed for readability.

Leaf blocks are defined by default in three types: media or video or 媒体 or 音视频, css-link, and css. See the table below for details:

And you can also customize the type that can be triggered by event leafDirective to output custom HTML code.

3. Text Directives

• Common text directive

The syntax for common text directives, it is also an inline directives:

:name[content without `\f\v\r\n\[\]`]{#id.x.y attributes(key=val)}

Exactly one colon, followed by the name which is the identifier for the extension and must be a string without spaces, content without \f\v\r\n\[\] char may be further inline markdown elements to be interpreted and then printed in one way or another and the {#myId.myClass key=val key2="val 2"} contain generic attributes (i.e. key-value pairs) and are optional.

Rendered by default as:

<name id="id" class="x y" key=val>content</name>

:div[*This is a common text directive*]{#hello-1 style="font-size: 2rem;font-height: bold;"}

And you can also customize the type that can be triggered by event textDirective to customize and reset default HTML code.

• Embed text directive

The syntax for embed text directives, it is also an inline and embed directives:

:name[content without '\f\v\r\n']{#id.x.y attributes(key=val)}!!

Exactly one colon, followed by the name which is the identifier for the extension and must be a string without spaces, content without \f\v\r\n char may be further inline markdown elements to be interpreted and then printed in one way or another and the {#myId.myClass key=val key2="val 2"} contain generic attributes (i.e. key-value pairs) and are optional, finally use two !! end.

And you can also customize the type that can be triggered by event embedDirective to customize and reset default HTML code.

:header[![[../logo.png]][Showdowns Features](https://jhuix.github.io/showdowns)]{.doc-title.align-center.header-shadow.title3}!!

Showdowns Features

Content tabs

Sometimes, it's desirable to group alternative content under different tabs, e.g. when describing how to access an API from different languages or environments. It allows for beautiful and functional tabs, grouping code blocks and other content. Syntax format as follow:

=== "Tab Title one"

Table content one

=== "Tab Title two"

Table content two

1. Grouping code blocks

Code blocks are one of the primary targets to be grouped, and can be considered
a special case of content tabs, as tabs with a single code block are always
rendered without horizontal spacing:

=== "C"

    ``` c
    #include <stdio.h>

    int main(void) {
      printf("Hello world!\n");
      return 0;
    }
    ```

=== "C++"

    ``` c++
    #include <iostream>

    int main(void) {
      std::cout << "Hello world!" << std::endl;
      return 0;
    }
    ```

#include <stdio.h>

int main(void) {
  printf("Hello world!\n");
  return 0;
}

#include <iostream>

int main(void) {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

2. Grouping other content

When a content tab contains more than one code block, it is rendered with
horizontal spacing. Vertical spacing is never added, but can be achieved
by nesting tabs in other blocks:

=== "Unordered list"

    * Sed sagittis eleifend rutrum
    * Donec vitae suscipit est
    * Nulla tempor lobortis orci

=== "Ordered list"

    1. Sed sagittis eleifend rutrum
    2. Donec vitae suscipit est
    3. Nulla tempor lobortis orci

3. Embedded content

When [SuperFences] is enabled, content tabs can contain arbitrary nested
content, including further content tabs, and can be nested in other blocks like
[admonitions] or blockquotes:

!!! example

    === "Unordered List"

        ``` markdown
        * Sed sagittis eleifend rutrum
        * Donec vitae suscipit est
        * Nulla tempor lobortis orci
        ```

    === "Ordered List"

        ``` markdown
        1. Sed sagittis eleifend rutrum
        2. Donec vitae suscipit est
        3. Nulla tempor lobortis orci
        ```

* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci

1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci

Tables

• The following features are extended based on the showdown's table:

  • Cell spans over columns
  • Cell spans over rows (optional)
  • Omitted table header (optional)

1. Showdown's table

cell style syntax has "-{2,}",":-{2,}",":-{2,}:","-{2,}:", means default (align left), align left, align center, and align right style

| Return Code | Style | Value | DESC      |
| ----------- | :-----: | :----- | ---------: |
| OK          | int   | 1     | Succeeded |
| ERROR       | int   | 0     | Failed '\|'    |

2. Colspan table

"||" indicates cells being merged left.

| Return Code | Style | Value | DESC      |
| ====== | :-----: | ===== | ===== |
| **OK**          | int   | 1     | [Succeeded](https://www.baidu.com) |
| ERROR       | int   | 0     ||
| ERROR       || 0     ||

3. Rowspan table (optional: tablesRowspan)

"^^" indicates cells being merged above.

| Return Code | Style | Value | DESC      |
| ====== | :-----: | ===== | ===== |
| ^^         || 1     | [Succeeded](https://www.baidu.com) |
| ^^       || 0     ||
| ERROR       | int   | 0     ||
| ERROR       || 0     ||
| ^^       || 0     ||

4. Headerless table (optional: tablesHeaderless)

Table header can be eliminated.

|--|--|--|--|--|--|--|--|
|♜|  |♝|♛|♚|♝|♞|♜|
|  |♟|♟|♟|  |♟|♟|♟|
|♟|  |♞|  |  |  |  |  |
|  |♗|  |  |♟|  |  |  |
|  |  |  |  |♙|  |  |  |
|  |  |  |  |  |♘|  |  |
|♙|♙|♙|♙|  |♙|♙|♙|
|♖|♘|♗|♕|♔|  |  |♖|

Table of Contents

It's implemented sub-TOC in showdown-toc.js.

1. Markdown Syntax

he TOC syntax consists of one or more '#' (the quantity of which is the current TOC header level) add the following string, and the syntax string is not case sensitive.

【TOC】
【目录】
【_TOC_】
【Table Of Contents】
【Table-Of-Contents】

[TOC]
[目录]
[Table Of Contents]
[Table-Of-Contents]

{{TOC}}
{{_TOC_}}
[[TOC]]
[[_TOC_]]

The main toc head level is one, and so follow syntax:

# [[TOC]]

The sub head of two level is two, and so follow syntax:

## [[TOC]]

2. sub-TOC examples

2.1. sub-TOC examples1

2.1.1. sub examples1

2.2. sub-TOC examples2

2.2.1. sub examples2

Footnotes

Footnotes are a great way to add supplemental or additional information to a specific word, phrase or sentence without interrupting the flow of a document. Material for MkDocs provides the ability to define, reference and render footnotes. It's implemented in showdown-footnotes.js, use for reference the showdown-footnotes.

1. Adding footnote references

A footnote reference must be enclosed in square brackets and must start with a caret ^, directly followed by an arbitrary identifier, which is similar to the standard Markdown link syntax.

Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]

Lorem ipsum^[1] dolor sit amet, consectetur adipiscing elit.^[2]

2. Adding footnote content

The footnote content must be declared with the same identifier as the reference. It can be inserted at an arbitrary position in the document and is always rendered at the bottom of the page. Furthermore, a backlink to the footnote reference is automatically added.

2.1. On a single line

Short footnotes can be written on the same line:

[^1]: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2.2. On multiple lines

Paragraphs can be written on the next line and must be indented by four spaces:

[^2]:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Inline Image

Support inline image be defined, including the image path can be reset using a reset event. Its markdown syntax format Its grammatical format is the same as that of obsidian-style image links.

1. Markdown Syntax

![[<image path>]]

OR

![[<image path>]]{<image attributes>}

Which will be append a image element as:

<img class="inline-image" src="<image path>" <image attributes> />

2. Inline Image examples

![[logo.png]]{ width="64" heigth="64" }

Which will be append a image element as:

<img class="inline-image" src="logo.png" width="64" heigth="64" />

Code Block Theme

Code blocks must be enclosed with two separate lines containing at least three '```' or '~~~'.

1. Markdown Syntax

• Syntax

```[js|c|c++|go...] {"theme": "ayu-dark"} title="<custom title>"
  <code content>
  ``` 
  OR

  ~~~[js|c|c++|go...] {"theme": "ayu-dark"} title="<custom title>"
  <code content>
  ~~~

• Adding a title

In order to provide additional context, a custom title can be added to a code block by using the title="" option directly after the shortcode, e.g. to display the name of a file:

``` py title="bubble_sort.py"
  def bubble_sort(items):
      for i in range(len(items)):
          for j in range(len(items) - 1 - i):
              if items[j] > items[j + 1]:
                  items[j], items[j + 1] = items[j + 1], items[j]
  ```

2. Code Block examples

• For JavaScript:

/**
 * Merge object with deepth
 *
 * @param {object} target
 *     Target object
 * @param {object[]} sources
 *     Source object or objects
 * @returns {object}
 *     Meraged Object
 */
export function deepMerge(target, ...sources) {
  for (const source of sources) {
    for (const [key, val] of Object.entries(source)) {
      // @ts-ignore
      if (isObject(val) && isObject(target[key])) {
        // @ts-ignore
        deepMerge(target[key], val);
      } else {
        Object.assign(target, { [key]: val });
      }
    }
  }
  return target;
}

• For GO:

package utils

import (
  "math"
  "sync"
)

type levelPool struct {
  size int
  pool sync.Pool
}

func newLevelPool(size int) *levelPool {
  return &levelPool{
    size: size,
    pool: sync.Pool{
      New: func() interface{} {
        data := make([]byte, size)
        return &data
      },
    },
  }
}

type LimitedPool struct {
  minSize int
  maxSize int
  pools   []*levelPool
}

func NewLimitedPool(minSize, maxSize int) *LimitedPool {
  if maxSize < minSize {
    panic("maxSize can't be less than minSize")
  }
  const multiplier = 2
  var pools []*levelPool
  curSize := minSize
  for curSize < maxSize {
    pools = append(pools, newLevelPool(curSize))
    curSize *= multiplier
  }
  pools = append(pools, newLevelPool(maxSize))
  return &LimitedPool{
    minSize: minSize,
    maxSize: maxSize,
    pools:   pools,
  }
}

func (p *LimitedPool) findPool(size int) *levelPool {
  if size > p.maxSize {
    return nil
  }
  idx := int(math.Ceil(math.Log2(float64(size) / float64(p.minSize))))
  if idx < 0 {
    idx = 0
  }
  if idx > len(p.pools)-1 {
    return nil
  }
  return p.pools[idx]
}

func (p *LimitedPool) findPutPool(size int) *levelPool {
  if size > p.maxSize {
    return nil
  }
  if size < p.minSize {
    return nil
  }

  idx := int(math.Floor(math.Log2(float64(size) / float64(p.minSize))))
  if idx < 0 {
    idx = 0
  }
  if idx > len(p.pools)-1 {
    return nil
  }
  return p.pools[idx]
}

func (p *LimitedPool) Get(size int) *[]byte {
  sp := p.findPool(size)
  if sp == nil {
    data := make([]byte, size)
    return &data
  }
  buf := sp.pool.Get().(*[]byte)
  *buf = (*buf)[:size]
  return buf
}

func (p *LimitedPool) Put(b *[]byte) {
  sp := p.findPutPool(cap(*b))
  if sp == nil {
    return
  }
  *b = (*b)[:cap(*b)]
  sp.pool.Put(b)
}

Mermaid

It's implemented in showdown-mermaid.js, render diagrams of Flowchart or Sequence or Gantt using mermaid, check mermaid doc for more information.

1. Markdown Syntax

• Flowchart syntax:

```mermaid {"align": "left | center | right", "codeblock": true | false}
    graph TD;
    <code content>
    ```

• Sequence diagram syntax:

```mermaid {"align": "left | center | right", "codeblock": true | false}
    sequenceDiagram
    <code content>
    ```

• Gantt diagram syntax:

```mermaid {"align": "left | center | right", "codeblock": true | false}
    gantt
    <code content>
    ```

• Support mermaid code of azure syntax

:::mermaid 
      mermaid syntax content
    :::

2. Mermaid examples

2.1. Flowchart

graph TD;
           A-->B;
           A-->C;
           B-->D;
           C-->D;

2.2. Sequence diagram

2.3. Gantt diagram