[nextjs] display the content of. MD file on the web


In the process of nextjs development, the material UI is used to build the blog website, and the syntax plug-in of markdown is implementedmarkdown-to-jsxI don’t know much about it, and I want to highlight the display effect of the code block.

Components used

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

1.react-markdown: markdown parsing display component
2.react-syntax-highlighter: highlight style component

Usage (componentization)

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} />;
Problems arising
  1. react-syntax-highlighterreport errorsUnexpected token export

Solution: style pathesmchangecjsRelated issues

The content is original and cannot be reproduced without my consent

Recommended Today

The road of high salary, a more complete summary of MySQL high performance optimization in history

preface MySQL for many linux practitioners, is a very difficult problem, most of the cases are because of the database problems and processing ideas are not clear. Before the optimization of MySQL, we must understand the query process of MySQL. In fact, a lot of query optimization work is to follow some principles so that […]