423 lines
7.7 KiB
Markdown
423 lines
7.7 KiB
Markdown
|
---
|
|||
|
|
|||
|
---
|
|||
|
|
|||
|
# Example for OneDark Theme
|
|||
|
|
|||
|
[toc]
|
|||
|
|
|||
|
## Headers
|
|||
|
|
|||
|
### h3
|
|||
|
|
|||
|
Markdown is a lightweight markup language with plain-text-formatting syntax. Its design allows it to be converted to many output formats, but the original tool by the same name only supports HTML. Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
|
|||
|
|
|||
|
#### h4
|
|||
|
|
|||
|
Since the initial description of Markdown contained ambiguities and unanswered questions, the implementations that appeared over the years have subtle differences and many come with syntax extensions.
|
|||
|
|
|||
|
##### h5
|
|||
|
|
|||
|
In MediaWiki, it is implemented in the currently unmaintained MarkdownExtraParser parser function extension
|
|||
|
|
|||
|
###### h6
|
|||
|
|
|||
|
Implementations of Markdown are available for over a dozen programming languages.
|
|||
|
|
|||
|
## Quote
|
|||
|
|
|||
|
> Most UI components including tooltip, dialog and buttons are painted by HTML. And you only need to change those part when you find the UI components are incompatible with your editor theme after finishing steps above. HTML files from the toolkit includes most common UI components for you to easily debug.
|
|||
|
|
|||
|
## Font Style
|
|||
|
|
|||
|
**Bold**, *italic*, ~~delete~~
|
|||
|
|
|||
|
<u>underline</u>, [Link](typora.io)
|
|||
|
|
|||
|
H~2~O, E=mc^2^
|
|||
|
|
|||
|
<span style="color:red">colored text</span>, ==highlight==
|
|||
|
|
|||
|
emoji: :smile:
|
|||
|
|
|||
|
- [ ] checkbox
|
|||
|
|
|||
|
## Codeblock
|
|||
|
|
|||
|
```python
|
|||
|
# hello_world.py
|
|||
|
class HelloWorld():
|
|||
|
def __init__(self):
|
|||
|
self.text='hello world!'
|
|||
|
|
|||
|
def show(self,word):
|
|||
|
print(f'{word}, {self.text}')
|
|||
|
|
|||
|
test=HelloWorld()
|
|||
|
test.show()
|
|||
|
```
|
|||
|
|
|||
|
Run terminal then enter: `python hello_world.py`
|
|||
|
|
|||
|
## KBD
|
|||
|
|
|||
|
* bold:<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>
|
|||
|
|
|||
|
* italic:<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>
|
|||
|
|
|||
|
## MathJax
|
|||
|
|
|||
|
Given two populations, $x_1$ and $x_2$ , with logistic dynamics, the Lotka–Volterra formulation adds an additional term to account for the species' interactions. Thus the competitive Lotka–Volterra equations are:
|
|||
|
$$
|
|||
|
\begin{cases}
|
|||
|
\cfrac{dx_1}{dt}=r_1x_1\bigg(1-\cfrac{x_1+\alpha_{12} x_2}{K_1}\bigg)\\
|
|||
|
\cfrac{dx_2}{dt}=r_2x_2\bigg(1-\cfrac{x_2+\alpha_{21} x_1}{K_2}\bigg)
|
|||
|
\end{cases}
|
|||
|
$$
|
|||
|
Here, $\alpha_{12}$ represents the effect species 2 has on the population of species 1 and $\alpha_{21}$represents the effect species 1 has on the population of species 2.
|
|||
|
|
|||
|
## Order
|
|||
|
|
|||
|
1. first item
|
|||
|
2. second item
|
|||
|
1. first item
|
|||
|
2. second item
|
|||
|
3. third item
|
|||
|
|
|||
|
---
|
|||
|
|
|||
|
* first item
|
|||
|
* second item
|
|||
|
* first item
|
|||
|
* first item
|
|||
|
* fourth item
|
|||
|
|
|||
|
## Table
|
|||
|
|
|||
|
| Cinderella | 11 | glass | transparent |
|
|||
|
| :----------- | ---: | :---------- | :---------- |
|
|||
|
| Name | Size | Material | Color |
|
|||
|
| All Business | 9 | leather | brown |
|
|||
|
| Roundabout | 10 | hemp canvas | natural |
|
|||
|
|
|||
|
## Footnote
|
|||
|
|
|||
|
You can create footnotes like this[^fn1] and this[^fn2].
|
|||
|
|
|||
|
[^fn1]: Here is the **text** of the first ***\*footnote\****.
|
|||
|
[^fn2]: Here is the **text** of the second ***\*footnote\****.
|
|||
|
|
|||
|
## Image, Video
|
|||
|
|
|||
|
<img src="D:\Project\typora-onedark-theme\example\image.jpg" alt="Cosmos08" style="zoom:15%;" />
|
|||
|
|
|||
|
<video src="./video.mp4" />
|
|||
|
|
|||
|
<table>
|
|||
|
<tr>
|
|||
|
<td>Bash command
|
|||
|
</td>
|
|||
|
<td>Description
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td>ls
|
|||
|
</td>
|
|||
|
<td>List directory contents
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td>cd
|
|||
|
</td>
|
|||
|
<td>Change directory
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td>cp
|
|||
|
</td>
|
|||
|
<td>Copy files
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td>mv
|
|||
|
</td>
|
|||
|
<td>Move files
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
|
|||
|
## Graph
|
|||
|
|
|||
|
### sequence
|
|||
|
|
|||
|
```sequence
|
|||
|
Alice->Bob: Hello Bob, how are you?
|
|||
|
Note right of Bob: Bob thinks
|
|||
|
Bob-->Alice: I am good thanks!
|
|||
|
```
|
|||
|
|
|||
|
### flow
|
|||
|
|
|||
|
```flow
|
|||
|
st=>start: Start
|
|||
|
op=>operation: Your Operation
|
|||
|
cond=>condition: Yes or No?
|
|||
|
e=>end
|
|||
|
|
|||
|
st->op->cond
|
|||
|
cond(yes)->e
|
|||
|
cond(no)->op
|
|||
|
```
|
|||
|
|
|||
|
### mermaid
|
|||
|
|
|||
|
#### Flowchart
|
|||
|
|
|||
|
```mermaid
|
|||
|
graph TD
|
|||
|
Start --> Stop
|
|||
|
```
|
|||
|
```mermaid
|
|||
|
graph LR
|
|||
|
A([A]) --- B(B) -- C --- C{C}
|
|||
|
C -- D --> D[[D]]
|
|||
|
C -.->|E| E[E]
|
|||
|
C -. F .-> F[(F)]
|
|||
|
C ==>|G| G((G))
|
|||
|
B == edge ==> H>H]
|
|||
|
B --> I{{I}}
|
|||
|
subgraph sub [subgraph]
|
|||
|
I -->|J| J[/J/]
|
|||
|
I -->|K| K[\K\]
|
|||
|
I -->|L| L[\L/]
|
|||
|
I -->|M| M[/M\]
|
|||
|
end
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
#### Sequence diagram
|
|||
|
|
|||
|
```mermaid
|
|||
|
%% Example of sequence diagram
|
|||
|
sequenceDiagram
|
|||
|
participant A
|
|||
|
participant B
|
|||
|
participant C
|
|||
|
Note right of B: note
|
|||
|
Note over A,B: note
|
|||
|
A->B: a
|
|||
|
activate B
|
|||
|
A-->B: b
|
|||
|
activate B
|
|||
|
A->>B: c
|
|||
|
deactivate B
|
|||
|
A-->>B: d
|
|||
|
deactivate B
|
|||
|
rect rgba(128,0,0,0.5)
|
|||
|
A-xA: e
|
|||
|
end
|
|||
|
loop loop
|
|||
|
A--xB: f
|
|||
|
end
|
|||
|
alt alt
|
|||
|
B->>A: g
|
|||
|
else else
|
|||
|
B->>A: h
|
|||
|
end
|
|||
|
par par
|
|||
|
A->C: i
|
|||
|
and and
|
|||
|
A->B: j
|
|||
|
par nest
|
|||
|
B->C: k
|
|||
|
end
|
|||
|
end
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
#### Class diagram
|
|||
|
|
|||
|
```mermaid
|
|||
|
classDiagram
|
|||
|
A <|-- B: label
|
|||
|
A "1" *-- "1.." C
|
|||
|
A "*" o-- "0..1" D
|
|||
|
C <-- E
|
|||
|
C -- F
|
|||
|
D <.. G
|
|||
|
D <|.. H
|
|||
|
D .. I
|
|||
|
A: +int i1
|
|||
|
A: -String s1
|
|||
|
A: #List~int~ l1
|
|||
|
A: ~f1(arg) bool
|
|||
|
A: +f2()*
|
|||
|
A: +f3()$
|
|||
|
class B {
|
|||
|
<<enumeration>>
|
|||
|
RED
|
|||
|
GREEN
|
|||
|
BLUE
|
|||
|
}
|
|||
|
class D {
|
|||
|
<<interface>>
|
|||
|
int i1
|
|||
|
f1()
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
#### State diagram
|
|||
|
|
|||
|
```mermaid
|
|||
|
stateDiagram
|
|||
|
[*] --> Still
|
|||
|
Still --> [*]
|
|||
|
|
|||
|
Still --> Moving
|
|||
|
Moving --> Still
|
|||
|
Moving --> Crash
|
|||
|
Crash --> [*]
|
|||
|
```
|
|||
|
|
|||
|
```mermaid
|
|||
|
stateDiagram
|
|||
|
state fork_state <<fork>>
|
|||
|
state "This is A" as A
|
|||
|
[*] --> fork_state
|
|||
|
[*] --> D
|
|||
|
D --> fork_state
|
|||
|
note right of D
|
|||
|
note for D
|
|||
|
end note
|
|||
|
note left of A: note for A
|
|||
|
fork_state --> A
|
|||
|
fork_state --> B
|
|||
|
A --> C: trans
|
|||
|
B --> C
|
|||
|
C --> [*]
|
|||
|
state C {
|
|||
|
[*] --> C1: test
|
|||
|
C1 --> C2
|
|||
|
C2 --> C3
|
|||
|
C3 --> [*]
|
|||
|
state C2 {
|
|||
|
[*] --> C21
|
|||
|
C21 --> [*]
|
|||
|
state C21 {
|
|||
|
[*] --> C211
|
|||
|
}
|
|||
|
}
|
|||
|
C1: This is C1
|
|||
|
--
|
|||
|
[*] --> T
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
```mermaid
|
|||
|
stateDiagram-v2
|
|||
|
state fork_state <<fork>>
|
|||
|
state "This is A" as A
|
|||
|
[*] --> fork_state
|
|||
|
[*] --> D
|
|||
|
D --> fork_state
|
|||
|
note right of D
|
|||
|
note for D
|
|||
|
end note
|
|||
|
note left of A: note for A
|
|||
|
fork_state --> A
|
|||
|
fork_state --> B
|
|||
|
A --> C: trans
|
|||
|
B --> C
|
|||
|
C --> [*]
|
|||
|
state C {
|
|||
|
[*] --> C1: test
|
|||
|
C1 --> C2
|
|||
|
C2 --> C3
|
|||
|
C3 --> [*]
|
|||
|
state C2 {
|
|||
|
[*] --> C21
|
|||
|
C21 --> [*]
|
|||
|
state C21 {
|
|||
|
[*] --> C211
|
|||
|
}
|
|||
|
}
|
|||
|
C1: This is C1
|
|||
|
--
|
|||
|
[*] --> T
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
#### Entity Relationship Diagram
|
|||
|
|
|||
|
```mermaid
|
|||
|
erDiagram
|
|||
|
A |o--o| B : b
|
|||
|
B ||--|| C : c
|
|||
|
A }o..o{ D : d
|
|||
|
D }|..|{ E : e
|
|||
|
```
|
|||
|
|
|||
|
#### User Journey Diagram
|
|||
|
|
|||
|
```mermaid
|
|||
|
journey
|
|||
|
title My working day
|
|||
|
section A
|
|||
|
A1: 5: Me
|
|||
|
A2: 3: Me
|
|||
|
A3: 1: Me, Cat
|
|||
|
A4: 2
|
|||
|
A5: 4
|
|||
|
```
|
|||
|
|
|||
|
#### Gantt
|
|||
|
|
|||
|
```mermaid
|
|||
|
%% Example with selection of syntaxes
|
|||
|
gantt
|
|||
|
dateFormat YYYY-MM-DD
|
|||
|
title Adding GANTT diagram functionality to mermaid
|
|||
|
|
|||
|
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
|
|||
|
|
|||
|
section Critical tasks
|
|||
|
Completed task in the critical line :crit, done, 2014-01-06,24h
|
|||
|
Implement parser and jison :crit, done, after des1, 2d
|
|||
|
Create tests for parser :crit, active, 3d
|
|||
|
Future task in critical line :crit, 5d
|
|||
|
Create tests for renderer :2d
|
|||
|
Add to mermaid :1d
|
|||
|
|
|||
|
section Documentation
|
|||
|
Describe gantt syntax :active, a1, after des1, 3d
|
|||
|
Add gantt diagram to demo page :after a1 , 20h
|
|||
|
Add another diagram to demo page :doc1, after a1 , 48h
|
|||
|
|
|||
|
section Last section
|
|||
|
Describe gantt syntax :after doc1, 3d
|
|||
|
Add gantt diagram to demo page : 20h
|
|||
|
Add another diagram to demo page : 48h
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
#### Pie Chart
|
|||
|
|
|||
|
```mermaid
|
|||
|
pie
|
|||
|
title Pie Chart
|
|||
|
"A" : 1
|
|||
|
"B" : 2
|
|||
|
"C" : 3
|
|||
|
"D" : 4
|
|||
|
"E" : 5
|
|||
|
"F" : 6
|
|||
|
"G" : 7
|
|||
|
"H" : 8
|
|||
|
```
|
|||
|
|