Docusaurus Features Guide

This article lists commonly used features in Docusaurus.

warning

For complete documentation, please refer to Docusaurus Features Guide

---

Meta Information

Meta information is placed at the beginning of the document, where:

• slug is used to generate the document URL, e.g., http://192.168.2.217/blog/docs-format
• title is the document title, displayed in the browser tab

---
slug: docs-format
title: Common Document Formats
---

---

Code

• Inline Code

Single backtick: Content with one backtick on each side

• Code Block

Code content:

Add a line at the top with three backticks ``` + language name

End with a new line containing three backticks ```

• Code Block with Title

Add after the language specification: 1 space + title="Title"

This is a title

bash title="This is a title"

• Code Block Line Highlighting

bash uses #

First line not highlighted
Second line highlighted: Add # highlight-next-line above this line
Third line not highlighted
Fourth line not highlighted
Fifth line highlighted: Add # highlight-start above this line
Sixth line highlighted
Seventh line highlighted: Add # highlight-end below this line
Eighth line not highlighted

javascript uses //

First line not highlighted
Second line highlighted: Add // highlight-next-line above this line
Third line not highlighted
Fourth line not highlighted
Fifth line highlighted: Add // highlight-start above this line
Sixth line highlighted
Seventh line highlighted: Add // highlight-end below this line
Eighth line not highlighted

---

References

• Hyperlinks

Welcome to visit Validations Technology Official Website

• Image References

Prerequisites for Image References

First add the image to the static/img directory with a clear, distinguishable name, then reference it in the document.

---

Admonitions

Information

info content

Tips

tip content

Notes

note content

---

Common Technical Symbols

⌘ (command), ⌥ (option/alt), ⇧ (shift), ⌃ (control), ⎋ (esc), etc.

Use the <kbd> tag to represent keyboard shortcuts:

<kbd>⌘ Command</kbd> + <kbd>C</kbd>

⌘ Command + C

---

Interactive Components

For example, use JSX to create an interactive button:

<button onClick={() => alert('button clicked!')}>Click me!</button>