搭建博客时前端美化内容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>Unicornsh1>
	<p>All the thingsp>
div>

四、参考文章

• github-markdown-css官方文档
• 博客文章