How to display Markdown files in JS?

Time:2022-8-5

<span style=”font-size:19px”>What’s Markdown?</span>

Markdown is a lightweight markup language founded by John Gruber. It allows people to write documents in plain text that is easy to read and write, and then convert them into valid XHTML (or HTML) documents. The language incorporates many of the features of plain text markup already found in e-mail.

Due to the lightweight, easy-to-read and easy-to-write features of Markdown, and support for pictures, charts, and mathematical expressions, many websites currently use Markdown extensively to write help documents or to post messages on forums. Such as GitHub, Reddit, Diaspora, Stack Exchange, OpenStreetMap, SourceForge, Jianshu, etc., and can even be used to write e-books.

[[wiki]](https://zh.wikipedia.org/wiki…)

<span style=”font-size:19px”>Why Markdown?</span>

In business scenarios involving the display of text content, such as building a blog system or writing online resumes, using markdown for writing and display will make the content layout more concise and beautiful, display compatibility under different devices is more friendly, and support embedded html, process flow Features such as diagrams and code blocks make the writing process more flexible and easy to use.

markdown syntax

<span style=”font-size:19px”>How to show Markdown?</span>

There are many libraries for displaying markdown on the front end. Since I mainly use React, I choose react-markdown.js to achieve this

<span style=”font-size:19px”>Hello world</span>

npm install react-markdown --save
import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'

function Markdown(){
    return <ReactMarkdown># Hello, *world*!</ReactMarkdown>
}

In this way, we successfully display a piece of markdown text on the page, it's very simple, right?

<span style=”font-size:19px”>How to cite external link markdown for display?</span>

In order to be compatible with the GFM format, we need to install it separatelyremark-gfm

npm install remark-gfm --save
import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `https://yourmarkdownlinks.com`

function Markdown(){
    return <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />
}

At this time, a classmate asked, what if I want to quote the markdown of the local link?

eazy! Just use require to introduce it, and call the default attribute on the obtained instance to get a string of string text

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'

const markdown = require('relative path to your local markdown file')
// const markdown = require('@/docs/test.md')

function Markdown(){
    return <ReactMarkdown children={markdown.default}/>
}

<span style=”font-size:19px”>How to set code highlighting?</span>

npm install rehype-raw react-syntax-highlighter --save

If students who use ts encounter type errors, they need to install

npm install @types/react-syntax-highlighter --save

After installation, you can node_modules/react-syntax-highlighter/dist/esm/styles You can see the supported highlight theme under the path and import it for use.

import React from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';

function Markdown(){
    const markdown = 'Highlight code block'

    return <ReactMarkdown
        children={markdown}
        rehypePlugins={[rehypeRaw]}
        components={{
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || '');
            return !inline && match ? (
              <SyntaxHighlighter
                children={String(children).replace(/\n$/, '')}
                style={prism}
                language={match[1]}
                PreTag="div"
                {...(props as any)}
              />
            ) : (
              <code className={className} {...props}>
                {children}
              </code>
            );
          },
        }}
      ></ReactMarkdown>
}

react-markdown will judge and highlight the corresponding code according to the components function