搭建博客时前端美化内容CSS推荐

一、背景

在搭建博客的时候，发现对其markdown文章内容进行渲染的时候，样式调整比较花费时间

二、解决思路

1. 自己适配样式
   1. 缺点：ROI不高
2. 使用开源的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：

import 'github-markdown-css'<div class="markdown-body"/>

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官方文档
• 博客文章