-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
可能我没表达清楚,是指这里把 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里用 inline demo 应该是为了避免语法误识别?试试看用 pre
能不能直接规避,类似:
<pre lang="markdown">
:::code-group
...
:::
</pre>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@PeachScript 直接 pre标签 好像会导致没有copy按钮
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
是有问题,先用 pre 吧,后面可以修一下这个问题,pre 也应该替换成 SourceCode
组件
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
试试能不能补充几个 unit test
|
||
::: | ||
|
||
或者直接使用内置 `<code-group>` 标签 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
建议只留一种用法?因为这两种方式对用户来说没有成本和效用上的区别
parent!.children.splice(i!, 1, { | ||
type: 'code', | ||
lang: 'jsx', | ||
value: ` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
可能我没表达清楚,是指这里把 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@PeachScript 🍑老师看看是这个意思吗
非最终代码 请勿合并 |
有什么更新吗? |
后续在 #2059 跟进,PR 关闭,感谢贡献 ❤️ |
🤔 这个变动的性质是?/ What is the nature of this change?
🔗 相关 Issue / Related Issue
Close #352
💡 需求背景和解决方案 / Background or solution
使用 md 增强语法 快速编写展示不同环境语法的 code-group
![20230612235101_rec_](https://private-user-images.githubusercontent.com/94534613/245198352-3e867f24-8fbe-446d-96fa-bbeb2cb8f142.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzAwODQsIm5iZiI6MTcyNjEyOTc4NCwicGF0aCI6Ii85NDUzNDYxMy8yNDUxOTgzNTItM2U4NjdmMjQtOGZiZS00NDZkLTk2ZmEtYmJlYjJjYjhmMTQyLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDA4Mjk0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRlNWQwMTRiNDE4ZTZmM2FhYTA2MDdiZGNlODYwOThhNmZjNzZkYzdjYWYyODNhOTYxOTg3YzZhZjE5Mzk5MDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.YEgTLAN1HKNWeqpL_lHCy5fwsVwxulemh_YKy2ulGy8)
📝 更新日志 / Changelog