从零搭建一个基于React+Nextjs的SSR网站(三)：在Next项目中使用markdown

PS: 若是你有疑惑，能够给我留言，我们一块儿解决它。

从零搭建一个基于React+Nextjs的SSR网站(一)：写在前面

从零搭建一个基于React+Nextjs的SSR网站(二)：在Nextjs项目中增长react+redux

从零搭建一个基于React+Nextjs的SSR网站(三)：在Next项目中使用markdown

从零搭建一个基于React+Nextjs的SSR网站(四)：如何搭建服务器并部署Nextjs项目

正文

github不少开源markdown工具，好比react-markdown,marked等等。

能够选择一个本身喜欢的，我这里用的marked。

代码中使用也比较方便：

import marked from 'marked';
import hljs from 'highlight.js'; //代码高亮
...

hljs.configure({
  tabReplace: ' ',
  classPrefix: 'hljs-',
  languages: ['CSS', 'HTML, XML', 'JavaScript', 'PHP', 'Python', 'Stylus', 'TypeScript', 'Markdown']
})

marked.setOptions({
  highlight: (code) => hljs.highlightAuto(code).value,
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false
});
...
...
render(){
    const output = marked(content);
    return(
        <div dangerouslySetInnerHTML={{ __html: output }} /> ) } 复制代码

由于咱们须要传入HTML字符串，也须要保留原有的标签样式，因此此时选择使用dangerouslySetInnerHTML。{__html:...} 的目的是代表它会被当成 "type/taint" 类型处理。

可是dangerouslySetInnerHTML标签容易致使XSS攻击，这里暂时不作考虑。