使用Gatsby从富文本组件中将Markdown转换为HTML
使用Gatsby从富文本组件中将Markdown转换为HTML
提问于 2019-05-06 10:21:44
我正在使用Contentful的Rich-Text字段类型来构建页面，我拥有的Embedded_Blocks之一是用于Markdown字段类型的，我正在使用它来构建一个表：
标记字段类型：
| Title | Title |
| ---------- | ---------- |
| Cell | Cell | 我可以检索富文本数据并构建我的Embedded_Blocks，如下所示：
[BLOCKS.EMBEDDED_ENTRY]: (node) => {
const fields = node.data.target.fields;
switch (node.data.target.sys.contentType.sys.id) {
case 'video':
const url = (fields.url['en-US']);
return <Video url={url}/>
// This is how I'm currently trying to convert Markdown to HTML
///////////////////////////////////////////////////////////////
case 'markdown':
const markdown = (fields.markdown['en-US']);
console.log('markdown', markdown);
return <div dangerouslySetInnerHTML={{ __html: markdown }} />
default:
return <div>Fallback</div>
}
},我的问题是，它只返回一个字符串，我假设是因为在传递给dangerouslySetInnerHTML={{ __html: markdown }}之前，我没有将markdown转换为HTML。
如何将Markdown转换为HTML，以便可以使用dangerouslySetInnerHTML={{ __html: markdown }}呈现它
Stack Overflow用户
发布于 2019-06-12 21:41:05
在Gatsby中实现这一点的最合适的方法是在Gatsby onCreateNode生命周期钩子中创建子节点。此挂钩仅在nodejs进程中调用，并在下载内容条目时运行一次markdown解析。
这应该可以让您开始--它基于Gatsby的gatsby-transformer-remark中的代码
请注意，这是伪代码-当然，您必须对其进行测试。
// gatsby-node.js
var remark = require('remark')
var recommended = require('remark-preset-lint-recommended')
var html = require('remark-html')
const processor = remark()
.use(recommended)
.use(html)
export async function onCreateNode({ actions, node, loadNodeContent}) {
if (!/RichText/.test(node.internal.type)) {
return
}
const markdown = // somehow load the raw markdown from the node - I haven't studied RichText nodes yet
const html = processor.process(markdown)
const markdownNode = {
id: createNodeId(`${node.id} >>> MarkdownRemark`),
children: [],
parent: node.id,
internal: {
content: data.content,
type: `MarkdownRemark`,
},
}
actions.createNode(markdownNode)
actions.createParentChildLink({ parent: node, child: markdownNode })
}作为参考，here is where Contentful creates the Rich Text nodes inside Gatsby:
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55998067
复制相关文章
相似问题
腾讯云开发者
