Skip to main content

Complete MDX & Markdown Features Reference

One-stop reference for ALL supported features in TechDocs

This document contains every feature you can use in your .md and .mdx files.

Table of Contents​

  1. Basic Markdown Syntax
  2. MDX - React Components in Markdown
  3. Docusaurus Admonitions
  4. Code Blocks
  5. Math Equations (KaTeX)
  6. Tables
  7. Links and References
  8. Images
  9. Lists
  10. Interactive Components (All 11)
  11. Frontmatter
  12. Advanced Features

Basic Markdown Syntax​

Headings​

# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading

Text Formatting​

**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
`Inline code`

Bold text Italic text Bold and italic Strikethrough Inline code

Blockquotes​

> This is a blockquote
> It can span multiple lines
>> Nested blockquote

This is a blockquote It can span multiple lines

Horizontal Rules​

---
***
___

MDX - React Components in Markdown​

MDX allows you to use React components directly in Markdown:

Import Components​

import MyComponent from '@site/src/components/MyComponent';

Use Components​

<MyComponent prop="value" />

<MyComponent>
  Children content here
</MyComponent>

Inline JSX​

export const Highlight = ({children, color}) => (
  <span style={{
    backgroundColor: color,
    borderRadius: '2px',
    color: '#fff',
    padding: '0.2rem',
  }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">highlighted text</Highlight>!

Docusaurus Admonitions​

All Admonition Types​

:::note
This is a note
:::

:::tip
This is a helpful tip
:::

:::info
This is informational
:::

:::warning
This is a warning
:::

:::danger
This is dangerous/critical
:::
note

This is a note

tip

This is a helpful tip

info

This is informational

warning

This is a warning

danger

This is dangerous/critical

With Custom Titles​

:::tip[Pro Tip]
You can customize the title!
:::

:::danger[BREAKING CHANGE]
This will break your code!
:::
Pro Tip

You can customize the title!

Nested Content​

:::warning[Important]
You can include **formatted text**, `code`, and even:

- Lists
- Multiple paragraphs

```js
code blocks

:::


---

## Code Blocks

### Basic Code Block

````md

Plain text code

With Syntax Highlighting​

```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

```python
def greet():
    print("Hello, World!")
```

```bash
npm install
npm start
```
const greeting = "Hello, World!";
console.log(greeting);

With Title​

```javascript title="src/app.js"
function App() {
  return <h1>Hello!</h1>;
}
```
src/app.js
function App() {
  return <h1>Hello!</h1>;
}

With Line Numbers​

```javascript showLineNumbers
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
```

Highlighting Lines​

```javascript {2-3}
function example() {
  const a = 1;  // highlighted
  const b = 2;  // highlighted
  return a + b;
}
```

Live Code Editor (Docusaurus)​

```jsx live
function Clock() {
  const [time, setTime] = React.useState(new Date());
  
  React.useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);
  
  return <div>Current time: {time.toLocaleTimeString()}</div>;
}
```

Math Equations (KaTeX)​

Inline Math​

The formula is $E = mc^2$

The formula is E=mc2E = mc^2

Block Math​

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Complex Equations​

$$
f(x) = \begin{cases}
  x^2 & \text{if } x > 0 \\
  0   & \text{if } x = 0 \\
  -x^2 & \text{if } x < 0
\end{cases}
$$

Tables​

Basic Table​

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
Header 1Header 2Header 3
Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6

Aligned Columns​

| Left | Center | Right |
|:-----|:------:|------:|
| A    | B      | C     |
| 1    | 2      | 3     |
LeftCenterRight
ABC
123

With Formatting​

| Component | **Status** | `Version` |
|-----------|------------|-----------|
| React     |  Active  | `18.0`    |
| Vue       |  Beta    | `3.2`     |
[Visit TechDocs](https://techdocs.co.in)
[Google](https://google.com "Google Homepage")
[About Page](/docs/intro)
[Relative Link](./other-page)
[Link text][reference]

[reference]: https://example.com "Title"
https://techdocs.co.in
contact@techdocs.co.in

Images​

Basic Image​

![Alt text](/img/logo.png)

With Title​

![Alt text](/img/logo.png "Image Title")

Using HTML for Sizing​

<img src="/img/logo.png" alt="Logo" width="200" />

Relative Images​

![Diagram](./img/diagram.png)

Lists​

Unordered Lists​

- Item 1
- Item 2
  - Nested item 2.1
  - Nested item 2.2
- Item 3
  • Item 1
  • Item 2
    • Nested item 2.1
    • Nested item 2.2
  • Item 3

Ordered Lists​

1. First item
2. Second item
   1. Nested item 2.1
   2. Nested item 2.2
3. Third item
  1. First item
  2. Second item
    1. Nested item 2.1
    2. Nested item 2.2
  3. Third item

Task Lists​

- [x] Completed task
- [ ] Incomplete task
- [ ] Another task
  • Completed task
  • Incomplete task
  • Another task

Definition Lists​

Term 1
: Definition 1

Term 2
: Definition 2a
: Definition 2b

Interactive Components (All 11)​

1. Interactive Code Editor​

import InteractiveCodeEditor from '@site/src/components/InteractiveCodeEditor';

<InteractiveCodeEditor 
  title="Try JavaScript"
  initialCode={`console.log("Hello!");
const sum = [1, 2, 3].reduce((a, b) => a + b);
console.log('Sum:', sum);`}
/>

2. Interactive Tabs​

import InteractiveTabs, { CodeTabs } from '@site/src/components/InteractiveTabs';

<CodeTabs 
  examples={[
    { label: 'JavaScript', code: 'console.log("Hello");' },
    { label: 'Python', code: 'print("Hello")' },
    { label: 'Java', code: 'System.out.println("Hello");' }
  ]}
/>

3. Interactive Accordion​

import InteractiveAccordion, { FAQAccordion } from '@site/src/components/InteractiveAccordion';

<FAQAccordion 
  faqs={[
    { question: 'What is this?', answer: 'This is an accordion!' },
    { question: 'How does it work?', answer: 'Click to expand!' }
  ]}
/>

4. API Simulator​

import APISimulator from '@site/src/components/APISimulator';

<APISimulator 
  endpoint="/api/users"
  method="GET"
  description="Fetch users from API"
  initialParams={{ "page": "1", "limit": "10" }}
/>

5. Progress Tracker​

import ProgressTracker from '@site/src/components/ProgressTracker';

<ProgressTracker 
  title="Tutorial Progress"
  steps={[
    { title: 'Step 1', description: 'First step', duration: '5 mins' },
    { title: 'Step 2', description: 'Second step', duration: '10 mins' }
  ]}
/>

6. Interactive Quiz​

import InteractiveQuiz from '@site/src/components/InteractiveQuiz';

<InteractiveQuiz 
  title="Knowledge Test"
  questions={[
    {
      question: 'What is 2 + 2?',
      options: ['3', '4', '5', '6'],
      correctAnswer: 1,
      explanation: 'Basic math: 2 + 2 = 4'
    }
  ]}
/>

7. Terminal Simulator​

import TerminalSimulator from '@site/src/components/TerminalSimulator';

<TerminalSimulator 
  title="$ Terminal"
  commands={{
    'ls': () => 'file1.txt file2.txt folder/',
    'pwd': () => '/home/user/docs',
    'echo hello': (args) => args.join(' ')
  }}
/>

8. Image Comparison​

import ImageComparison from '@site/src/components/ImageComparison';

<ImageComparison 
  beforeImage="/img/before.jpg"
  afterImage="/img/after.jpg"
  beforeLabel="Before"
  afterLabel="After"
/>

9. Searchable Table​

import SearchableTable from '@site/src/components/SearchableTable';

<SearchableTable 
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'value', label: 'Value' },
    { key: 'status', label: 'Status' }
  ]}
  data={[
    { name: 'Item 1', value: '100', status: 'Active' },
    { name: 'Item 2', value: '200', status: 'Inactive' }
  ]}
  itemsPerPage={5}
/>
import LiveSearch from '@site/src/components/LiveSearch';

<LiveSearch 
  placeholder="Search items..."
  items={[
    { name: 'Item 1', description: 'Description 1', category: 'Type A' },
    { name: 'Item 2', description: 'Description 2', category: 'Type B' }
  ]}
  searchFields={['name', 'description']}
/>

11. Interactive Callout​

import InteractiveCallout from '@site/src/components/InteractiveCallout';

<InteractiveCallout type="info" title="Information">
  This is an informational message.
</InteractiveCallout>

<InteractiveCallout type="warning" title="Warning" dismissible={true}>
  This is a warning that can be dismissed.
</InteractiveCallout>

// Types: info, success, warning, danger, tip, note

Frontmatter​

Document Frontmatter​

---
title: My Document Title
description: Document description for SEO
sidebar_position: 1
tags: [tutorial, beginner, react]
keywords: [docs, documentation, technical writing]
---

Blog Post Frontmatter​

---
slug: my-blog-post
title: Blog Post Title
authors: [roushan]
tags: [tutorial, docusaurus]
date: 2026-01-11
---

Common Frontmatter Options​

---
# General
title: Page Title
description: Page description
id: custom-page-id
slug: /custom-url

# Sidebar
sidebar_position: 1
sidebar_label: Custom Label
sidebar_class_name: custom-class

# Display
hide_title: false
hide_table_of_contents: false

# Metadata
tags: [tag1, tag2]
keywords: [keyword1, keyword2]
image: /img/social-card.jpg

# Blog specific
authors: [author1, author2]
date: 2026-01-11
---

Advanced Features​

HTML in Markdown​

<div style={{padding: '20px', background: '#f0f0f0'}}>
  Custom HTML with inline styles
</div>

<details>
  <summary>Click to expand</summary>
  Hidden content here
</details>
Details

Click to expand Hidden content here

Tabs (Docusaurus)​

First import the components:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Then use them in your content:

<Tabs>
  <TabItem value="js" label="JavaScript">
    JavaScript content here
  </TabItem>
  <TabItem value="py" label="Python">
    Python content here
  </TabItem>
</Tabs>

Footnotes​

Here's a sentence with a footnote[^1].

[^1]: This is the footnote content.

Emoji​

:tada: :rocket: :sparkles:

🎉 🚀 ✨

Escape Characters​

\*Not italic\*
\`Not code\`
\[Not a link\]

Line Breaks​

Line 1\
Line 2

Line 3<br/>Line 4

Comment Syntax​

<!-- This is a comment and won't be displayed -->

{/* This is a JSX comment */}

Quick Reference Cheatsheet​

Most Common Syntax​

ElementSyntax
Heading# H1, ## H2, ### H3
Bold**bold**
Italic*italic*
Code`code`
Link[text](url)
Image![alt](url)
List- item or 1. item
Blockquote> quote
Code block```lang ... ```
Table| col1 | col2 |

Component Import Pattern​

// 1. Import at top of file
import Component from '@site/src/components/Component';

// 2. Use in content
<Component prop="value" />

File Types​

  • .md - Plain Markdown (no JSX)
  • .mdx - Markdown + JSX (can use React components)

Pro Tips​

  1. Use MDX for interactive content - Any file with components should be .mdx
  2. Preview changes - Always run npm start to see live updates
  3. Check errors - Watch the terminal for build errors
  4. Organize imports - Keep all imports at the top of the file
  5. Test responsive - Check on mobile, tablet, and desktop
  6. Use admonitions - Better than plain text for callouts
  7. Combine features - Mix components, code blocks, and text
  8. Keep it simple - Don't overuse interactive elements

Need Help?​

  • Email: contact@techdocs.co.in
  • Issues: Check component documentation
  • Examples: See /docs/tutorial-basics/markdown-features

Last Updated: January 11, 2026

This document contains ALL supported features. Bookmark it for quick reference!

Last updated on

Was this page helpful?