MarkdownView

Label: :IA_Function
Property: type: MarkdownView
Inherits from: Function and View

The MarkdownView Function shows a document generated by Markdown.

Function parameters

Key Description Default value Possible values
markdown Markdown to generate the document, following CommonMark syntax. string
props.html Enable HTML support to markdown true boolean
props.emoji Enable emoji support to markdown true boolean
props.xhtml-out Enable xhtml-out support to markdown true boolean
props.typographer Enable some language-neutral replacement and quotes beautification true boolean
props.linkify Autoconvert URL-like text to link true boolean
props.table-class Customize class attribute of the <table> table string
props.breaks Convert newline characters to <br> true boolean
props.task-lists Enable GFM task list true boolean
props.toc Enable automatic table of contents false boolean
props.anchorAttributes Customize <a> tag attributes such as target: '_blank' or rel: 'nofollow' {} object

Supported Markdown syntax

Heading

# H1
## H2
### H3
#### H4
##### H5
###### H6

Heading with ID

### My Heading {#custom-id}

Bold

**bold text**

or

__bold text__

Italic

*italicized text*

or

_italicized text_

Blockquote

> blockquote
>> blockquote level 2
>>> blockquote level 3

Ordered List

1. First item
2. Second item
3. Third item

Unordered List

- First item
- Second item
- Third item

Bulleted list

* First level item
	* second level
		* third level
* Second item
* Third item

Inline code

`code`

Block code

```
{
  "firstName": "John",
  "lastName": "Doe",
  "age": 99
}
```

Block code with syntax highlight

Most usual languages are supported

Example

```json
{
  "firstName": "John",
  "lastName": "Doe",
  "age": 99
}
```

```cypher
MATCH (n:Person)-[r:TO]->(m:Something)
RETURN n,m,r
```

```javascript
let text = "This is my text";
console.log(text);
```

Horizontal Rule

---
[Link](https://graphileon.com)
[Link with title](https://graphileon.com "Graphileon")
[Open in new tab link](https://graphileon.com){target="_blank"}
[Open in new tab link with title](https://graphileon.com "Graphileon"){target="_blank"}

Image

![alt text](image.jpg)
![50px square image](https://link.to/image.png =x50)
![50x50px image](https://link.to/image.png =50x50)

Table

| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |

Footnote

Here's a sentence with a footnote. [^1]
[^1]: This is the footnote.

Definition List

Definition List Syntax

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b

Strikethrough

~~The world is flat.~~

Task List

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Emoji

Emoji Cheat Sheet

:panda_face: :sparkles: :camel: :boom: :pig:

Highlight

I need to highlight these ==very important words==.

Subscript

H~2~O

Superscript

X^2^

Graphileon API response

Syntax

(ia-api "ia-name": "<ia-name-of-api-function-node>", "<param-name>": "<param-value>", "<param-name>": "<param-value>", ...)

Example

(ia-api "ia-name": "test", "input-id": "213")

Embed video

Syntax

@[youtube|vimeo|vine|prezi|osf](video_id or url)

Example

@[youtube](_kt6p7VZw2o)

or

@[youtube](https://www.youtube.com/watch?v=_kt6p7VZw2o&ab_channel=Graphileon)

Single HTML element

Syntax

[element]{attributes}

Example

[img]{src="image.jpg"}

Table of contents

[toc]

Alerts

::: 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 Flowchart

Flowchart Documentation

Example

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

AsciiMath

AsciiMath Documentation

Examples

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

```AsciiMath
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)
```

```ASCIIMath
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
```

Echarts

Documentation for Echarts

Example

```echarts
{
  "width": 500,
  "height": 400,
  "series": [
    {
      "name": "访问来源",
      "type": "pie",
      "radius": "55%",
      "data": [
        {
          "value": 235,
          "name": "{{userName}}"
        },
        {
          "value": 274,
          "name": "联盟广告"
        },
        {
          "value": 310,
          "name": "邮件营销"
        },
        {
          "value": 335,
          "name": "直接访问"
        },
        {
          "value": 400,
          "name": "搜索引擎"
        }
      ]
    }
  ]
}
```

The width and height define the size for chart container.

Flowchart

Documentation for Flowchart.js

Example

```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: {{userName}}'s 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"})
```