问题标签 [remarkjs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
node.js - 如何使用备注将markdown解析为json
remark 站点有一个指向 AST explorer 的链接,用于输出 remark - https://astexplorer.net/#/gist/0a92bbf654aca4fdfb3f139254cf0bad/ffe102014c188434c027e43661dbe6ec30042ee2
我找不到的是如何对 AST 进行解析 - 所有示例都转换为 html。
我有这个代码
但我在这里遇到了一些错误,我不知道如何解决
markdown - 用 HTML 节点替换段落节点
问题
如何将“段落”节点替换为 MDX 的“html”节点?
背景
将每个“twitter.com”链接替换为扩展的 Twitter,在 MDX 内容中嵌入 HTML。
可重现的 CodeSandbox:https ://codesandbox.io/s/dazzling-curran-2bcwe?file=/src/index.mjs:2024-3439
问题
我有一个 MDX 内容,其中包含 twitter 链接列表(例如https://twitter.com/BrendanEich/status/1151317825908166656),替换段落节点会导致以下错误
../node_modules/esbuild/lib/main.js:869:27:错误:[插件:esbuild-xdm] 无法在 failureErrorWithLog (/sandbox/node_modules/esbuild/lib/main.js: 1449:15) 在 /sandbox/node_modules/esbuild/lib/main.js:1131:28 在 runOnEndCallbacks (/sandbox/node_modules/esbuild/lib/main.js:921:63) 在 buildResponseToResult (/sandbox/node_modules/esbuild /lib/main.js:1129:7) 在 /sandbox/node_modules/esbuild/lib/main.js:1236:14 在 /sandbox/node_modules/esbuild/lib/main.js:609:9 在 handleIncomingPacket (/sandbox /node_modules/esbuild/lib/main.js:706:9) 在 Socket.readFromStdout (/sandbox/node_modules/esbuild/lib/main.js:576:7) 在 Socket.emit (events.js:315:20)在 addChunk (internal/streams/readable.js:309:12)
有问题的代码
markdown - highlight.js 不适用于 Next.js 应用程序中的降价
我正在创建一个 next.js 博客。使用 remark 库,我们将 markdown 转换为 html 语言并应用 markdown 样式。问题是我想使用 highlight.js 在代码上放置一个主题。我已经检查加载所需的 css 文件,但它不适用。酌情指定用法。
反应:17.0.2
下一个:11.1.0,
节点.js:16.5.0,
备注:13.0.0,
备注-html:13.0.1
reactjs - 尝试使用 remark-html 和 remark-gfm 渲染带有降价的表格时出错
我正在尝试为 remark-html 添加表降价支持,但出现以下错误:TypeError: Cannot read property '3' of undefined
.
我尝试使用https://unifiedjs.com/learn/recipe/remark-table/上的官方文档来实现这一点。
模块和代码:
我错过了什么?没有 remark-gfm 一切都按预期工作,但表格不可见。
gatsby - 不能要求 gatsby-plugin-mdx 的 remark 和 rehype 插件
我试图遵循有关包括 gatsby-plugin-mdx 的 rehype 插件的文档。具体来说,我试图使用该rehype-slug
插件。我安装了 npm 打包并将我的gatsby.config.js
文件设置为
gatsby develop
我遇到以下错误:
Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\User\Documents\test-site\node_modules\rehype-slug\index.js require() of ES modules is not supported.
我在尝试使用remark-math
和rehype-katex
插件时遇到了类似的问题。我正在使用 Gatsby CLI 的 3.13.0 版本。即使使用全新的网站,问题仍然存在。对此问题的任何帮助将不胜感激。
markdown - 使用 jekyll 的“包含”和备注
我很高兴使用 jekyll 的评论。Jekyll 让我使用模板文件,因为它在wiki中有所描述。
我还想include
在我的幻灯片中使用 jekyll 的命令,例如{% include something.html %}
. 但不知何故,我无法让它工作:当我构建我的幻灯片时,命令被逐字{% include something.html %}
解析到我的幻灯片中(见下面的截图)。
我的default-presentation.md
文件内容如下,其中 as_includes/test.html
仅包含<p>test</p>
. 我还在这里创建了一个包含所有文件的最小存储库。
完全披露:我也通过github issue问了这个问题
reactjs - Remark 和 Rehype 之间有什么区别,为什么我要使用一个而不是另一个?
我有点困惑。我认为 remark 是一个降价处理器,rehype 是一个 html 处理器。所以 remark 需要一些降价,转换它,然后给我一些降价。Rehype 需要一些 html,对其进行转换,然后给我一些 html - 这是正确的吗?
我遇到了这些包裹remark-slug
,rehype-slug
它们基本上都做同样的事情。我真的不明白为什么一个人会使用一个而不是另一个?是否有我不知道的优点或缺点(如安全风险、访问某些变量)?或者对于何时使用什么有普遍的共识?
reactjs - 使用 react-markdown 渲染的降价中不存在行分隔符
我react-markdown
用来渲染降价。文本内容正确呈现,但我无法查看标题下和表格的行分隔符。我尝试在演示中粘贴相同的内容,https://remarkjs.github.io/react-markdown/
并使用 line separators 正确呈现。
以下是实现的代码框链接。https://codesandbox.io/s/strange-firefly-zzv3r?file=/src/App.js。注意:该表在行和列之间没有行分隔符。为了呈现表格,我使用remark-gfm
了文档中提到的react-markdown
以下是呈现降价的 React 组件