likes
comments
collection
share

如何在JS中展示Markdown文件?

作者站长头像
站长
· 阅读数 41

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

Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被用来撰写电子书。[[wiki]](https://zh.wikipedia.org/wiki...)

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

在搭建博客系统或编写线简历等涉及文本内容展示的业务场景下,使用markdown进行书写和展示,会使内容排版更加简洁美观,在不同设备下展示兼容性更加友好,并且支持内嵌html、流程图、代码块等功能使得撰写过程更加灵活易用。

markdown语法

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

针对前端展示markdown的库有很多,由于我主要使用React,所以这里选择 react-markdown.js 来实现

<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>
}

这样我们就成功将一段markdown文本展示在了页面上,很简单对吧

<span style="font-size:19px">如何引用外链markdown进行展示?</span>

为了兼容GFM格式 我们需要另外安装remark-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://你的markdown链接.com`

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

这时候有同学问了,如果我想引用本地链接的markdown怎么办呢?

eazy! 只需要使用require将其引入,并调用所获取实例上的default属性即可得到一串string文本

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

const markdown = require('你本地的markdown文件的相对路径')
// const markdown = require('@/docs/test.md')

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

<span style="font-size:19px">如何设置代码高亮?</span>

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

如果使用ts的同学遇到类型报错还需安装

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

安装完毕后可以在 node_modules/react-syntax-highlighter/dist/esm/styles 路径下看到支持的高亮主题 将其引入使用即可

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 = '高亮代码块'

    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会根据components函数对相应的代码进行判断和实现高亮

转载自:https://segmentfault.com/a/1190000041504785
评论
请登录