一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice

介绍

MarkdownNice是一个支持自定义样式的在线微信Markdown排版工具,正如其名字一样,让排版更漂亮,支持多个平台!


一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice

Gitee

https://gitee.com/zhning12/markdown-nice

https://github.com/mdnice

https://mdnice.com/


一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice

从Github历史star数可以看出其用户增速较快

特点

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

快速开发

克隆项目后:

统一使用yarn进行包管理和运行,命令行运行下方指令:

$ yarn
$ yarn start

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


一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice

作者还提供了架构图:

一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice
一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice

主要开发库

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

当作组件使用

目前仅支持 React

  • 1、安装 markdown-nice
$ yarn add markdown-nice

或者

$ npm install markdown-nice --save

  • index添加引用
<link class="external" rel="nofollow" target="_blank" href="https://www.helloworld.la/go/?url=aHR0cHM6Ly9kcmF3LXdlY2hhdC5vc3MtY24taGFuZ3pob3UuYWxpeXVuY3MuY29tL0thVGVYLzAuNS4xL2thdGV4Lm1pbi5jc3M=" 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;

在线效果

一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice
一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice
一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice
一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice

总结

MarkDown是一个非常值得使用的排版工具,可在线使用,也可以自己开发并部署,还可当作组件使用,如果你有类似排版头疼的问题,不妨试试它,Enjoy it!

版权声明:飞鱼 发表于 2020-07-19 10:57:18。
转载请注明:一个支持自定义样式的在线微信Markdown排版工具——MarkdownNice | HelloWorld.La

暂无评论

暂无评论...