<rem />

On this page
Bullet list
Table
External URL
Inline code
Shell
Twoslash
Math
Alerts
Diff Lines
Filename

MDX support

2025-01-18
Summary

这是一篇关于MDX语法特性的技术文档,主要包含以下内容:

  1. 数学公式渲染
  2. 警告提示框(Note/Tip/Important/Warning/Caution)
  3. 代码差异对比
  4. 代码块文件名显示

Test MDX

Bullet list

  • First Item
  • Second Item
  • Third Item
  1. First Item
  2. Second Item
  3. Third Item

Table

First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell

External URL

test 哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

Codesandbox:

Checkout this video:

Inline code

Here is an inline code

Shell

npm i foo

Twoslash

interface Todo {
  Todo.title: stringtitle: string
}

const const todo: Readonly<Todo>todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }
Make all properties in T readonly
Readonly
<Todo> = {
title: string
title
: 'Delete inactive users'.String.toUpperCase(): string
Converts all the alphabetic characters in a string to uppercase.
toUpperCase
(),
} const todo: Readonly<Todo>todo.title = 'Hello'
Cannot assign to 'title' because it is a read-only property.
var Number: NumberConstructor
An object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.
Number
.p
  • parseFloat
  • parseInt
  • prototype
NumberConstructor.parseInt(string: string, radix?: number): number
Converts A string to an integer.
@paramstring A string to convert into a number.@paramradix A value between 2 and 36 that specifies the base of the number in `string`. If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal. All other strings are considered decimal.
arseInt
('123', 10)
var window: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/window)
window
.
function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number (+2 overloads)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/setTimeout)
setTimeout
//
const const a: 1a = 1
Custom log message
const const b: 1b = 1
Custom error message
const const c: 1c = 1
Custom warning message
Custom annotation message

Math

LL, MnM_n

L=12v2L = \frac{1}{2} v^2

Alerts

blockquotes

Note

Highlights information that users should take into account, even when skimming.

console.log('hello world')

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Diff Lines

console.log('hewwo')
console.log('hello')
console.log('goodbye')

Filename

import { useEffect } from 'react';
import '@/styles/global.css';

const MyApp = ({ pageProps }) => {
  useEffect(() => {
    document.title = 'hello world';
  }, []);
  return <Component {...pageProps} />;
};

export default MyApp;