mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
a2f734f223
* update: support config helper multi keys --------- Co-authored-by: Luffy <lufei@docsifyjs.org>
172 lines
2.7 KiB
Markdown
172 lines
2.7 KiB
Markdown
# Doc helper
|
|
|
|
docsify extends Markdown syntax to make your documents more readable.
|
|
|
|
> Note: For the special code syntax cases, it's better to put them within code backticks to avoid any conflict from configurations or emojis.
|
|
|
|
## Callouts
|
|
|
|
### Important content
|
|
|
|
Important content like:
|
|
|
|
```markdown
|
|
!> **Time** is money, my friend!
|
|
```
|
|
|
|
is rendered as:
|
|
|
|
!> **Time** is money, my friend!
|
|
|
|
### Tips
|
|
|
|
General tips like:
|
|
|
|
```markdown
|
|
?> _TODO_ unit test
|
|
```
|
|
|
|
are rendered as:
|
|
|
|
?> _TODO_ unit test
|
|
|
|
## Link attributes
|
|
|
|
### disabled
|
|
|
|
```md
|
|
[link](/demo ':disabled')
|
|
```
|
|
|
|
### href
|
|
|
|
Sometimes we will use some other relative path for the link, and we have to tell docsify that we don't need to compile this link. For example:
|
|
|
|
```md
|
|
[link](/demo/)
|
|
```
|
|
|
|
It will be compiled to `<a href="/#/demo/">link</a>` and will load `/demo/README.md`. Maybe you want to jump to `/demo/index.html`.
|
|
|
|
Now you can do that
|
|
|
|
```md
|
|
[link](/demo/ ':ignore')
|
|
```
|
|
|
|
You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set the title for the link.
|
|
|
|
```md
|
|
[link](/demo/ ':ignore title')
|
|
|
|
<a href="/demo/" title="title">link</a>
|
|
```
|
|
|
|
### target
|
|
|
|
```md
|
|
[link](/demo ':target=_blank')
|
|
[link](/demo2 ':target=_self')
|
|
```
|
|
|
|
## Task lists
|
|
|
|
```md
|
|
- [ ] foo
|
|
- bar
|
|
- [x] baz
|
|
- [] bam <~ not working
|
|
- [ ] bim
|
|
- [ ] lim
|
|
```
|
|
|
|
- [ ] foo
|
|
- bar
|
|
- [x] baz
|
|
- [] bam <~ not working
|
|
- [ ] bim
|
|
- [ ] lim
|
|
|
|
## Images
|
|
|
|
### Class names
|
|
|
|
```md
|
|
|
|
|
|
<!-- Multiple class names -->
|
|
|
|
|
|
```
|
|
|
|
### IDs
|
|
|
|
```md
|
|
|
|
```
|
|
|
|
### Sizes
|
|
|
|
```md
|
|
|
|
|
|
|
|
|
|
<!-- Support percentage -->
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Heading IDs
|
|
|
|
```md
|
|
### Hello, world! :id=hello-world
|
|
```
|
|
|
|
## Markdown + HTML
|
|
|
|
You need to insert a space between the html and markdown content.
|
|
This is useful for rendering markdown content in the details element.
|
|
|
|
```markdown
|
|
<details>
|
|
<summary>Self-assessment (Click to expand)</summary>
|
|
|
|
- Abc
|
|
- Abc
|
|
|
|
</details>
|
|
```
|
|
|
|
<details>
|
|
<summary>Self-assessment (Click to expand)</summary>
|
|
|
|
- Abc
|
|
- Abc
|
|
|
|
</details>
|
|
|
|
Markdown content can also be wrapped in html tags.
|
|
|
|
```markdown
|
|
<div style='color: red'>
|
|
|
|
- listitem
|
|
- listitem
|
|
- listitem
|
|
|
|
</div>
|
|
```
|
|
|
|
<div style='color: red'>
|
|
|
|
- listitem
|
|
- listitem
|
|
- listitem
|
|
|
|
</div>
|