P11：利用marked+highlight.js重构前台文章详细页面

Posted 2022-01-10 wgchen~

React Hooks+Laravel 前端博客实战

• 阐述
• 安装 marked 和 highlight.js
• 重构 `detailed.js` 文件
• 增加Code的高亮显示
• CSS样式的更换
• MySQL数据

阐述

之前我们在博客文章详细页使用了 react-markdown 模块，但是这个插件的配置项还是太少了，而且我也没做太多的技术调研，所以我决定转回我目前项目中使用的一套方案marked+highlight.js。

这个方案是比较成熟的，目前公司的开发文档程序就是基于这个开发的。

安装 marked 和 highlight.js

这两个模块需要先安装，这里我们就使用 npm 来进行安装。打开终端，进入到 blog目录下，然后使用下面命令进行安装。

npm install --save marked@1.2.5
npm install