跳到主要內容

利用 Sublime Text 3 + Zen Coding 編輯網頁程式

這一期的中央研究院計算中心通訊電子報中介紹了一個類似於 vi, vim 的編輯器 Sublime，在 Sublime Text 3 新手上路：必要的安裝、設定與基本使用教中介紹基本的設定及安裝必備的套件，其中談到 Emmet (之前叫做 Zen Coding) 這個名詞，好奇的到 Google 大神找了一下文件，在 Zen-Coding - 教你極速撰寫HTML5與CSS3程式碼中的影片，介紹了 Zen Coding 極速編輯 HTML + CSS 的功能，許多新的軟體或套件一一被開發出來，可見新新一代的創意及巧思，是很好的一件事。

另外，在必備套件中提到了 AngularJS 的套件，在 AngularJS — Superheroic JavaScript MVW Framework 的官網中間有一個 HELLO 的介紹，與 JQuery 做了比較，乍看起來，要製作一個 MVC 的網頁介面，似乎比 JQuery 簡單多了。

Sublime Text 3 的安裝：

1. Ctrl + ` ： 進入命令輸入列，輸入底下的指令來新增 Package Control 的套件

     https://sublime.wbond.net/installation

2. Ctrl + Shift + p ：開啟 package control 的輸入畫面，輸入 inst 後，選擇 Package Control: Install Package

3. 輸入妳想要安裝的 Package Name or keyword：

   （1）emmet(Zen Coding)  （2）angularJS  （3）LaTeXing and LaTeX-cwl
   （4）ConverToUTF8 (5) SideBarenhancement (6) HTML-CSS-JS-Petty      (7)SideBar  (8)Dayle Rees Color Scheme  (9)PreDawn  (10)BarcketHighlight
(11)SublimeCodeIntel (12)SublimeLinter-* (12)autoFilename

4. 設定 Big5 的顯示：
  • 在 C:\Users\user\AppData\Roaming\Sublime Text 3\Packages\ConvertToUTF8 中，修改 ConvertToUTF8.sublime-settings 檔，將 GBK 順序對調
  •   ["Chinese Traditional (BIG5)", "BIG5"]  ["Chinese Simplified (GBK)", "GBK"],
4. HTML-CSS-JS-Petty 套件：
  • Ctrl + Shift + p, 輸入 inst 開啟 Package Control: Install Package, 輸入 http 找 HTML-CSS-JS-Petty 套件
  • 安裝 node.js Library: node.js 教學文件
  • Ctrl+Shift+p 再輸入 HTMLPrettify 開始使用，但是會出現錯誤訊息，將 C:/Program Files/nodejs/node.exe 路徑貼到"node_path": "C:/Program Files/nodejs/node.exe" 中
  • Ctrl + S 存檔
  • 再次 Ctrl+Shift+p 輸入 HTMLPrettify，測試 HTMLPrettify 可否使用
5. 安裝 livestyle 套件：需要安裝 Chome Brower， livestyle demo
 改使用 gulp + browser-sync

6. 右鍵編輯的功能： 在 Windows 系統中按下右鍵可以顯示 Sublime Text 編輯文件功能，下載 OpenWithSublimeTextAsAdmin.bat 程式碼，存檔，在使用 System Administrator 的權限執行。 參考「」來設定，在 OneDriver Webdev/Setting 中有 sublimeText.reg 的設定檔

在 Sublime Text 網站的首頁，有示範 6 種編輯的功能(請先參考網站的範例)：
  1. 選擇多個編輯目標：先選擇你想要編輯的文字 >> 按 Ctrl +D 一一選擇相同的編輯文字
  2. 改變為垂直的游標：選擇 2 行以上的文字(Mon Tue Wed ...) >> Ctrl + Shift + L >> 輸入 " >> 按 Delete 鍵 >> 按 Esc 取消三個游標 >> 選擇全部文字 >> 游標移至文字最前面 >> 按 [ 鍵 >> 輸入 day =
  3. 加入某種語言的編輯模式：按 Ctrl + Shift + P >> 輸入 sspy >> 選擇編輯的語言  >> 出現該語言編輯模式的樣貌
  4. 快速找尋： Ctrl + P >>
    • 輸入檔名關鍵字，可以找開啟專案的檔案
    • 輸入關鍵字找檔名以後，可以再輸入 '@' 字元，可以再找這個檔案的標題文字內容
    • 輸入'#' 字元可以在目前開啟地檔案中尋找
    •  輸入':' 字元可以到指定的 line number.
    • 例如： "tp@rf" 在檔名是："text_parser.py" 中找一個 function called "read_file" ；輸入： 'tp:100' 可以到 "text_parser.py" 中的 line 100
  5. Ctrl + F : 找所有的空白可以使用 Find All 按鈕

Reference:
-----
[1] https://www.youtube.com/watch?x-yt-ts=1422411861&v=zVLJfrIwEP8&x-yt-cl=84924572 

標籤

標籤：

留言

張貼留言

這個網誌中的熱門文章

CodeBlocks 多國語言的設定步驟

多年來一直都是使用 CodeBlocks 英文的介面，不曾想過要將 CodeBlocks 設定成多國語言的開發環境，對於不習慣於英文介面的國人，設定中文的使用介面是非常需要的環境，在 CodeBlocks 論壇有一篇文章提到 ：Do you know http://wiki.codeblocks.org/index.php?title=Internationalization ?這個連結說明在 Windows 系統如何設定 CodeBlocks 成為 Internationalization 的環境，整個設定過程如下： 到 CodeBlocks 翻譯文件網站 下載 .mo 檔案：下載時需要 Ubuntu One 的帳號及密碼，登入後點選 .mo 檔案(不要下載 .po 檔是可編輯檔) 系統會傳送一封信件，點選信件的連結，將 .mo 檔案下載 將檔案複製到 C:\Codeblocks\share\CodeBlocks\locale\zh_TW 目錄(沒有這個目錄請自己建立) 開啟 CodeBlocks >> Setting >> Environment >> View >> Internationalization 選項打勾 >> 點選 Chinese 重新開啟 CodeBlocks 要加入其他語言的 .mo 檔案，則在 locale 目錄中新增其他語言的目錄名稱，例如： 德國 de_DE，這樣 CodeBlocks 就是多國語言的開發環境了。 當如果要恢復英文的介面，只要取消 Internationalization 的選項勾選，然後再次重新開啟 CodeBlocks 就回到英文的開發環境。 後記： CodeBlocks 翻譯文件網站 要下載 .mo or .po 檔案需要等待系統回復信件到 Email 信箱，無法及時處理，將這些檔案儲存在 Google Driver 的 src/CodeBlocks 目錄，以後可以從這裡直接取用。
張貼留言
閱讀完整內容

cmd 程式無法執行的解決步驟

因為要設定 cmd 的編碼方式為 Unicode 編碼( chcp 65001)，可能不小心修改了編碼，而導致cmd 無法開啟，主要的原因是：「cmd 變成沒有編碼」，所以才造成 cmd 無法開啟。在 Windows 8 中要恢復 cmd 編碼的步驟如下： 1. 滑鼠移到左上角，會出現功能的選項，點選「搜尋」的圖示 2. 在輸入的格子中，輸入「cmd」但是不要按下 enter 3. 滑鼠移到「cmd 命令提示字元」，，按下「滑鼠右鍵」 4. 下面會出現一些選項，點選「開啟檔案位置」，如此可以找到 cmd 命令提示字元的位置 5. 在「 命令提示字元」檔案中按下滑鼠右鍵，並點選「內容」 6. 點選「選項」，把「950 - Big 5 繁體中文」的編碼加入  
張貼留言
閱讀完整內容

洗鏡光 - DCview.com達人部落格

要找 working set 的資料，從 [1] 的網站中得到他寫的作業系統筆記，而他筆記的內容大部分是從洗鏡光老師投影片的內容整理而來，於是 google "洗鏡光" 找的洗鏡光老師的投影片，結果是：「洗鏡光 - DCview.com達人部落格」，這是介紹「相機」的網站阿，怎麼是洗鏡光 老師的 blog 呢？ 後來自己認為：「洗鏡光老師不可能沒有自己的網頁」，於是在「程式設計俱樂部」論壇[2]中找到洗鏡光老師的發言，其中有老師的英文名字(   shene )，再使用 shene 找，於是在找到洗鏡光老師[3]在美國的網站。從老師英文的網站中，在得知老師在台灣的網站就是「洗鏡光 - DCview.com達人部落格」，繞了一大圈才在「文章列表-- 電子計算機（電腦）科學 (3)」中，真正找到洗鏡光老師的投影片。 在 blog 中，另外有2篇文章，有一篇是說明「浮點數精確度」的問題，是值得詳細閱讀。 -------------------------------------------------------------- [1]  http://nixchun.pixnet.net/blog/category/523852 [2]  http://www.programmer-club.com.tw/ [3]  http://blog.dcview.com/blog.php?m=Bj8CZQ%3D%3D
張貼留言
閱讀完整內容