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 解析了，自己动手实验一下。

以上关于P21：如何使前台所有页面都支持Markdown解析的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。