faviconv-noREADME|ARCHIVES|CATEGORIES|SEARCH|
«Tue Mar 02 2021AkrISrn杂项53d0fadRaw
外部插件
The documentation is a work in progress, and English edition is just an empty shell for now. I will translate it when Chinese edition has done.

Twemoji

Markdown

[$](https://twemoji.maxcdn.com/v/latest/twemoji.min.js)[$](/uploads/parse-emoji.js "twemoji")
Markdown
  • parse-emoji.js 会在 twemoji.min.js 加载完成后引入。

parse-emoji.js

(() => {
  vno.callAndListen(() => {
    twemoji.parse(document.body);
  }, vno.EEvent.htmlChanged);
  // // 驻留
  // }, vno.EEvent.htmlChanged, document, true);})();
JavaScript

示例

😀 😁 😂 😃 😄 😅 😆 😇 😈 😉 😊 😋 😌 😍 😎 😏

😐 😑 😒 😓 😔 😕 😖 😗 😘 😙 😚 😛 😜 😝 😞 😟

😠 😡 😢 😣 😤 😥 😦 😧 😨 😩 😪 😫 😬 😭 😮 😯

😰 😱 😲 😳 😴 😵 😶 😷 😸 😹 😺 😻 😼 😽 😾 😿

🙀 🙁 🙂 🙃 🙄

KaTeX

Markdown

[*](https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css)[$](https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js)[$](https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.js "katex")[$](/uploads/render-math.js "renderMathInElement")
Markdown
  • auto-render.js 会在 katex.min.js 加载完成后引入。
  • render-math.js 会在 auto-render.js 加载完成后引入。

render-math.js

(() => {
  vno.callAndListen(() => {
    renderMathInElement(document.body, {
      delimiters: [
        { left: '${', right: '}', display: true },
        { left: '$', right: '$', display: false },
        { left: '\\[', right: '\\]', display: true },
        { left: '\\(', right: '\\)', display: false },
      ],
    });
  }, vno.EEvent.htmlChanged);
  // // 驻留
  // }, vno.EEvent.htmlChanged, document, true);})();
JavaScript

KaTeX 默认的一组块级标记是两个 $，它和自定义脚本冲突了，这里把它调整为了 ${ }。

示例

${ c = \pm\sqrt{a^2 + b^2} }

${ c = \pm\sqrt{a^2 + b^2} }

$ c = \pm\sqrt{a^2 + b^2} $

$ c = \pm\sqrt{a^2 + b^2} $

\\[ \sqrt{3x-1}+(1+x)^2 \\]

\[ \sqrt{3x-1}+(1+x)^2 \]

\\( \sqrt{3x-1}+(1+x)^2 \\)

\( \sqrt{3x-1}+(1+x)^2 \)

Mermaid

Markdown

[$](https://cdn.jsdelivr.net/npm/mermaid@8.9.1/dist/mermaid.min.js)[$](/uploads/init-mermaid.js "mermaid")
Markdown
  • init-mermaid.js 会在 mermaid.min.js 加载完成后引入。

init-mermaid.js

(() => {
  vno.callAndListen(() => {
    mermaid.init();
  }, vno.EEvent.htmlChanged);
  // // 驻留
  // }, vno.EEvent.htmlChanged, document, true);})();
JavaScript

示例

流程图

graph TD
    A-->B
    A-->C
    B-->D
    C-->D
Plain text
graph TD A-->B A-->C B-->D C-->D

时序图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
Plain text
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

甘特图

gantt
    dateFormat YYYY-MM-DD
    title Adding GANTT diagram to mermaid
    excludes weekdays 2014-01-10
    section A section
    Completed task  :done,   des1, 2014-01-06, 2014-01-08
    Active    task  :active, des2, 2014-01-09, 3d
    Future    task  :        des3, after des2, 5d
    Future    task2 :        des4, after des3, 5d
Plain text
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06, 2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d

类图

classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label
Plain text
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

Git 图

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
Plain text
gitGraph: options { "nodeSpacing": 150, "nodeRadius": 10 } end commit branch newbranch checkout newbranch commit commit checkout master commit commit merge newbranch

实体关系图

erDiagram
    CUSTOMER ||--o{ ORDER            : places
    ORDER    ||--|{ LINE-ITEM        : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
Plain text
erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

日程图

journey
    title My working day
    section Go to work
        Make tea:      5: Me
        Go upstairs:   3: Me
        Do work:       1: Me, Cat
    section Go home
        Go downstairs: 5: Me
        Sit down:      5: Me
Plain text
journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me

$
$

This page is open source, improve it
Graph

$$

★▣と