When rich text meets markdown – milkdown profile

Time:2021-7-28

Markdwon’s pain

As a programmer, I usually have to deal with markdown, knowledge management, project documents, static blogs… However, cumbersome input and a certain learning threshold have dissuaded many non programmers, making markdown, a concise and elegant document carrier, a tool in the hands of a few coders, but can not be popularized to more places.

So, can we reduce the cost of editing markdown and write markdown in a way similar to rich text editing? The answer is certainly yes, well-knowntyporaBecause of this characteristic, it has been welcomed by many people. However, as a desktop application, typora also has its own limitations:

  1. Closed source. You can only download apps for use
  2. Only some given syntax is supported and cannot be extended by itself

Because of these limitations, if we want to add typera to our website or electronic application, or we want to define some markdown syntax ourselves, we obviously can’t do it.


Introduction to mikdown

That’s why there areMilkdownThis wheel provides a plug-in developmentWYSIWYG markdown editorAnd provides a series of official plug-ins to ensure that the editor can be used out of the box. If you need customization, you can also write plug-ins. You can also write your own theme to let the editor display exactly the style you need.

Click my online trial

So how to use milk down in your web app?

Quick build project

Use hereviteTo quickly build a demo project:

# npm 7
$ npm init @vitejs/app milkdown-demo -- --template vanilla-ts

# npm 6
$ npm init @vitejs/app milkdown-demo --template vanilla-ts

# yarn
yarn create @vitejs/app milkdown-demo --template vanilla-ts

Use after building the projectnpm install(oryarn installIf you use yarn () to install dependencies.

install

npm install @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord

use

import { Editor } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';

// import theme
import '@milkdown/theme-nord/lib/theme.css';

const root = document.body;
Const DefaultValue = 'Hello, [milkdown]( https://saul-mirone.github.io/ )Nice to meet you. ';
new Editor({ root, defaultValue }).use(commonmark).create();

Use at this timenpm run dev(oryarn devIf you use yarn), we can see the milkdown editor in the browser!


In addition to native JS, milkdown also provides out of the boxreactandvue3Components, and manyOfficial plug-in

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]