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解析

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P21:如何使前台所有页面都支持Markdown解析

发表评论

提供最优质的资源集合

立即查看 了解详情