一、背景
在搭建博客的时候，发现对其markdown文章内容进行渲染的时候，样式调整比较花费时间
二、解决思路
- 自己适配样式
- 缺点：ROI不高
- 使用开源的markdown的样式：
github-markdown-css
三、实现教程
1、NPM安装
npm install github-markdown-css
或者
yarn add github-markdown-css
2、样式引用
React：
import 'github-markdown-css'
const App = () => {
return (
<div className={'markdown-body'}/>
)
}
Vue：文章来源：https://www.toymoban.com/news/detail-646448.html
import 'github-markdown-css'
<div class="markdown-body"/>
Html：文章来源地址https://www.toymoban.com/news/detail-646448.html
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css">
<div class="markdown-body">
<h1>Unicorns</h1>
<p>All the things</p>
</div>
四、参考文章
- github-markdown-css官方文档
- 博客文章
到了这里，关于搭建博客时前端美化内容CSS推荐的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
