網站編輯線上工具 Beautify/Compressor 整理筆記 JavaScript/CSS/HTML/Markdown

整理網站(部落格)編輯使用的工具，寫前端網頁需要了解網頁原始碼 HTML，用戶端執行程式碼 JavaScript，以及排版美化的 CSS。並且額外介紹寫文章所用的排版格式 Markdown 轉 HTML 工具。

HTML/JavaScript/CSS

HTML、JavaScript 以及 CSS 工具主要分兩類，Beautify 以及 Compressor。

Beautify 主要是把程式碼重新排版，會插入許多空白換行符號，讓人容易看懂以方便修改。

Compressor，則是壓縮程式碼，去掉排版字元，僅留下機器看得懂的部分，降低程式碼傳輸的資料量，JavaScript 甚至可以進行 base62 再壓縮。

擁有良好習慣的程式設計師會先使用 Beautify 整理程式碼成人腦易讀格式編輯，完成修改後，再使用 Compressor 壓縮程式碼後發布。

線上工具：

• HTML Beautify
  • Jsbeautifier
• HTML Compressor
  • HTML Compressor
• JavaScript Beautify
  • Jsbeautifier
• JavaScript Compressor
  • JavascriptCompressor
  • UglifyJS
• CSS Beautify
  • CleanCSS
• CSS Compressor
  • CssCompressor

Markdown to HTML

Markdown 輕量級的標記式語言，讓可以用簡單的純文字編寫文章，再轉換成有效的 HTML 文。關於更多關於 Markdown 以及其語法請參考 Markdown.tw 的文件說明。

現行編寫文章都是在 Evernote上，採用 Markdown 語法撰寫，待完成後再透過轉換 HTML 後，發布到部落格管理系統上。

以下爲線上 Markdown 轉換工具

• Dillinger，好用的線上轉換工具，在自己還沒有開發自己的工具之前，都是靠它
• Markdow to html，使用開放程式庫 (Open source library) 自行開發的轉換工具，可以直接在自己的部落格上看到 HTML 結果。