Skip to main content

kitchen-sink

id: kitchen-sink # This ID is used for docusaurus to determine the difference between files title: Kitchen Sink - All The Features # Keep file names short if possible, change title here description: A demonstration of all the common Markdown and Docusaurus MDX features. slug: /kitchen-sink # Use this to change what shows in the URL​

This page demonstrates the most common features you'll use when creating documentation. It includes standard Markdown as well as special features provided by Docusaurus.

Basic Markdown​

This section covers the standard Markdown syntax that works everywhere.

Text Formatting​

Here is some bold text. Here is some italic text. Here is some bold and italic text. And this is strikethrough text.

For highlighting commands or variable names, use inline code.

Headings​

The page title is automatically an H1. The sections below show H2 through H6.

Heading 2​

Heading 3​

Heading 4​

Heading 5​
Heading 6​

Lists​

Unordered List​

  • Item 1
  • Item 2
    • Nested Item 2a
    • Nested Item 2b
  • Item 3

Ordered List​

  1. First item
  2. Second item
  3. Third item
  4. Nested item 3a
  5. Nested item 3b

Task List (Checkboxes)​

  • Completed task
  • Incomplete task
  • Awaiting review

You can link to internal docs or to external sites.

Blockquotes​

A blockquote is a great way to call out a quote from a person or a document.

"The ability to quote is a serviceable substitute for wit."

— W. Somerset Maugham

Images​

Docusaurus Logo

Tables​

Header 1Header 2 (Centered)Header 3 (Right-Aligned)
Cell 1, Row 1Cell 2, Row 1Cell 3, Row 1
Cell 1, Row 2Cell 2, Row 2Cell 3, Row 2
ShortA much longer cell$1.00

Horizontal Rule​

Use a horizontal rule to create a thematic break between sections.

Docusaurus Features (MDX)​

Docusaurus uses MDX, which allows you to use React components inside your Markdown. This unlocks many powerful features. These allow us to make these markdown documents even more powerful.

Admonitions​

Admonitions are a great way to highlight important information.

note

This is a note admonition. It's for information that is helpful but not critical.

tip

This is a tip admonition. Use it for helpful suggestions or best practices.

info

This is an info admonition. It's for important, factual information.

caution

This is a caution admonition. Use it for warnings or potential pitfalls the user should be aware of.

danger

This is a danger admonition. Use this for critical warnings, like actions that could result in data loss or security risks.

Admonitions with Custom Titles​

You can also provide a custom title.

My Custom Title

This admonition has a custom title instead of the default "Note".

Code Blocks​

Docusaurus uses Prism for syntax highlighting.

Basic Code Block​

function greet(name) {
 return `Hello, ${name}!`;
}


console.log(greet('World'));

Code Block with Title​

src/hello.js
function greet(name) {
 return `Hello, ${name}!`;
}


console.log(greet('World'));

Line Highlighting​

Use the // highlight-next-line, // highlight-start, and // highlight-end comments.

function greet(name) {
 return `Hello, ${name}!`;
}


console.log(greet('World'));

You can also specify line numbers in the title.

src/example.js
import React from 'react';


function MyComponent() {
 // This line is not highlighted
 const message = "This is a highlighted block.";
 console.log(message);
 return <div>{message}</div>;
 // This line is not highlighted either.
}

Show Line Numbers​

// This is a long code block
// where you might want to show
// line numbers to make it easier
// to reference specific lines
// in your documentation.
// Just add showLineNumbers to the
// language metadata.

Tabs​

Tabs are useful for showing information in multiple formats, like code in different programming languages.

console.log('Hello, JavaScript!');

Collapsible Content / Details​

Use the <details> and <summary> tags to create collapsible sections, perfect for FAQs or hiding long outputs.

Click here to see the answer!

This is the content hidden inside the collapsible section. You can put any content here, including code blocks, images, or lists.

Custom React Components​

Since Docusaurus uses MDX, you can write and use your own React components.

This is a custom JSX component right in your Markdown! 🚀

Mermaid Diagrams​

You can create diagrams using the Mermaid syntax.