MDX,组件时代的Markdown格式

  考研总算落下帷幕,已顺利上岸,终于有时间来水文了。

  这是一篇科普文章,聊一聊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列表。
Mdx

  可以看到中间参杂了jsx语法,但是任然能够解析。也就是点击渲染出的按钮,会弹出一个alert框。

  再看一下官网给的例子:

官网mdx案例

  右侧的表格就是通过mdx渲染的。也就是说,你可以使用jsx语法渲染出你想要的任何东西。

  总之,MDX是一种非常有用的格式,可以让您在Markdown文档中使用React组件,从而创建交互式的文档、博客文章和演示文稿。

  官网上也提供了一个Playground,可以在线体验:https://mdxjs.com/playground/

其他

  Cuteen6.x将会脱离Typecho的php生态,采用更加现代安全的技术栈,以及工程化的开发方案,敬请期待!

打赏
评论区
头像
  • 高兴
  • 小怒
  • 脸红
  • 内伤
  • 装大款
  • 赞一个
  • 害羞
  • 汗
  • 吐血倒地
  • 深思
  • 不高兴
  • 无语
  • 亲亲
  • 口水
  • 尴尬
  • 中指
  • 想一想
  • 哭泣
  • 便便
  • 献花
  • 皱眉
  • 傻笑
  • 狂汗
  • 吐
  • 喷水
  • 看不见
  • 鼓掌
  • 阴暗
  • 长草
  • 献黄瓜
  • 邪恶
  • 期待
  • 得意
  • 吐舌
  • 喷血
  • 无所谓
  • 观察
  • 暗地观察
  • 肿包
  • 中枪
  • 大囧
  • 呲牙
  • 抠鼻
  • 不说话
  • 咽气
  • 欢呼
  • 锁眉
  • 蜡烛
  • 坐等
  • 击掌
  • 惊喜
  • 喜极而泣
  • 抽烟
  • 不出所料
  • 愤怒
  • 无奈
  • 黑线
  • 投降
  • 看热闹
  • 扇耳光
  • 小眼睛
  • 中刀
  • 呵呵
  • 哈哈
  • 吐舌
  • 太开心
  • 笑眼
  • 花心
  • 小乖
  • 乖
  • 捂嘴笑
  • 滑稽
  • 你懂的
  • 不高兴
  • 怒
  • 汗
  • 黑线
  • 泪
  • 真棒
  • 喷
  • 惊哭
  • 阴险
  • 鄙视
  • 酷
  • 啊
  • 狂汗
  • what
  • 疑问
  • 酸爽
  • 呀咩爹
  • 委屈
  • 惊讶
  • 睡觉
  • 笑尿
  • 挖鼻
  • 吐
  • 犀利
  • 小红脸
  • 懒得理
  • 勉强
  • 爱心
  • 心碎
  • 玫瑰
  • 礼物
  • 彩虹
  • 太阳
  • 星星月亮
  • 钱币
  • 茶杯
  • 蛋糕
  • 大拇指
  • 胜利
  • haha
  • OK
  • 沙发
  • 手纸
  • 香蕉
  • 便便
  • 药丸
  • 红领巾
  • 蜡烛
  • 音乐
  • 灯泡
  • 开心
  • 钱
  • 咦
  • 呼
  • 冷
  • 生气
  • 弱
  • 阿鲁
  • 泡泡
    头像

    这个还不熟悉,需要了解下

    头像
    93攻略
      

    你写得非常清晰明了,让我很容易理解你的观点。

    头像
    心月云
      

    期待期待~

    头像
    CJHONG
      

    为了Cuteen6.x,我要去学React了呜呜,感谢博主推动我这个懒比