mirror of
https://github.com/daffyyyy/CS2-SimpleAdmin.git
synced 2026-02-18 18:49:23 +00:00
b0d8696756
Introduces a new documentation site for CS2-SimpleAdmin using Docusaurus, including developer API references, tutorials, user guides, and module documentation. Removes the CleanModule example and updates FunCommands and ExampleModule. Also updates main plugin and API files to support new documentation and module structure.
153 lines
2.9 KiB
Plaintext
153 lines
2.9 KiB
Plaintext
---
|
|
sidebar_position: 4
|
|
---
|
|
|
|
# Markdown Features
|
|
|
|
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
|
|
|
|
## Front Matter
|
|
|
|
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
|
|
|
|
```text title="my-doc.md"
|
|
// highlight-start
|
|
---
|
|
id: my-doc-id
|
|
title: My document title
|
|
description: My document description
|
|
slug: /my-custom-url
|
|
---
|
|
// highlight-end
|
|
|
|
## Markdown heading
|
|
|
|
Markdown text with [links](./hello.md)
|
|
```
|
|
|
|
## Links
|
|
|
|
Regular Markdown links are supported, using url paths or relative file paths.
|
|
|
|
```md
|
|
Let's see how to [Create a page](/create-a-page).
|
|
```
|
|
|
|
```md
|
|
Let's see how to [Create a page](./create-a-page.md).
|
|
```
|
|
|
|
**Result:** Let's see how to [Create a page](./create-a-page.md).
|
|
|
|
## Images
|
|
|
|
Regular Markdown images are supported.
|
|
|
|
You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
|
|
|
|
```md
|
|
|
|
```
|
|
|
|
|
|
|
|
You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
|
|
|
|
```md
|
|
|
|
```
|
|
|
|
## Code Blocks
|
|
|
|
Markdown code blocks are supported with Syntax highlighting.
|
|
|
|
````md
|
|
```jsx title="src/components/HelloDocusaurus.js"
|
|
function HelloDocusaurus() {
|
|
return <h1>Hello, Docusaurus!</h1>;
|
|
}
|
|
```
|
|
````
|
|
|
|
```jsx title="src/components/HelloDocusaurus.js"
|
|
function HelloDocusaurus() {
|
|
return <h1>Hello, Docusaurus!</h1>;
|
|
}
|
|
```
|
|
|
|
## Admonitions
|
|
|
|
Docusaurus has a special syntax to create admonitions and callouts:
|
|
|
|
```md
|
|
:::tip My tip
|
|
|
|
Use this awesome feature option
|
|
|
|
:::
|
|
|
|
:::danger Take care
|
|
|
|
This action is dangerous
|
|
|
|
:::
|
|
```
|
|
|
|
:::tip My tip
|
|
|
|
Use this awesome feature option
|
|
|
|
:::
|
|
|
|
:::danger Take care
|
|
|
|
This action is dangerous
|
|
|
|
:::
|
|
|
|
## MDX and React Components
|
|
|
|
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
|
|
|
|
```jsx
|
|
export const Highlight = ({children, color}) => (
|
|
<span
|
|
style={{
|
|
backgroundColor: color,
|
|
borderRadius: '20px',
|
|
color: '#fff',
|
|
padding: '10px',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={() => {
|
|
alert(`You clicked the color ${color} with label ${children}`)
|
|
}}>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
|
|
|
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|
|
```
|
|
|
|
export const Highlight = ({children, color}) => (
|
|
<span
|
|
style={{
|
|
backgroundColor: color,
|
|
borderRadius: '20px',
|
|
color: '#fff',
|
|
padding: '10px',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={() => {
|
|
alert(`You clicked the color ${color} with label ${children}`);
|
|
}}>
|
|
{children}
|
|
</span>
|
|
);
|
|
|
|
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
|
|
|
|
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
|