[NextJS]在Web端实现.md文件内容展示

Posted 2021-10-12 泉州牧码人

NextJS开发过程中，使用了MateriaUI进行博客网站搭建，对Markdown的语法插件markdown-to-jsx了解不多，并且想要高亮代码块的显示效果。

使用到的组件

npm install --save react-markdown react-syntax-highlighter

1.react-markdown：markdown解析展示组件
2.react-syntax-highlighter：高亮样式组件

使用方式（组件化）

import React from \'react\';
import ReactMarkdown from \'react-markdown\';
import {Prism as SyntaxHighlighter} from \'react-syntax-highlighter\'
import {tomorrow } from \'react-syntax-highlighter/dist/cjs/styles/prism\';

const renderers = {
  code: ({language, value}) => {
    return <SyntaxHighlighter style={tomorrow} language={language} children={value} />
  },
}

export default function Markdown(props) {
  return <ReactMarkdown renderers={renderers} options={options} {...props} />;
}

出现的问题

1. react-syntax-highlighter报错Unexpected token export

解决方式：样式路径esm改cjs 【相关ISSUE】

内容原创，未经本人同意禁止转载