原文链接：
https://www.codeproject.com/Articles/5388145/6-free-Markdown-md-WYSIWYG-desktop-Editors-Part11
6 个免费的所见即所得 Markdown 桌面编辑器的实用指南，用于在 Windows 平台上编写 GitHub Readme.md 文件（截至 2024 年 9 月）。
1.忙碌的 .NET/C# 程序员正在制作 Markdown (.md) 文件
我是一名忙碌的 .NET/C# 程序员，决定深入研究 Markdown 标记语言世界。
有时，我需要创建/维护一些 GitHub 文档 Readme.md 文件。可能和其他人一样，我凭直觉四处摸索，但我想提升自己的技能/能力，以更快地制作出更高质量的文档。考虑到我所关注的所有其他技术，我确信自己对显然只是另一种标记语言（因 GitHub 而流行）并不十分感兴趣。因此，计划是：
了解 Markdown (.md) 语言的一些理论概述
学习一些技巧来制作精美的 Readme.md 文档（如嵌入图像）
找到一些免费的 Windows 桌面所见即所得编辑器，这样我就不需要学习/记住 .md 语法
我找到的那些应用程序必须是免费的，这样我就可以在家里和工作场所使用它们，而不会出现许可证问题。
我想要在新机器上相对容易安装的 Windows 桌面应用程序。不要过多地玩 Windows Subsystem for Linux (WSL) 或类似程序。
找到具有良好 GUI/WYSIWYG 功能的编辑器，这样我就不需要学习/记忆 .md 语法，并且能够快速生成质量不错的文档。
1.1 测试的 Markdown 编辑器
以下是测试的工具/编辑器：
GitHub.com 网站（网站，但用于渲染的参考）
Haroopad 编辑器（Windows 桌面应用程序）
Visual Studio Code + 扩展（Windows 桌面应用程序）
KeenWrite 编辑器（Windows 桌面应用程序）
Zettlr 编辑器（Windows 桌面应用程序）
文本编辑器（Windows 桌面应用程序）
Notepad++ + 插件（Windows 桌面应用程序）
1.2 本系列文章
出于实际原因，我将本文组织成几篇文章：
6 个免费的 Markdown (.md) WYSIWYG 桌面编辑器 - PartⅠ
6 个免费的 Markdown (.md) WYSIWYG 桌面编辑器 - PartⅡ
6 个免费的 Markdown (.md) WYSIWYG 桌面编辑器 - PartⅢ
2 一些 Markdown 语言基础知识
一些理论方法总是好的开始，可以让您更好地了解您所处的世界，从长远来看，它总是可以节省您的时间。以下是需要了解的重要内容。
2.1 Markdown 语言标准
Markdown 只是另一种标记语言。它有自己的创始人、历史和工具。维基百科文章 [1] 很好地解释了这一切。
随着时间的推移，它分化为几种语言变体/风格。以下是其中一些：
CommonMark 规范（如 [2] 中所述）。这实际上被认为是当今现代 Markdown 的标准。
GitHub Flavored Markdown Spec（如 [3] 中所述）。这是 GitHub 自己的 Markdown 语言版本。好消息是它是 CommonMark 规范的超集，因此如果您的编辑器严格“符合 CommonMark 规范”，那么您生成的所有 .md 文件都将（应该？）在 GitHub 网站上工作。
markdown-it 变体（基于 GitHub 上 [4] 中的解析器“markdown-it”实现）。这实际上是 [4] 中提供的 Markdown 的 OpenSource 解析器实现的变体。它遵循 CommonMark 规范 + 添加了语法扩展和语法糖。
了解 Markdown 语言存在不同变体/风格非常重要，因为您不仅会创建新的 .md 文件，还需要在不同平台上维护现有的 .md 文件。
因此，为什么某些 .md 文件可以在一个平台（桌面、网站等）上运行，而在另一个平台上却不行，可能只是因为不同的平台支持 Markdown 语言的不同变体/风格。是的，这可能令人沮丧，但事实就是如此。不同平台的语法各不相同。它可能在一个编辑器/网站上呈现良好，而在另一个编辑器/网站上则失败。
2.2 “markdown-it 变体”与“CommonMark 规范”
为了说明不同变体“markdown-it 变体”与“CommonMark 规范”之间的差异，我们将展示来自网站 [5] 的呈现示例。请注意复选框“CommonMark strict”是否被选中。
这是我们的“Markdown Challenge”文件，其中包含该语言的一些非标准功能。
### MarkdownChallenge1==============__Advertisement :)__ (c) (C) (r) (R) (tm) (TM) (p) (P) +- !!!!!! ???? ,, -- --- ~~Strikethrough~~#### Syntax highlighting ``` jsvar foo = function (bar) { return bar++;};console.log(foo(5));``` #### Tables | Option | Description || ------ | ----------- || data | path to data files || engine | engine to be used || ext | extension to be |#### MarkdownChallenge1==============#### MarkdownChallenge3==============[Url with spaces](/url with space) [Url with no spaces](/url-with-no-space) #####No space after markup No space **after**, markup https://www.url-auto-linking.com markpelf@extended-email-autolink.com mailto:markpelf@extended-protocol-autolink.comColor green `#0F0` Color green `RGB(0,255,0)` #####Punctuation issues No punctuation **A**C with colon **A:**C with dash **A-**C with space **A **B using undercores __A:__C Punctuation issues fixed with colon **A:**​C with colon **A:**​C with colon **A:**​C #### MarkdownChallenge3============== #### MarkdownChallenge2==============#### Plugins `markdown-it` supports `syntax plugins` #### Subscript/ Superscript - 19^th^- H~2~O++Inserted text++ ==Marked text==#### Footnotes Footnote 1 link[^first]. Duplicated footnote reference[^second]. [^first]: Footnote **can have markup** and multiple paragraphs. [^second]: Footnote text. #### Custom containers ::: warning*here be dragons*:::#### MarkdownChallenge2==============以下是渲染的效果：
上面的图片说明了在不同环境中渲染的差异和不可预测性。
2.3 技巧 - 如何将图像嵌入 .md
所以，是的，您可以将图像嵌入 Markdown GitHub Readme.md 文件中。技巧是正确地执行此操作，以便图像在 GitHub 网站和 Visual Source Code 等桌面工具上呈现。这里的主要技巧是使用相对文件路径。因此，执行此操作的方法是在您的存储库中创建一个目录 /Readme，该目录将包含相关图像文件，并使用 .md 文件中的相对文件路径对其进行寻址。
2.4 技巧——注意文本/行末尾的空格和标点符号
Markdown 对文本/行末尾的空格和标点符号有一些奇怪的规则。上面的“Markdown 挑战 3”很好地说明了这一点。解释/渲染规则随着时间的推移而发展，因此如果您正在处理旧版 .md 文件，您可能会遇到此类问题。小心文本/行末尾的空格和标点符号
3 测试方法
我计划从我在博客上发布的一些文章中创建一个简单的 Readme.md 文件，只是一个缩短的版本。
计划是：
使用真实世界的文本来测试 Markdown 编辑/渲染。
嵌入一张较小的图片
嵌入一些代码示例（在本例中为 HTML）
嵌入一些链接
插入一些 Markdown-Challenge 标记以测试对语言非标准功能的支持
使用纯 Markdown 标记并忽略“将 HTML 标记嵌入 Markdown 标记”等解决方案来实现一些效果。这是可行的，Markdown 爱好者也喜欢这样做，但对我来说有点奇怪。如果我需要在文件中插入另一种标记语言，那就意味着一开始的标记语言选择可能就是错误的，也许从一开始就需要用 HTML 编写所有内容。
3.1 测试 Readme.md 文件
这是我将在测试中使用的 .md 文件。
Custom Bootstrap 5 Breadcrumbs -Ver 2=====================================Custom Breadcrumbs for Bootstrap 5 framework***Abstract: We are presenting code (CSS) for custom Bootstrap 5 breadcrumbs.This is an improved version of the previously published article.***1 The need for better Breadcrumbs---------------------------------Bootstrap 5 framework is coming with very basic Breadcrumbs implementation. Ineeded something much better, both visually and more functional. Over time, inmy applications, I found it very useful to use Breadcrumbs to enable the user togo back to the higher level, after he drills into details on the particularitem/object. Very important to me was the ability to present **TEXT DATA INTWO ROWS**, especially in cases where I am showing some data and ID, like anindication that is the data for some Account, and at the same time providing theAccount number. I was not satisfied with the solutions I saw on the internet, soI developed my own. While the title says this is a "Bootstrap 5" library, it iscompletely independent of the Bootstrap CSS and only chosen colors were takenfrom the Bootstrap CSS to align with the Bootstrap 5 theme. You can use itindependently from Bootstrap if you like.### 1.1 Changes in this versionThis version incorporates suggestions and code fromGraeme_Grant@codeproject.com to make the code shorter. I do not necessarilyagree with all the suggestions, because I think code human readability is moreimportant than shorter code. So, I made my own new version. Also, this versionuses Bootstrap Icons [1] instead of Font Awesome Icons.2 Final result--------------Here is what the final result looks like, together with the demo code thatgenerates it. I created breadcrumbs strips in 3 sizes (large, medium, small),with optional usage of icons. Colors can be chosen at will, and the hover effectis present by default, unless explicitly disabled. The hover effect is usuallydisabled for the last breadcrumb because that is the current selection ineffect.Here is the HTML code that generates the above rendering. Any web developershould be able to read the HTML code and match it to the above picture to findthe variant he/she likes. If you want to use icons, you can install the freeversion of Bootstrap Icons [1], and refer to it, similar to how it is done inthis example. HTML code for icon usage is a bit complicated because we needed toseparate icons and text into 2 separate elements so they could be styledindependently.``` js<!DOCTYPE html><html><head><link rel="stylesheet" href="breadcrumb3.css" /><!-- Download bootstrap icons from https://icons.getbootstrap.com/#installand install --><link rel="stylesheet" href="bootstrap-icons-1.11.3\font\bootstrap-icons.min.css" /></head><body><!--Large size ---------------------------------------------------------------><H5>Large size, info case</H5><div class="breadcrumb3-lg "><a href="#" class="breadcrumb3-item info">Accounts</a><a href="#" class="breadcrumb3-item info">Account number</br>123456</a><a href="#" class="breadcrumb3-item primary">Details</a></div></body></html>```3 Breadcrumbs CSS-----------------Here is the CSS, no JavaScript is needed. I deliberately used the class name"breadcrumbs3" to avoid name collision with the Bootstrap 5 original class.See Breadcrumb3.css in the repository.4 Full Article--------------This is just excerpt from an article published at:[Custom Bootstrap 5 Breadcrumbs -Ver 2](https://markpelf.com/2114/custom-bootstrap-5-breadcrumbs-ver-2/)5 References------------[1] https://icons.getbootstrap.com/\#install[2] [Custom Bootstrap 5 Breadcrumbs -Ver 2](https://markpelf.com/2114/custom-bootstrap-5-breadcrumbs-ver-2/)#### MarkdownChallenge1==============__Advertisement :)__(c) (C) (r) (R) (tm) (TM) (p) (P) +-!!!!!! ???? ,, -- ---~~Strikethrough~~#### Syntax highlighting``` jsvar foo = function (bar) {return bar++;};console.log(foo(5));```#### Tables| Option | Description || ------ | ----------- || data | path to data files || engine | engine to be used || ext | extension to be |#### MarkdownChallenge1==============#### MarkdownChallenge3==============[Url with spaces](/url with space)[Url with no spaces](/url-with-no-space)#####No space after markupNo space **after**, markuphttps://www.url-auto-linking.commarkpelf@extended-email-autolink.commailto:markpelf@extended-protocol-autolink.comColor green `#0F0`Color green `RGB(0,255,0)`#####Punctuation issuesNo punctuation **A**Cwith colon **A:**Cwith dash **A-**Cwith space **A **Busing undercores __A:__CPunctuation issues fixedwith colon **A:**​Cwith colon **A:**​Cwith colon **A:**​C#### MarkdownChallenge3==============#### MarkdownChallenge2==============#### Plugins`markdown-it` supports `syntax plugins`#### Subscript/ Superscript- 19^th^- H~2~O++Inserted text++==Marked text==#### FootnotesFootnote 1 link[^first].Duplicated footnote reference[^second].[^first]: Footnote **can have markup**and multiple paragraphs.[^second]: Footnote text.#### Custom containers::: warning*here be dragons*:::#### MarkdownChallenge2==============
3.2 我在寻找什么
显示编辑器和预览的分割窗口是当今 Markdown 编辑器的标准配置。
用于标记的工具栏可帮助用户掌握语法。
高质量的渲染/预览功能对于在 GitHub 或类似网站上发布之前查看工作结果和纠正任何错误非常重要。
4 GitHub 网站上的最终结果
我将从头开始介绍这篇文章，立即展示在 GitHub 网站上可以实现什么。我们进行 .md 文件标记主要是为了在 GitHub 网站上创建漂亮的文档。因此，我们从最终结果开始，然后展示如何通过编辑器构建文件。
4.1 GitHub 网站渲染
GitHub 渲染。在这里我们可以看到文本是如何呈现的：
GitHub 渲染。下面我们看看图片是如何渲染的：
GitHub 渲染。在这里我们可以看到代码是如何渲染的。请注意，它对一些代码语法进行了着色。
GitHub 渲染。在这里我们可以看到非标准标记的渲染方式。我们看到 GitHub 支持部分但不是全部。
4.2 GitHub 网站编辑
GitHub 网站提供了一个基本的文本编辑器来编辑文件。它看起来像一个纯文本编辑器，没有特别支持 Markdown 语言。
5 未完待续
本系列下一篇文章继续。
6 参考文献
[1] Markdown: https://en.wikipedia.org/wiki/Markdown
[2] CommonMark:https://commonmark.org/
[3] GitHub Flavored Markdown Spec:https://github.github.com/gfm/
[4] markdown-it:https://github.com/markdown-it/markdown-it
[5] markdown-it demo
https://markdown-it.github.io/
