從零搭建一個基於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攻擊，這裏暫時不作考慮。