Tutorial •
|

Markdown Advanced Features Guide

Explore advanced Markdown usage, including tables, code blocks, mathematical formulas, and task lists.

Tables

You can create tables using pipe symbols | and hyphens -. Use colons : in the separator line to define text alignment.

Alignment:

  • :--- Left align (default)
  • :--: Center align
  • ---: Right align

Code Example:

| Item | Price | Stock |
| :--- | :--: | ---: |
| Apple | $1 | 100 |
| Banana | $2 | 50 |
| Orange | $3 | 20 |

Rendered Result:

ItemPriceStock
Apple$1100
Banana$250
Orange$320

Code Blocks

Inline Code

Wrap code with single backticks: `const a = 1`.

Fenced Code Blocks

Use triple backticks and optionally specify the language for syntax highlighting.

Code Example:

```javascript
function hello() {
  console.log("Hello, World!");
}
```

Diff Syntax

You can use diff syntax to show code changes.

Code Example:

```diff
- const oldVar = 1;
+ const newVar = 2;
```

Task Lists

Use - [ ] or - [x] to create interactive checklists.

Code Example:

- [x] Completed task
- [ ] Pending task
  - [ ] Sub-task A
  - [x] Sub-task B

Rendered Result:

  • Completed task
  • Pending task
    • Sub-task A
    • Sub-task B

Mathematical Formulas (LaTeX)

Many Markdown editors (including our tool) support rendering mathematical formulas using $.

Code Example:

Inline formula: $E = mc^2$

Block formula:
$$
\sum_{i=1}^n i = \frac{n(n+1)}{2}
$$

HTML Support

Markdown allows you to use raw HTML tags for more complex formatting.

Collapsible Details

Use <details> and <summary> tags to create collapsible content.

Code Example:

<details>
  <summary>Click to view details</summary>
  Here is the hidden content.
</details>

Keyboard Keys

Use the <kbd> tag to simulate keyboard keys.

Code Example:

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.

Rendered Result: Press Ctrl + C to copy.

Footnotes

Use [^keyword] to add footnotes.

Code Example:

This is a text with a footnote[^1].

[^1]: This is the explanation of the footnote.

Use angle brackets <> to quickly convert URLs into links.

Code Example:

<https://tools.ai225.com>
<[email protected]>

Try Advanced Features Now

Go to our Markdown Online Editor to experience these advanced features. Whether you are writing technical documentation or personal notes, these advanced techniques will make your documents more professional and beautiful.

Related Articles