MarkdownNice

返回开源：前端 | 返回：开源精粹

gitee | github | 官网

特点

• 支持自定义样式的 Markdown 编辑器
• 支持微信公众号排版
• 支持知乎、稀土掘金、博客园和 CSDN 等一系列平台
• 内容和自定义样式浏览器中实时保存
• 支持上传图片、脚注、公式

快速开发

克隆项目后：统一使用yarn进行包管理和运行，命令行运行下方指令：

yarn
yarn start

运行后即可在浏览器中访问http://localhost:3000看到页面了

主要开发库

• React：facebook 开源的 js 视图层框架
• markdown-it：markdown 转换富文本解析器
• juice：将 CSS 类选择器转换为行内样式的工具
• codemirror：网页代码编辑器
• ant-design：React UI组件库
• mobx：状态管理库
• highlight.js：代码高亮库
• MathJax-node：公式转图片库
• axios、ali-oss、qiniu-js等

当作组件使用

目前仅支持 React

安装 markdown-nice

yarn add markdown-nice

或者

npm install markdown-nice --save

index添加引用

<link href="https://draw-wechat.oss-cn-hangzhou.aliyuncs.com/KaTeX/0.5.1/katex.min.css" rel="stylesheet">
<style id="basic-theme" type="text/css"></style>
<style id="markdown-theme" type="text/css"></style>
<style id="code-theme" type="text/css"></style>
<style id="font-theme" type="text/css"></style>

import React from 'react';
import MarkdownNice from 'markdown-nice';
function App() {
 return (
 <div>
 <MarkdownNice />
 </div>
 );
}
export default App;