点击上方“AI搞事情”关注我们
简介
mdnice
是一款由墨滴社区开发的强大的markdown编辑软件,拥有良好的兼容性、海量主题风格样式、免费的图床,具体可以见官网并体验:https://product.mdnice.com/,只是普通用户容量有限:文件夹容量 10、 文章容量100、图片容量 100.00MB,不然就得付费买会员了。
![76971ffe14891cfa2020d66e76136bde.png](https://img-blog.csdnimg.cn/img_convert/76971ffe14891cfa2020d66e76136bde.png)
公众号大部分文章都是通过mdnice编辑的,包括本文,因为它支持一键复制到公众号及知乎、掘金等各类博客,且还有插件直接支持在公众号后台进行文章编辑。更重要的是,作者将代码进行了开源,虽然23年后面更新的没有继续开源,但是私有化部署后,把它作为一个markdown编辑工具使用完全够了,代码首页简介:
GitHub:https://github.com/mdnice/markdown-nice
Gitee:https://gitee.com/zhning12/markdown-nice.git
简介
支持自定义样式的 Markdown 编辑器
支持微信公众号排版
支持知乎、稀土掘金、博客园和 CSDN 等一系列平台
内容和自定义样式浏览器中实时保存
支持上传图片、脚注、公式
欢迎在线使用
示例
橙心:终于等到你,公众号排版神器
姹紫:JavaScript 数据结构与算法之美
绿意:前端硬核面试专题之 CSS 55 问
红绯:日常 | 我用什么工具写作?
Wechat-Format:Markdown Nice新特性:阿里云图床
科技蓝:2019 前端秋季社招面试经历总结(二年多经验)
兰青:兰青 Demo
部署
1. 拉取代码
git clone https://github.com/mdnice/markdown-nice.git
目录结构如下:
![e940df21dedf67cfb076a5c5ed4dcd15.png](https://img-blog.csdnimg.cn/img_convert/e940df21dedf67cfb076a5c5ed4dcd15.png)
2. 本地调试
环境要求:
Node.js v18.17.1、npm@10.8.0
版本不对报错:
npm ERR! engine Not compatible with your version of node/npm: npm@10.8.2 npm ERR! notsup Not compatible with your version of node/npm: npm@10.8.2 npm ERR! notsup Required:"node":"^18.17.0| >=20.5.0"npm ERR! notsup Actual: {"npm":"8.0.0","node":"v16.11.1"}
阿里云镜像下载node:https://registry.npmmirror.com/binary.html?path=node/latest-v18.x/
解压后,添加到环境变量,测试
> node -v
v18.17.0
设置淘宝源,安装依赖包:
npm config set registry https://registry.npmmirror.com
npm install
运行
npm run start 或者 npm start
![28d624b93b6c49f7e2f510590e9bd494.png](https://img-blog.csdnimg.cn/img_convert/28d624b93b6c49f7e2f510590e9bd494.png)
默认端口3000,页面效果,但是点击主题,样式没有生效,需要改代码添加本地主题
在项目的src\json
目录下添加localThemeList.json
用于定义主题,文件地址:
https://gitee.com/Glory1020/markdown-nice/blob/master/src/json/localThemeList.json
然后修改项目的src\component\MenuLeft\Theme.js
文件,主要是导入localThemeList.json
、并将获取远程主题改为从本地获取,然后选择主题就可以看到效果了。
import localThemesData from "../../json/localThemeList.json"
.....
} else {
remoteThemelist = localThemesData
// // 否则默认主题
// response = await axios.get(THEME_API());
// if (!response.data.success) {
// throw new Error();
// }
// remoteThemelist = response.data.data.themeList;
}
![3c18d3c92691a56e3e7bbfe4e0bee83e.png](https://img-blog.csdnimg.cn/img_convert/3c18d3c92691a56e3e7bbfe4e0bee83e.png)
至此,我们就跑通了整个代码,便可以进行构建部署或者二次开发了。
3. 构建部署
打包
npm run build
会在项目目录下产生build文件夹,里面是编译好的用于部署的静态资源
docker镜像制作
docker pull nginx:latest
运行容器
docker run --name nginx-mdnice -p 8080:80 -v /markdown-nice/build:/usr/share/nginx/html -d nginx:latest
也可以用docker-compose部署容器
version: '3'
services:
mdnice:
image: nginx:latest
ports:
- "3000:80"
networks:
- mynetwork
environment:
LANG: C.UTF-8
LC_ALL: C.UTF-8
LANGUAGE: C.UTF-8
TZ: Asia/Shanghai
volumes:
- ./:/usr/share/nginx/html
restart: always
container_name: mdnice
stdin_open: true
tty: true
networks:
mynetwork:
然后就可以访问了,若绑定域名就可以使用域名访问,免费好用的公众号文章编辑器就部署好了。另外图片的处理可以参考1。
4. 参考
Markdown文章编写神器MdNice,如何私有化部署https://segmentfault.com/a/1190000044365170
博客写作神器:介绍与部署Markdown Nicehttps://blog.csdn.net/weixin_44002151/article/details/132505674
自己搭建一个md编辑工具https://www.cnblogs.com/junyao-ye/articles/17674615.html
本地及 Docker 部署 MdNice 开源项目
https://juejin.cn/post/7034714494374772773
长按二维码关注我们
有趣的灵魂在等你