website/docs/tutorial-basics/markdown-features.mdx at 7452aaa4e1d32eaa8a95e2413dcd589b4c807007 · desertthunder.dev/noteleaf

cli + tui to publish to leaflet (wip) & manage tasks, notes & watch/read lists 🍃
charm leaflet readability golang
noteleaf / website / docs / tutorial-basics / markdown-features.mdx
at 7452aaa4e1d32eaa8a95e2413dcd589b4c807007 152 lines 3.0 kB view raw
  1---
  2sidebar_position: 4
  3---
  4
  5# Markdown Features
  6
  7Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
  8
  9## Front Matter
 10
 11Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
 12
 13```text title="my-doc.md"
 14// highlight-start
 15---
 16id: my-doc-id
 17title: My document title
 18description: My document description
 19slug: /my-custom-url
 20---
 21// highlight-end
 22
 23## Markdown heading
 24
 25Markdown text with [links](./hello.md)
 26```
 27
 28## Links
 29
 30Regular Markdown links are supported, using url paths or relative file paths.
 31
 32```md
 33Let's see how to [Create a page](/create-a-page).
 34```
 35
 36```md
 37Let's see how to [Create a page](./create-a-page.md).
 38```
 39
 40**Result:** Let's see how to [Create a page](./create-a-page.md).
 41
 42## Images
 43
 44Regular Markdown images are supported.
 45
 46You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
 47
 48```md
 49![Docusaurus logo](/img/docusaurus.png)
 50```
 51
 52![Docusaurus logo](/img/docusaurus.png)
 53
 54You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
 55
 56```md
 57![Docusaurus logo](./img/docusaurus.png)
 58```
 59
 60## Code Blocks
 61
 62Markdown code blocks are supported with Syntax highlighting.
 63
 64````md
 65```jsx title="src/components/HelloDocusaurus.js"
 66function HelloDocusaurus() {
 67  return <h1>Hello, Docusaurus!</h1>;
 68}
 69```
 70````
 71
 72```jsx title="src/components/HelloDocusaurus.js"
 73function HelloDocusaurus() {
 74  return <h1>Hello, Docusaurus!</h1>;
 75}
 76```
 77
 78## Admonitions
 79
 80Docusaurus has a special syntax to create admonitions and callouts:
 81
 82```md
 83:::tip My tip
 84
 85Use this awesome feature option
 86
 87:::
 88
 89:::danger Take care
 90
 91This action is dangerous
 92
 93:::
 94```
 95
 96:::tip My tip
 97
 98Use this awesome feature option
 99
100:::
101
102:::danger Take care
103
104This action is dangerous
105
106:::
107
108## MDX and React Components
109
110[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
111
112```jsx
113export const Highlight = ({children, color}) => (
114  <span
115    style={{
116      backgroundColor: color,
117      borderRadius: '20px',
118      color: '#fff',
119      padding: '10px',
120      cursor: 'pointer',
121    }}
122    onClick={() => {
123      alert(`You clicked the color ${color} with label ${children}`)
124    }}>
125    {children}
126  </span>
127);
128
129This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
130
131This is <Highlight color="#1877F2">Facebook blue</Highlight> !
132```
133
134export const Highlight = ({children, color}) => (
135  <span
136    style={{
137      backgroundColor: color,
138      borderRadius: '20px',
139      color: '#fff',
140      padding: '10px',
141      cursor: 'pointer',
142    }}
143    onClick={() => {
144      alert(`You clicked the color ${color} with label ${children}`);
145    }}>
146    {children}
147  </span>
148);
149
150This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
151
152This is <Highlight color="#1877F2">Facebook blue</Highlight> !