docsify/docs/helpers.md

2.7 KiB

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.

Important content

Important content like:

!> **Time** is money, my friend!

is rendered as:

!> Time is money, my friend!

General tips

General tips like:

?> _TODO_ unit test

are rendered as:

?> TODO unit test

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:

[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

[link](/demo/ ':ignore')

You will get <a href="/demo/">link</a>html. Do not worry, you can still set the title for the link.

[link](/demo/ ':ignore title')

<a href="/demo/" title="title">link</a>
[link](/demo ':target=_blank')
[link](/demo2 ':target=_self')
[link](/demo ':disabled')

GitHub Task Lists

- [ ] foo
- bar
- [x] baz
- [] bam <~ not working
  - [ ] bim
  - [ ] lim
  • foo
  • bar
  • baz
  • [] bam <~ not working
    • bim
    • lim

Image

Resizing

![logo](https://docsify.js.org/_media/icon.svg ':size=WIDTHxHEIGHT')
![logo](https://docsify.js.org/_media/icon.svg ':size=50x100')
![logo](https://docsify.js.org/_media/icon.svg ':size=100')

<!-- Support percentage -->

![logo](https://docsify.js.org/_media/icon.svg ':size=10%')

logo logo logo

Customise class

![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass')

Customise ID

![logo](https://docsify.js.org/_media/icon.svg ':id=someCssId')

Customise ID for headings

### Hello, world! :id=hello-world

Markdown in html tag

You need to insert a space between the html and markdown content. This is useful for rendering markdown content in the details element.

<details>
<summary>Self-assessment (Click to expand)</summary>

- Abc
- Abc

</details>
Self-assessment (Click to expand)
  • Abc
  • Abc

Markdown content can also be wrapped in html tags.

<div style='color: red'>

- listitem
- listitem
- listitem

</div>
  • Abc
  • Abc