6个免费的Markdown（.md）所见即所得桌面编辑器——第1部分

寒冰屋

已于 2024-11-19 21:03:38 修改

阅读量2.4k

点赞数

分类专栏：其他文章标签：编辑器 markdown

于 2024-11-19 20:56:36 首次发布

原文链接：https://www.codeproject.com/Articles/5388145/6-free-Markdown-md-WYSIWYG-desktop-Editors-Part1

版权

其他专栏收录该内容

345 篇文章

订阅专栏

1 个忙碌的.NET/C#程序员正在处理Markdown（.md）文件

2.2 “markdown-it变体” vs “CommonMar规范”

2.3 技巧——如何将图像嵌入.md

2.4 技巧——注意文本/行末尾的空格和标点符号

下载源代码

1 个忙碌的.NET/C#程序员正在处理Markdown（.md）文件

我是一名忙碌的.NET/C#程序员，我决定深入研究Markdown标记语言领域。

有时，我需要创建/维护一些GitHub文档Readme.md文件。可能和其他人一样，我凭直觉破解了自己的方法，但我想提升我的技能/能力，以更快、更高级别地制作高质量的文档。对于我正在关注的所有其他技术，我确信我对显然只是另一种标记语言并不感兴趣，它因为GitHub而流行起来。所以，计划是：

获取Markdown（.md）语言的一些理论概述
学习一些制作精美Readme.md文档的技巧（如嵌入图像）
找一些免费软件桌面Windows所见即所得的编辑器，这样我就不需要学习/记住.md语法了
我发现的那些应用程序一定是免费软件，这样我就可以在家里和工作场所使用它们，而不会出现许可证问题。
我希望Windows桌面应用程序能够相对容易地安装在新机器上。不要过多地使用适用于Linux的Windows子系统（WSL）或类似产品。
找到具有良好GUI/WYSIWYG能力的编辑器，这样我就不需要学习/记住.md语法，并且能够快速生成质量不错的文档。

1.1 已测试Markdown编辑器

以下是经过测试的工具/编辑器：

GitHub.com网站（网站，但用于渲染的参考）
Haroopad编辑器（Windows桌面应用程序）
Visual Studio Code +扩展（Windows桌面应用程序）
KeenWrite编辑器（Windows桌面应用程序）
Zettlr编辑器（Windows桌面应用程序）
文本编辑器（Windows桌面应用程序）
Notepad++ +插件（Windows桌面应用程序）

1.2 本系列中的文章

出于实际原因，我将把这篇文章整理成几篇文章：

2 一些Markdown语言基础知识

一些理论方法总是好的，可以让你更好地了解你所处的宇宙，从长远来看，它总是可以节省你的时间。以下是需要了解的重要内容。

2.1 Markdown语言标准

Markdown只是另一种标记语言。它有它的创始人、历史和工具。这一切都在维基百科文章[1]中得到了很好的解释。

随着时间的推移，它分化为该语言的几种变体/风格。以下是一些：

CommonMark规范（如[2]中所述）。这确实被认为是当今现代Markdown的标准。
GitHub Flavored Markdown规范（如[3]中所述）。那是GitHub自己的Markdown语言版本。好消息是它是CommonMark规范的超集，所以如果你的编辑器严格“符合CommonMark规范”，你生成的所有.md文件都将（应该）在GitHub站点上工作。
markdown-it变体（基于GitHub上[4]的解析器“markdown-it”实现）。这实际上是Markdown的开源解析器实现的结果，可在[4]中找到。它遵循CommonMark规范+添加了语法扩展和语法糖。

了解不同变体/风格的Markdown语言的存在非常重要，因为您不仅需要创建新的.md文件，还需要在不同平台上维护现有的.md文件。

因此，为什么某些.md文件可以在一个平台（桌面、网站等）上运行，而不能在另一个平台上运行，可能只是因为不同的平台支持Markdown语言的不同变体/风格。是的，这可能令人沮丧，但事实就是如此。不同平台的语法存在差异。它可能在一个编辑器/网站中呈现良好，而在另一个编辑器中失败。

2.2 “markdown-it变体” vs “CommonMar规范”

为了说明不同变体之间的差异，“markdown-it variant”与“CommonMark spec”，我们将展示来自网站的渲染示例[5]。请注意是否选中了“CommonMark strict”复选框。

这是我们的“Markdown Challenge”文件，其中包含该语言的一些非标准功能。

#### MarkdownChallenge1==============
__Advertisement :)__  
(c) (C) (r) (R) (tm) (TM) (p) (P) +-  
!!!!!! ???? ,, -- ---  
~~Strikethrough~~

#### Syntax highlighting  
``` js
var 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.com

Color 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:**&ZeroWidthSpace;C  
with colon  **A:**&#8203;C   
with colon  **A:**&#x200B;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”很好地说明了这一点。解释/渲染规则随着时间的推移而发展，因此如果您正在处理legacy.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. I
needed something much better, both visually and more functional. Over time, in
my applications, I found it very useful to use Breadcrumbs to enable the user to
go back to the higher level, after he drills into details on the particular
item/object. Very important to me was the ability to present **TEXT DATA IN
TWO ROWS**, especially in cases where I am showing some data and ID, like an
indication that is the data for some Account, and at the same time providing the
Account number. I was not satisfied with the solutions I saw on the internet, so
I developed my own. While the title says this is a "Bootstrap 5" library, it is
completely independent of the Bootstrap CSS and only chosen colors were taken
from the Bootstrap CSS to align with the Bootstrap 5 theme. You can use it
independently from Bootstrap if you like. 
### 1.1 Changes in this version
This version incorporates suggestions and code from
Graeme_Grant@codeproject.com to make the code shorter. I do not necessarily
agree with all the suggestions, because I think code human readability is more
important than shorter code. So, I made my own new version. Also, this version
uses Bootstrap Icons [1] instead of Font Awesome Icons.

2 Final result
--------------

Here is what the final result looks like, together with the demo code that
generates 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 effect
is present by default, unless explicitly disabled. The hover effect is usually
disabled for the last breadcrumb because that is the current selection in
effect.

![55_pic21](Readme/55_pic21.png)

Here is the HTML code that generates the above rendering. Any web developer
should be able to read the HTML code and match it to the above picture to find
the variant he/she likes. If you want to use icons, you can install the free
version of Bootstrap Icons [1], and refer to it, similar to how it is done in
this example. HTML code for icon usage is a bit complicated because we needed to
separate icons and text into 2 separate elements so they could be styled
independently.

``` js
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="breadcrumb3.css" />
    <!-- Download bootstrap icons from https://icons.getbootstrap.com/#install  
        and 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  
``` js
var 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.com

Color 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:**&ZeroWidthSpace;C  
with colon  **A:**&#8203;C   
with colon  **A:**&#x200B;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==============