一、背景
在搭建博客的時(shí)候，發(fā)現(xiàn)對(duì)其markdown文章內(nèi)容進(jìn)行渲染的時(shí)候，樣式調(diào)整比較花費(fèi)時(shí)間
二、解決思路
- 自己適配樣式
- 缺點(diǎn)：ROI不高
- 使用開源的markdown的樣式：
github-markdown-css
三、實(shí)現(xiàn)教程
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：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-646448.html
import 'github-markdown-css'
<div class="markdown-body"/>
Html：文章來(lái)源地址http://www.zghlxwxcb.cn/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官方文檔
- 博客文章
到了這里，關(guān)于搭建博客時(shí)前端美化內(nèi)容CSS推薦的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
