当前位置: 首页 > Web前端 > JavaScript

当富文本遇上Markdown-Milkdown入门

时间:2023-03-27 15:56:00 JavaScript

Markdwon的痛苦作为程序员,总是要和Markdown打交道,知识管理,项目文档,静态博客……然而繁琐的输入和一定的学习门槛让人望而却步。非程序员很少做markdown,简洁大方的文档载体,只是少数码农手中的工具,无法在更多地方普及。那么,是否可以降低编辑markdown的成本,让markdown可以像编辑富文本一样编写呢?答案当然是肯定的,大名鼎鼎的typora就是因为这个特性受到了很多人的欢迎。但是Typora作为一款桌面应用,也有其局限性:闭源,只能下载app,只支持一些给定的语法,不能自行扩展。由于这些限制,如果我们想在我们的网站或电子应用程序中加入typora,或者我们想自己定义一些markdown语法,显然我们做不到。Milkdown介绍正因如此,才有了Milkdown的轮子,它提供了开发所见即所得的Markdown编辑器的插件能力,并提供了一系列官方插件来保证该编辑器开箱即用。如果需要自定义能力,也可以编写插件来实现。您也可以编写自己的主题,使编辑器完全按照您的需要显示。点我在线试用那么如何在自己的网络应用中使用milkdown呢?快速搭建项目这里使用vite快速搭建一个demo项目:#npm7$npminit@vitejs/appmilkdown-demo----templatevanilla-ts#npm6$npminit@vitejs/appmilkdown-demo--templatevanilla-ts#yarnyarncreate@vitejs/appmilkdown-demo--templatevanilla-ts构建项目后,使用npminstall(如果使用yarn,则使用yarninstall)安装依赖项。安装npminstall@milkdown/core@milkdown/preset-commonmark@milkdown/theme-norduseimport{Editor}from'@milkdown/core';import{commonmark}from'@milkdown/preset-commonmark';//importthemeimport'@milkdown/theme-nord/lib/theme.css';constroot=文档.body;constdefaultValue='你好,[milkdown](https://saul-mirone.github.io/)很高兴认识你。';newEditor({root,defaultValue}).use(commonmark).create();这时候使用npmrundev(如果你使用yarn,则使用yarndev),我们就可以在浏览器中看到Milkdown编辑器了!除了原生js,milkdown还提供开箱即用的react和vue3组件,以及众多官方插件。