markdown 风格的 css 样式markdown 风格的 css 样式。基于typo.css设计的个人化css样式

前情提要

最近在做一个富文本编辑器，采用的是用 markdown-it 来渲染。用过 markdown-it 的朋友应该知道，渲染出来的 html 文件是没有样式的。网上好像 markdown 风格的 css 要么是基于 typora ，要么是整个 html 页面渲染的。一气之下，自己就写了个基于 typo.css 的个性化渲染 css

优势

不污染外部的 html 样式
基于中文阅读排版最好的 typo.css 设计
自带编号

如何使用

NPM

安装

    npm install @corgicoding/theme

导入

    /* 按你需要导入这两个 一个是解决 浏览器兼容问题 的css，一个是代码区的样式文件 */
    import "@corgicoding/theme/dist/normalize.css";
    import "@corgicoding/theme/dist/github.css";

    /* 主要引入文件 */
    import "@corgicoding/theme";

传统开发方式

从 github.com/Corgi-Codin… 处下载该仓库。
解压下载的压缩包
引入 css 样式
为想要渲染的元素，添加 c-html-render 类

    <!--   Prevent compatibility issues caused by different browsers   --> 
    <link rel="stylesheet" href="./dist/normalize.css" />
    <!--   corgicoding.theme   -->
    <link rel="stylesheet" href="./dist/corgicoding.theme.min.css" />
    <!--   github style code render   -->
    <link rel="stylesheet" href="./dist/github.css" />


    <div class="c-html-render"><h1> 测试标题 </h1></div>

效果展示

2021年8月10日16:58:52

发现 li 里面的 code 标签没有渲染，1.0.4 版本紧急修复了，并修改了一部分样式。