feat: support MDX remarkContainer-CodeGroup #1734
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| parent!.children.splice(i!, 1, { | ||
| type: 'code', | ||
| lang: 'jsx', | ||
| value: ` |
There was a problem hiding this comment.
inline 有点裸，提成 SourceCodeGroup 的内置组件？这样用户也可以通过主题局部覆盖做自定义，items 数据可以通过 JSXProperties 传下去，参考：https://github.com/umijs/dumi/blob/master/src/loaders/markdown/transformer/rehypeEnhancedTag.ts#L33-L39
There was a problem hiding this comment.
可能我没表达清楚，是指这里把 children 直接换成 CodeGroup 的 html 节点，类似下面 Container 那样，现在其实还是用 inline code 实现的，这样会走后面 rehypeDemo 的逻辑，是不必要的
以及上面 JSXProperties 在 remark 阶段应该是不可用的，我一开始想错了，目前看有两个思路：
- 代码块的数据先以子元素形式存在，后面在
rehypeEnhancedTag阶段转换成JSXProperties - 代码块的数据始终以子元素形式存在，运行时由
CodeGroup组件对 children 做转换
这里处理完以后的内容应该类似于：
<CodeGroup>
<code data-lang="js" data-title="JavaScript">balabala...</code>
<code data-lang="ts" data-title="TypeScript">balabala...</code>
</CodeGroup>| 当你的代码需要根据不同环境来采用不同的方案的时候使用，例如： | ||
|
|
||
| ````jsx | ||
| /** |
There was a problem hiding this comment.
这里用 inline demo 应该是为了避免语法误识别？试试看用 pre 能不能直接规避，类似：
<pre lang="markdown">
:::code-group
...
:::
</pre>There was a problem hiding this comment.
@PeachScript 直接 pre标签 好像会导致没有copy按钮
There was a problem hiding this comment.
是有问题，先用 pre 吧，后面可以修一下这个问题，pre 也应该替换成 SourceCode 组件
|
|
||
| ::: | ||
|
|
||
| 或者直接使用内置 `<code-group>` 标签 |
There was a problem hiding this comment.
建议只留一种用法？因为这两种方式对用户来说没有成本和效用上的区别
| parent!.children.splice(i!, 1, { | ||
| type: 'code', | ||
| lang: 'jsx', | ||
| value: ` |
There was a problem hiding this comment.
可能我没表达清楚，是指这里把 children 直接换成 CodeGroup 的 html 节点，类似下面 Container 那样，现在其实还是用 inline code 实现的，这样会走后面 rehypeDemo 的逻辑，是不必要的
以及上面 JSXProperties 在 remark 阶段应该是不可用的，我一开始想错了，目前看有两个思路：
- 代码块的数据先以子元素形式存在，后面在
rehypeEnhancedTag阶段转换成JSXProperties - 代码块的数据始终以子元素形式存在，运行时由
CodeGroup组件对 children 做转换
这里处理完以后的内容应该类似于：
<CodeGroup>
<code data-lang="js" data-title="JavaScript">balabala...</code>
<code data-lang="ts" data-title="TypeScript">balabala...</code>
</CodeGroup>
|
@BoyYangzai 新的几条 comment 有空看看呗 👀 |
| value: `<CodeGroup>`, | ||
| position: node.position, | ||
| }, | ||
| ...(node.children || []).concat({ |
There was a problem hiding this comment.
@PeachScript 🍑老师看看是这个意思吗
|
非最终代码 请勿合并 |
有什么更新吗? |
|
后续在 #2059 跟进，PR 关闭，感谢贡献 ❤️ |
🤔 这个变动的性质是？/ What is the nature of this change?
🔗 相关 Issue / Related Issue
Close #352
💡 需求背景和解决方案 / Background or solution
使用 md 增强语法 快速编写展示不同环境语法的 code-group
📝 更新日志 / Changelog