P21：如何使前台所有页面都支持Markdown解析

目前我们对博客文章的主要功能已经开发完了，并且你也可以看到文章详细页面也支持了Markdown的解析，但是现在我还希望在首页和列表页都可以支持Markdown的解析，这样就可以实现简介也使用 Markdown 格式来进行编写了。还可以加入图片。本文我们就来完善一下首页和列表页Markdown的解析。

首页对 Markdown 语法的解析

打开/blog/pages/index.js文件，然后在文件顶部先引入下面的模块。

import marked from 'marked'
import hljs from "highlight.js";
import 'highlight.js/styles/monokai-sublime.css';

这些都是解析Markdown必须的模块和 CSS 样式。

之后可以对 marked 进行setOptions设置，代码如下：

const renderer = new marked.Renderer();
marked.setOptions({
  renderer: renderer,
  gfm: true,
  pedantic: false,
  sanitize: false,
  tables: true,
  breaks: false,
  smartLists: true,
  smartypants: false,
  sanitize:false,
  xhtml: false,
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  }
});

设置完成后，在 JSX 部分的<List>组件中进行修改，主要修改的代码如下。

<div className="list-context"
  dangerouslySetInnerHTML={{__html:marked(item.introduce)}}
></div>

最后需要找到index.js对应的 CSS 样式文件，增加 markdown 的解析样式/static/pages/index.css。把下面这段 CSS 样式拷贝过去就可以了了。

pre{
    display: block;
    background-color: #283646 !important;
     padding: .5rem !important;
     overflow-y: auto;
     font-weight: 300;
     font-family: Menlo, monospace;
     border-radius: .3rem;
}

pre >code{
    border:0px !important;
    background-color: #283646 !important;
    color:#FFF;

}
code {
    display: inline-block ;
    background-color:#f3f3f3;
    border:1px solid #fdb9cc;
    border-radius:3px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    color:#4f4f4f;
    margin: 0px 3px;

}

.list-context img{
   width:100% ;
   border-radius:5px;
   border:1px solid #f0f0f0;
   max-width:1000px !important;
   display: block;
   margin:8px  auto ;
}

然后到浏览器中看一下效果，应该就可以对 Markdown 的格式作了一些解析。

到这里我相信大家现在自己可以修改列表页的 markdown 解析了，自己动手实验一下。