跳到主要內容

利用 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 目錄，以後可以從這裡直接取用。
張貼留言
閱讀完整內容

輸入及轉換 Unicode 編碼

如何輸入羅馬數字？不管大寫的數字 ，或者小寫的數字，不知道 Unicode 編碼的人總是會以輸入英文字母 i or I 來替代，即輸入 i, ii, iii, or I, II, III，或許他們不會面臨要輸入 4 以上的羅馬數字，這樣的做法就可以在人類的視覺誤差中暫時瞞騙過關，然而，這樣的作法卻帶來資訊系統不可見的人為問題。這篇文章將描述如何輸入正確的羅馬數字？如何搜尋 Unicode 編碼？以及如何輸入 Unicode 編碼。關於 Unicode 編碼輸入與顯示是一個相當複雜的議題，這篇文章僅針對在 Windows 作業系統中的應用程式如何輸入與搜尋 Unicode 編碼？如何在 Unicode 編碼與對應字元之間做轉換？不會涉及其他的議題；若依照下面描述的輸入方式輸入 Unicode 編碼，不保證能完全符合你/妳所使用個人電腦系統的環境，請再參考相關的文章來解決輸入與顯示 Unicode 編碼的問題。 Unicode 編碼的輸入方式 在 Wiki 的文件 中說明如何在不同環境下輸入特殊字元的 Unicode 編碼，在 Windows 作業系統中輸入 Unicode 編碼的方式如下： Microsoft Word or Wordpad：先輸入 unicode 的編碼，再按下 Alt + x，例如，在 word 中輸入 1f370，然後按下 Alt+x，就會顯示 🍰( &#x1f370)的字元 其他 Microsoft 所有應用程式：應用程式包括 Microsoft PowerPoint, Excel, VS Code 等程式，且要支援 Unicode 編碼的版本，都可以使用注音輸入法來輸入 Unicode 編碼；首先切換到注音輸入法的中文輸入模式，然後按下~鍵(Esc 下方的鍵) + u + Unicode 編碼，特別要注意輸入的數字是鍵盤上方的數字鍵，不可以使用 Number Pad 的數字鍵。 查詢 Unicode 編碼 Unicode編碼的對應字元可以連結到 The Unicode Consortium 的 Code Charts 網站，在網站中輸入你/妳想要字元的 Unicode 編碼，如此就可以找到這個 Unicode 編碼的字元，問題是：我們通常是心中有字元的圖像，或者是要先看到字元的樣子，才知道我們要使用...
張貼留言
閱讀完整內容

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

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