从零搭建一个基于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攻击，这里暂时不做考虑。