考研总算落下帷幕,已顺利上岸,终于有时间来水文了。
这是一篇科普文章,聊一聊MDX格式。如果不出意外,在最新版的Cuteen主题中(Cuteen6.x系列),将会天然支持这种格式,以取代不够灵活的短代码。
什么是MDX格式
MDX是一种结合了Markdown语法和React组件的格式,可以让您在Markdown文档中使用React组件。MDX的全称是Markdown + JSX,是一种使用JavaScript语法编写的Markdown扩展语法。
MDX格式的文档可以被解析成React组件,这意味着您可以在Markdown文档中使用JSX语法来编写交互式的组件,例如表单、按钮、动画等。同时,MDX也支持Markdown的常用语法,如标题、列表、链接等,因此可以方便地编写文档和博客文章。
以上内容来自官网:https://mdxjs.com/
MDX的特点
- 支持Markdown语法和JSX语法:MDX可以在Markdown文档中使用JSX语法,例如React组件、变量、循环等,同时也支持Markdown的常用语法,如标题、列表、链接等。
- 可以使用所有的React组件:MDX支持使用所有的React组件,包括第三方组件库中的组件,因此可以方便地创建交互式的文档和博客文章。
- 可以使用动态数据:MDX可以使用JavaScript语法来处理动态数据,例如从API获取数据并在文档中显示。
- 可以使用MDX工具链:MDX有完整的工具链支持,包括编译器、渲染器和打包工具,可以方便地集成到现有的项目中。
MDX文件结构
以下是一个简单的MDX文档示例:
# Hello, MDX!
这是一个使用MDX格式的文档,可以在其中使用React组件:
<Button onClick={() => alert('Hello, MDX!')}>
Click me!
</Button>
也可以使用Markdown的语法:
- 列表项1
- 列表项2
- 列表项3
以上是一个简单的MDX文档示例,其中包含了一个React组件和一个Markdown列表。
可以看到中间参杂了jsx语法,但是任然能够解析。也就是点击渲染出的按钮,会弹出一个alert框。
再看一下官网给的例子:
右侧的表格就是通过mdx渲染的。也就是说,你可以使用jsx语法渲染出你想要的任何东西。
总之,MDX是一种非常有用的格式,可以让您在Markdown文档中使用React组件,从而创建交互式的文档、博客文章和演示文稿。
官网上也提供了一个Playground,可以在线体验:https://mdxjs.com/playground/
其他
Cuteen6.x将会脱离Typecho的php生态,采用更加现代安全的技术栈,以及工程化的开发方案,敬请期待!
加油加油