整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
indows 上一款足够媲美 MWeb 和 Ulysses 的 Markdown 编辑器，这款专为程序员设计的 Atom 编辑器。
Atom 是一款优秀的编辑器，编辑功能完善，更新快，主题丰富，全面支持 Github，对各种编程语言进行了优化。由于采用了模块化的设计，可定制化程度非常高。它的可拓展性和丰富的插件是一大亮点，号称「21 世纪的可编程编辑器」。
一次偶然的机会，我发现 Atom 的 Markdown 方面的插件已经非常成熟，安装也相对简单。再加上 Atom 本身的灵活性很强，非常适合定制出一款适合自己的 Markdown 编辑器。
论 Markdown 编辑器的基本素养
我认为一个优秀的 Markdown 编辑器应该具备的功能有以下这些：
还有一些加分项：
通过 Atom 改造的 Markdown 编辑器，已经满足了大部分条件。
那就让我们开始改造吧。
我们需要在 Atom 的官网 下载 Atom（支持 Windows、macOS、Linux、FreeBSD 系统），并完成安装。
中文环境有助于我们更快地适应 Atom 编辑器。这一步不是必需的，如果你更喜欢英文环境就跳过这一步吧。
在 File 中找到 Settings，进入设置页面。
点最下面的 Install，搜索 Chinese，找到「simplified-chinese-menu」，然后点击 Install 即可。
经过比较，我选择了这款 Markdown-preview-enhanced 插件，它提供了 Markdown 相关的大部分功能，覆盖非常全面。
安装方式与中文补丁类似。在插件安装界面搜索「markdown-preview-enhanced」，点击安装即可。
做到这一步，你就可以使用经过 Markdown 加持的 Atom 编辑器了。
Atom 本身就是一个优秀的编辑器，不仅对各种语言支持良好，自带了自定义字体、自定义快捷键等功能，同时还有大量主题、大量插件可以使用，对 Github 的支持更是远超其他的编辑器。
而且 Atom 自带了完善的 Markdown 语法支持，在 Markdown-preview-enhanceed 这款插件的加持下，更是如虎添翼。既然是第一次使用，还是需要简单学习并了解一下这个编辑器的。
基础性功能的改进
这款插件在编辑方面的改进：
这是 Markdown 编辑器在编辑方面的基础性功能，最大的亮点是通过代码生成流程图、时序图等。
我利用简单的几行代码，就生成了一个流程图。
对导入导出功能的改进
在导入导出方面的改进：
在导入图片的时候，按下 Ctrl + Shift + I，会出现图片导入助手。支持链接、拖拽导入、上传图片到图床等功能。
你也可以直接把图片拖拽进 Atom ，它会自动上传到图床，图床限定为 imgur.com 和 sm.ms 这两个。经过测试，imgur.com 短时间内可以上传 25 张左右的图片（也可能是流量限制），墙内用户建议使用 sm.ms，不限量免费上传图片，足够日常使用。但如果文章访问量较大，还是建议使用自己的 CDN。
Markdown 中导入图片原本的语法是 。
在这个插件中不仅可以用这个语法，还增加了 @import "图片.png" 语法。@import "表格.csv"导入表格文件将会被转换成 Markdown 表格。@import 还支持其他的一些格式，比如 PDF 和 HTML，这些就需要自己摸索了。
再加上 Atom 自带的「项目文件夹」功能，可以对应本地文件夹实现分类树管理文档，与 MWeb 的文档库模式相差无几。
更多的高级功能
除了这些上面介绍的常用功能，Markdown-preview-enhanced 插件还提供了一些更高级的功能：
如果上面这些高级功能暂时还用不到，那么试试看这个实用的。
你只需要在文章的最上方，加上这样几行代码——
--- export_on_save: html: true ---
Atom 就会在你保存 md 文件的同时，自动生成一个 HTML 文件。
但是由于众所周知的原因，Atom 中的插件安装功能在某些时候无法下载或者速度非常慢，你可能需要科学上网，或者学会手动安装 Atom 的插件。
我们以这款 Markdown-preview-enhanced 插件为例。
下载插件
打开 插件的 Github 页面 ，在 Github 上下载插件的方法是点击右上角的「Clone or download」然后点击「Download ZIP」。
下载完毕后，将 zip 压缩包解压。
安装插件
把解压后的文件夹，整个复制到目录 「C:\Users\你的电脑用户名\.atom\packages\」下
（你可以在 Atom 的 File → Settings → install 中看到这个目录的具体位置）
复制到这个目录中之后，按下「Windows 键 + R」，输入 cmd，打开本地命令窗口。
输入 apm install markdown-preview-enhanced。（如果安装其他插件就换成其他名字。）
稍等一会儿后，会出现 Installing markdown-preview-enhanced to ... done
图为安装 Activate-power-mode 插件
重新打开 Atom，至此插件手动安装完成。
如果你觉得 Markdown-preview-enhanced 的许多功能用不到，有些累赘，你可以借助以下这些插件，单独定制出一个属于你的编辑器。
其实在 Atom 上还有许多优秀的个性化插件，也不乏 Activate-power-mode 这种非常有个性的插件。如果你熟悉 Github，你还可以将 Github 作为云存储的方案。
以上这些改进满足了我对 Markdown 编辑器的绝大部分要求。到这里，一个由 Atom 改造的 Markdown 编辑器就已经完成了。
Enjoy it !
tom
Atom是GitHub推出的跨平台免费开源的文本编辑器,具有清新的界面和强大的功能,尤其适合web开发。
Atom的主要优点:
输入ht按tab键会自动生成html模板
输入ht按后按tab键
自动生成html模板
还有各种各样的内置自动完成代码的简写。
这里列出的是PC上的部分快捷键
Ctrl+Shift+=增大字体
Ctrl+Shift+- 减小字体
Ctrl+r 列出当前文件中的重要节点
方便快速跳转的文件的某个节点
Alt+Ctrl+F2 在文档某行添加书签
F2 在书签间跳转
Ctrl+F2 查看所有书签
Ctrl+Alt+[ 折叠某个段落
Ctrl+Alt+] 展开某个段落
Ctrl+上下箭头 向上下移动行
Ctrl+Shift+D 复制当前行
Ctrl+j 把多行变成一行
Ctrl+/ 注释或反注释
Ctrl+Shift+k 删除当前行或多行
拖动文件夹到Atom会将该文件夹作为一个项目打开
查找快捷键
搜索快捷键
查找功能：Find buffer查找打开的文件中的内容
Find file查找项目中的文件
文件查找
按层级折叠
自动缩进
客制化代码片段
客制化代码片段用于代码自动补全
多光标功能
我觉得很有价值的一个功能
<ul> <li>Tet</li> <li>Atom</li> <li>Editor</li> <li>Awesome</li> </ul>
例如上面的一段代码,可以先选中<li>,然后按几次快捷键ctrl+d,就能选中下面几个<li>,就可以同时编辑所有的<li>节点
多光标编辑
或者选中某段代码比如<p>,然后按快捷点Alt+F3,能选中该文档全部的<p>
还可以用快捷点ctrl+点击鼠标创建任意位置的多光标
切换主题
快速切换主题
搜索并安装package
可以搜索并安装功能插件和主题插件,已经有很多好用的插件。
文件修改追踪
高亮修改过的文件（文件夹）
切换Git分支/新建分支
切换git分支
上传到GitHub
TML编辑器是一种用于创建、编辑和预览HTML（超文本标记语言）代码的工具或应用程序。它提供了一个直观的界面，使用户能够轻松地编写和设计网页内容。本文主要介绍HTML 常用编辑器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。
参考文档：https://www.cjavapy.com/article/3299/
Visual Studio Code（简称VS Code）是一款由微软开发的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。VS Code是一款轻量级的代码编辑器，启动迅速，占用资源少。VS Code提供了丰富的扩展和插件，可以根据需求安装插件来增强编辑器功能。
1）安装和配置
官网地址：Visual Studio Code - Code Editing. Redefined
根据操作系统下载并安装相应版本的VS Code。打开VS Code后，可以根据自己的喜好配置编辑器设置，如主题、字体等。
2）新建HTML文件
在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) "，在新建的文件中输入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>3）编辑HTML文件
在VS Code中，点击左上角的"文件"菜单，选择"打开文件"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。
在编辑器中可以直接修改HTML文件的内容。VS Code会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。
4）插件推荐
HTML CSS Support：提供对HTML和CSS的支持，包括代码片段、自动补全等功能。
Live Server：启动一个本地开发服务器，实时预览HTML页面的效果。
Prettier：格式化HTML代码，使代码结构更整洁。
Auto Close Tag：自动闭合HTML标签，提高编码效率。
Bracket Pair Colorizer：对成对的括号进行着色，方便识别代码块。
Sublime Text是一款流行的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。
Sublime Text的界面非常简洁，没有多余的菜单和工具栏，更便于专注于代码编辑。Sublime Text支持多种编程语言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text拥有强大的插件系统，用户可以根据需要安装插件来扩展编辑器功能。用户可以自定义快捷键、主题、颜色方案等，以满足个性化需求。Sublime Text启动迅速，响应快速，适合于快速编辑代码。
1）安装和配置
官网地址：Sublime Text - Text Editing, Done Right
根据操作系统下载并安装相应版本的Sublime Text。打开Sublime Text后，可以根据自己的喜好进行编辑器设置，如字体、主题等。
2）新建HTML文件
在Sublime Text 安装完成后，选择" File->New File "，在新建的文件中输入以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>3）编辑HTML文件
在Sublime Text中，点击左上角的"File"菜单，选择"Open File"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。在编辑器中可以直接修改HTML文件的内容。Sublime Text会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。
4）插件推荐
Emmet：提供HTML/CSS快速编写和自动完成功能，可以大大提高编码效率。
Sublime Linter：对代码进行实时语法检查，帮助发现潜在的错误和警告。
Color Highlighter：对CSS中的颜色进行高亮显示，方便调试和修改样式。
SideBarEnhancements：增强侧边栏功能，提供更多文件操作选项。
Dreamweaver是由Adobe公司开发的一款全球知名的网页设计和开发工具。它为开发人员和设计师提供了一个可视化的界面，可以直观地创建和编辑网页内容，同时也支持手动编辑代码。Dreamweaver提供可视化界面，可以直观地拖拽和编辑网页元素，无需手动编写代码。除了可视化界面，Dreamweaver也支持手动编辑代码，适合于开发人员和设计师。Dreamweaver可在Windows和macOS等多个平台上运行。Dreamweaver集成了代码编辑器、预览窗口、文件管理器等功能，提供全面的开发环境。
1）安装和配置
官网地址：Website design software | Adobe Dreamweaver
根据操作系统下载并安装相应版本的Dreamweaver。打开Dreamweaver后，，根据需要进行编辑器设置，如界面语言、字体、代码颜色等。
2）编辑HTML文件
在Dreamweaver中，点击左上角的"File"菜单，选择"New"，然后选择"HTML"，即可新建一个空白的HTML文件。内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>使用可视化界面，可以直接拖拽页面元素、调整布局、插入图片等。若需要手动编辑HTML代码，可以在下方的代码编辑器中进行修改。Dreamweaver会自动提供代码补全和语法高亮功能。在Dreamweaver中，可以实时预览网页效果，点击右上角的"Live View"按钮即可。
3）CSS和JavaScript支持
Dreamweaver也支持CSS和JavaScript的编辑和预览，可以帮助创建更丰富的网页效果。在编辑器中可以直接编辑CSS样式和JavaScript代码，并实时查看效果。
4）网页上传和发布
Dreamweaver集成了FTP功能，可以直接将编辑好的网页上传到服务器。点击"Site"菜单，选择"Manage Sites"，配置好站点设置，即可进行上传和发布。
5）Dreamweaver模板和库
Dreamweaver提供模板和库功能，可以保存和复用常用的网页元素和样式，提高开发效率。
参考文档：https://www.cjavapy.com/article/3299/
*请认真填写需求信息，我们会在24小时内与您取得联系。
