在Gatsby.js中无需在Markdown中直接设为HTML，转换Frontmatter内容为HTML的方法

当然有简便方法！完全不用在Markdown的Frontmatter里直接写原生HTML，下面分享两种实用方案，帮你把description这类Frontmatter字段转成HTML：

方案一：用remark手动解析（最灵活） #

如果你的Frontmatter字段里写的是Markdown语法（比如description: "这是**加粗**的描述"），可以借助remark和remark-html这两个工具来手动解析。

步骤1：安装依赖 #

先在项目里安装需要的包：

npm install remark remark-html

步骤2：在组件中解析并渲染 #

在你的页面或模板组件里，先通过GraphQL获取Frontmatter数据，然后写一个异步函数来解析内容，最后用dangerouslySetInnerHTML渲染成HTML：

import { useState, useEffect } from 'react';
import { remark } from 'remark';
import html from 'remark-html';
import { graphql } from 'gatsby';

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        description
      }
    }
  }
`;

const PostTemplate = ({ data }) => {
  const { description } = data.markdownRemark.frontmatter;
  const [descriptionHtml, setDescriptionHtml] = useState('');

  // 解析Markdown内容为HTML的函数
  const parseToHtml = async (text) => {
    const result = await remark().use(html).process(text);
    return result.toString();
  };

  // 组件挂载时解析内容
  useEffect(() => {
    if (description) {
      parseToHtml(description).then(htmlStr => setDescriptionHtml(htmlStr));
    }
  }, [description]);

  return (
    <div className="post-description">
      {/* 渲染解析后的HTML */}
      <div dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
    </div>
  );
};

export default PostTemplate;

⚠️ 注意：使用dangerouslySetInnerHTML时，要确保Frontmatter的内容是可信的（比如自己维护的内容），避免XSS安全风险。

方案二：用Gatsby插件自动解析（更省心） #

如果你用的是gatsby-plugin-mdx替代gatsby-transformer-remark，可以配置插件自动解析Frontmatter里的Markdown字段。

在gatsby-config.js里配置插件时，指定要解析的Frontmatter字段：

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        extensions: ['.mdx', '.md'],
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-frontmatter',
            options: {
              // 指定要解析的Frontmatter字段
              fields: ['description']
            }
          }
        ]
      }
    }
  ]
};

配置完成后，你通过GraphQL查询时，就能直接拿到解析后的HTML内容（字段名会变成descriptionHtml之类的，具体看插件输出），直接渲染即可。

这样不管你在Frontmatter的description里写的是Markdown语法还是纯文本，都能轻松转成HTML格式，不用在Frontmatter里写<strong>这类标签~

内容的提问来源于stack exchange，提问作者Otavio Padovani