demo.md

markdown-it-vue

Image size and Viewer

 

GitHub Table of Contents

[toc]

Note: Only h2 and h3 are shown in toc.

alter

Markup is similar to fenced code blocks. Valid container types are success, info, warning and error.

::: success You have got it. :::

::: info You have new mail. :::

::: warning You have new mail. :::

::: error Staying up all night is bad for health. :::

mermaid charts

mermaid Flowchart

Flowchart Syntax

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

Loading

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!

Definition list

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Definition List Syntax

AsciiMath

Inline AsciiMath: @(1/2[1-(1/2)^n])/(1-(1/2))=s_n@

oint_Cx^3 dx+4y^2 dy

2=(((3-x)xx2)/(3-x))

sum_(m=1)^oosum_(n=1)^oo(m^2 n)/(3^m(m3^n+n3^m)

phi_n(kappa) = 1/(4pi^2 kappa^2)
 int_0^oo (sin(kappa R))/(kappa R)
 del/(del R)
[R^2 (del D_n (R))/(del R)] del R

AsciiMath Documentation

Subscript: H2O

You can also use inline math: $H_2O$

Superscript: 29^th^

You can also use inline math: $29^{th}$

Emoji: 🐼 ✨ 🐫 💥 🐷

Emoji Cheat Sheet

Fontawesome: :fa-car: :fa-flag: :fa-bicycle: :fa-leaf: :fa-heart:

All the Font Awesome icons

code

c

#include <stdio.h>
int main(int argc char* argv[]) {
  printf("Hello, World!");
  return 0;
}

json

{
  "name": "markdown-it-vue"
}

javascript

import MarkdownItVue from 'markdown-it-vue'
export default {
  components: {
    MarkdownItVue
  }
}

bash

npm install markdown-it-vue

table

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

flowchart.js

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
para=>parallel: parallel tasks

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->para
c2(true)->io->e
c2(false)->e

para(path1, bottom)->sub1(left)->op1
para(path2, right)->op2->e

st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})