代码语言:javascript 复制 importMarkdownfrom'react-markdown' 然后直接在 JSX 中使用即可。 代码语言:javascript 复制 <Markdown>{input}</Markdown> 渲染结果如下 完了之后,有一些比较复杂的格式,react-markdown可以引入不同的插件来支持。 例如,react-gfm,可以帮助我们解析列表等格式,如下所示: 代码语言:javascr...
在页面中引入 react-markdown。 复制 import Markdown from 'react-markdown' 1. 然后直接在 JSX 中使用即可。 复制 <Markdown>{input}</Markdown> 1. 渲染结果如下: 完了之后,有一些比较复杂的格式,react-markdown 可以引入不同的插件来支持。 例如,react-gfm,可以帮助我们解析列表等格式,如下所示: 复制 ...
解析MarkDown语法 解析MarkDown语法的库有挺多的,这里我使用的是marked这个库。使用起来挺简单的,但是由于我是在React当中使用它的,所以也需要对官网的例子做一些改变。 const [html, setHtml] = useState(); useEffect(() => { marked.setOptions({ renderer: new marked.Renderer(), gfm: true, tables: t...
<ReactMarkdown source={apiMd} escapeHtml={false} renderers={{ code: CodeBlock, heading: HeadingBlock }} /> 运行看看 SyntaxHighlighter 设置语法高亮 react-markdown 默认设置代码只有个灰色背景,并没有对语法进行高亮设置,我们可以根据它提供的Node types 的 code 属性进行自定义语法高亮,这里我们要引入Synta...
react-markdown 默认设置代码只有个灰色背景,并没有对语法进行高亮设置,我们可以根据它提供的 Node types 的 code 属性进行自定义语法高亮,这里我们要引入 SyntaxHighlighter 包。 npm install react-syntax-highlighter yarn add react-syntax-highlighter 然后,新建一个 CodeBlock.js 文件 import React, { PureComponent...
1. react-markdown 1) 作用 用来转换markdown语法 2) 下载 $ npm install react-markdown--save 2. highlight.js 1) 作用 博客中不仅包含普通文本,还有代码,光使用react-markdown无法实现代码高亮,所以这里就需要用到highlight.js 2) 下载 $ npm install highlight.js--save ...
react-markdown的使用 安装 npm i react-markdown 基本使用 importReactMarkdownfrom'react-markdown'constmarkdownData =` ### test header `<RactMarkdown> {markdownData} </ReactMarkdown> 结合react-syntax-highlighter使得代码拥有语法高亮 npm i react-syntax-highlighter#安装react-syntax-highlighter ...
我们使用react-syntax-highlighter来高亮代码块,并指定了一个名为dark的样式。 然后,我们将CodeBlock组件传递给ReactMarkdown组件,以便在Markdown文本中使用它。在Markdown文本中,我们可以使用三个反引号来定义代码块,如下所示: ```jsx const myFunction = () => { console.log('Hello, world!'); }; ``` ...
react 相关的支持 markdown 语法的有 react-markdown,但不支持表格的渲染,所以没用。 markdown 渲染 采用了开源的 marked, 代码高亮用了 highlight.js 。 用法: 第一步:npm i marked highlight.js --save npm i marked highlight.js --save 第二步: 导入 import marked from 'marked'; import hljs ...
markdown文件中的代码块,使用react-showndown转换后的并没有做高亮处理。 不过react-showdown是支持Showdown的各种扩展的,其中有个扩展叫showdown-highlight,通过这个扩展可以对代码块做高亮处理。 麻烦2:react-showndown只支持简单的组件。 虽然react-showndown可以解析react组件代码,但是它也只能简单解析这个组件。如果...