整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
