title: 我的笔记网站换新皮肤啦 date: 2024-06-02 12:28:00+8 tags: 笔记,note,next.js

1 这是一些测试

1.1 测试代码样式

javascript是最受欢迎的编程语音之一，他的变量声明语法类似这样，注意const赋值是不可修改的。

var a = 1;
let b = 2;
const c = 3;
console.log(a + b + c);

如果代码块语音prism不识别:

这是无语言标记的markdown

1.2 测试表格

源代码为：

| 姓名 | 年龄 | 性别 |
| ---- | ---- | ---- |
| 张三 | 18 | 男 |

输出效果如下：

姓名	年龄	性别
张三	18	男

1.3 测试嵌入html模块

源码为

<div style={{background: 'red', color: 'white', fontSize: '2rem'}}>你好</div>

输出效果如下:

1.4 测试嵌入React组件

从antd中引入了常用的Card、Tooltip、Button、DirectoryTree组件，以及自己写的Tabs/Item组件可以直接在mdx文件中使用，直接嵌入代码和效果如下

<div className="flex">
    <Card style={{ width: 300, border: '1px solid' }}>
        <Tooltip title="prompt text">
            <Button type={'primary'}>ant design</Button>
        </Tooltip>
    </Card>
    <Card style={{ width: 300 }}>
        <DirectoryTree
            multiple
            defaultExpandAll
            treeData={[
                {title: 'parent 0', children: [{ title: 'leaf 0-0', isLeaf: true},{ title: 'leaf 0-1', isLeaf: true}]},
                {title: 'parent 1', children: [{ title: 'leaf 1-0', isLeaf: true},{ title: 'leaf 1-1', isLeaf: true}]},
            ]}
        />
    </Card>
    <Card style={{ width: 300 }}>
        <Tabs defaultIndex={0}>
            <Item title={"tab1"}>Content of tab1</Item>
            <Item title={"tab2"}>Hello Mdx</Item>
        </Tabs>
    </Card>
</div>

<div className="flex"> <Card style={{ width: 300, border: '1px solid' }}> <Tooltip title="prompt text"> <Button type={'primary'}>ant design</Button> </Tooltip> </Card> <Card style={{ width: 300 }}> <DirectoryTree multiple defaultExpandAll treeData={[ {title: 'parent 0', children: [{ title: 'leaf 0-0', isLeaf: true},{ title: 'leaf 0-1', isLeaf: true}]}, {title: 'parent 1', children: [{ title: 'leaf 1-0', isLeaf: true},{ title: 'leaf 1-1', isLeaf: true}]}, ]} /> </Card> <Card style={{ width: 300 }}> <Tabs defaultIndex={0}> <Item title={"tab1"}>Content of tab1</Item> <Item title={"tab2"}>Hello Mdx</Item> </Tabs> </Card> </div>

1.5 测试嵌入iframe工具

CodeSandBox

</iframe>

Jsrun