Built-in supported MD/MDX syntax

2023-02-25

Basic inline syntax

This Blog was based on Tailwind Next Blog, a blog template open source project at Github. You can use this template via run npx degit https://github.com/JasonLamv-t/tailwind-next-blog in a empty directory to initialize for your own blog.

The above header was h3, your can define a header like this:

# This is H1
## This is H2
### This is H3
#### This is H4
##### This is H5
###### This is H6

And the effect like this:

This is H1

This is H2

This is H3

This is H4

This is H5

This is H6

Header 2&3 has auto-gen link, your can hover to check the effect.

Footnote

A Footnote[^1] example.

[^1]: Reference

A Footnote¹ example.

Emphasis

_This text will be italic_

**This text will be bold**

_You **can** combine them_ or **combine them _like_ this**

This text will be italic

This text will be bold

You can combine them or combine them like this

Lists

Ordered

1. lv_1 
2. lv_2
   1. lv_2_1
      1. lv_2_1_1
   2. lv_2_2
3. lv_3

lv_1
lv_2
1. lv_2_1
  1. lv_2_1_1
2. lv_2_2
lv_3

Unordered

- Item 1
- Item 2
  - Item 2_1 in nested
    - Item 2_1_1 in nested
  - Item 2_2 in nested
- Item 3

Item 1
Item 2
- Item 2_1 in nested
  - Item 2_1_1 in nested
- Item 2_2 in nested
Item 3

Tasklist

- [ ] to do
- [x] done

to do
done

Images

![logo](/data/images/logo.jpg)

Inline code

This is a simple `example` of inline code

This is a simple example of inline code

Code block

```
const hint = 'Basic usage example';
```

const hint = 'Basic usage example';

Syntax highlighting

```ts
const hint = 'Basic usage example';
```

const hint = 'Basic usage example';

With title

```ts:Title
const codeType = 'ts';
const title = 'Code blocks with title';
```

Title
const codeType = 'ts';
const title = 'Code blocks with title';

Show line numbers

```ts:Show-line-numbers showLineNumbers
const title = 'Code blocks with title';
```

Show-line-numbers
const title = 'Code blocks with title';

Highlight code

```ts:Highlight showLineNumbers {2, 4-6}
const navigations = [
  ['Blogs', '/blogs'],
  ['Projects', '/projects'],
  ['About', '/about'],
];
```

Highlight
const navigations = [
  ['Blogs', '/blogs'],
  ['Projects', '/projects'],
  ['About', '/about'],
];

Math

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

Lift( $L$ ) can be determined by Lift Coefficient ( $C_L$ ) like the following equation.

L = \frac{1}{2} \rho v^2 S C_L

Quote

> quote: note about that...

quote: note about that...

Note(additional)

<Info>This is a Information.</Info>

<Warn>
  This is a Warning.
</Warn>

This is a Information.

This is a Warning.

Wide table

|                              | E1-512M | E1-2048M  | E1-3072M  | C1-2048M  |
| ---------------------------- | ------- | --------- | --------- | --------- |
| CPU(only) maximum usage      | 32%/45% | 100%/110% | 200%/202% | 100%/105% |
| CPU(with RAM) maximum usage  | 32%/45% | 136%/140% | 200%/400% | 80%/300%  |
| CPU Blowfish(less is better) | 24.643  | 6.055     | 4.016     | 8.323     |

	E1-512M	E1-2048M	E1-3072M	C1-2048M
CPU(only) maximum usage	32%/45%	100%/110%	200%/202%	100%/105%
CPU(with RAM) maximum usage	32%/45%	136%/140%	200%/400%	80%/300%
CPU Blowfish(less is better)	24.643	6.055	4.016	8.323

Strikethrough

Any text with ~~deleted~~ will be ~~delete~~.

Autolink literals

www.example.com, https://example.com, contact@example.com, and [example.com](https://example.com).

www.example.com, https://example.com, contact@example.com, and example.com.

Reference ↩