tzaiyang / xeditor

X editor
2 stars 0 forks source link

技术调研/学习(渲染和Markdown解析技术) #2

Open YinDongFang opened 2 years ago

YinDongFang commented 2 years ago

参考/学习目标库:

  1. https://github.com/purocean/yn
  2. https://github.com/Vanessa219/vditor
  3. https://github.com/88250/lute
  4. https://github.com/marktext/marktext
  5. https://github.com/benweet/stackedit
  6. https://github.com/nhn/tui.editor
  7. https://github.com/pandao/editor.md
  8. https://github.com/MacDownApp/macdown
  9. https://github.com/vnotex/vnote
  10. https://github.com/microsoft/vscode
tzaiyang commented 2 years ago

之前关于Markdown的一些笔记, 可以参考一下

Introduction

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Thus, “Markdown” is two things: (1) a plain text formatting syntax; and (2) a software tool, written in Perl, that converts the plain text formatting to HTML. See the Syntax page for details pertaining to Markdown’s formatting syntax. You can try it out, right now, using the online Dingus.

Philosophy

Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters — including Setext, atx, Textile, reStructuredText, Grutatext, and EtText — the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.

To this end, Markdown’s syntax is comprised entirely of punctuation characters, which punctuation characters have been carefully chosen so as to look like what they mean. E.g., asterisks around a word actually look like emphasis. Markdown lists look like, well, lists. Even blockquotes look like quoted passages of text, assuming you’ve ever used email.

Language

Extend markdown:

GFM, GitHub Flavored Markdown

Rmarkdown: https://rmarkdown.rstudio.com/authoring_quick_tour.html

Kramdown, a Markdown superset, GitHub Pages supports two Markdown processors: kramdown and GitHub's own extended CommonMark processor, which is used to render GitHub Flavored Markdown throughout GitHub. For more information, see "About writing and formatting on GitHub."

HTML

Parser

Choosing a version

There's a lot to consider when thinking about implementing Markdown into a project, including the language you'll be developing with as well as the features you want to support. The original implementation was written in Perl, but that's not a practical option for every project. There are implementations in most popular languages including: PHP, Ruby and JavaScript. Which language you choose will have repercussions as to which features you'll be able to support and what libraries will be available. Let's take a look at some of the options:

Language Library (download project)
Perl Original version
JavaScript CommonMark, Marked, Markdown-it, Remarkable, Showdown, Stackedit
Ruby Github Flavored Markup, Kramdown, Maruku, Redcarpet
PHP Cebe Markdown, Ciconia, Parsedown, PHP Markdown Extended
Python Python Markdown

There are additional implementations in many other languages, just in case you're looking to implement Markdown in other languages.

YinDongFang commented 2 years ago

1. Yank-Note

https://github.com/purocean/yn

Markdown解析器:markdown-it UI渲染:monaco-editor

2. Veditor

https://github.com/Vanessa219/vditor

Markdown解析器:lute(自研) UI渲染:contenteditable

3. Marktext

https://github.com/marktext/marktext

Markdown解析器:marked(在muya项目引入) UI渲染:muya(自研) https://github.com/marktext/muya

4. Stackedit

https://github.com/benweet/stackedit

Markdown解析器:markdown-it(在muya项目引用) UI渲染:contenteditable

5. tui.editor

https://github.com/nhn/tui.editor

Markdown解析器:自实现转换 UI渲染:prosemirror