Just saw an interesting kbd tag supported on Stackoverflow and started wondering how to display Apple keys like command, shift, control, option, etc. on the Web page.
And it actually is very straightforward using HTML character entities. The concept is well explained in this Wikipedia article. There are two forms: numeric character reference and character entity reference:
numeric character reference: either in decimal form (&#dddd;) or in hexadecimal form (&#xhhhh;), e.g. "less than" character can be expressed as < or <
character entity reference: in the form of &name; the same "less than" character can be expressed as <
Now, it is very clear how to display these special Apple keys with the help of entity tables such as this unicode table. Somehow I could not find the corresponding character entity reference table for the same keys.
These are the most common Apple keys you might use:
⌘ Command: ⌘
⇧ Shift: ⇧
⌃ Control: ⌃
⌥ Option: ⌥
⎋ Esc: ⎋
If you use TextMate, there is a convenient HTML bundle feature that helps to insert these special characters in an HTML document. Create a new HTML document, then goto Bundles menu => HTML => Entities => Pick the character you want. You can also use the autocomplete, e.g. type "command" and press tab.
Wednesday, August 31, 2011
migrate from TextMate to Vim/MacVim
Choosing text editor is like choosing your religion. One popular/natural choice on Mac is TextMate. However, since I do lots of work on the server/dev linux box directly, I had to switch back and forth from Vim. Probably it is time to migrate to use Vim on Mac as well, especially given the fact that there are nice distro made for Mac specifically: MacVim and a customized MacVim packaged with many useful plugins called Janus.
Here are two good testimony from other migrants:
Here are two good testimony from other migrants:
Here are several useful learning resources:
- Vim Commands Cheat Sheet (for good reference, there are multiple other similar cheat sheets)
- vimtutor (simply open your terminal and type vimtutor)
- A Byte of Vim
- Vim Recipes
- Essential Vim Plugins (plugins are very helpful to create your effective workflow)
Plugins shipped with Janus:
Spend 5 minutes to go through the brief introduction for all the plugins that ships with Janus. Janus also includes a handy way to allow you to create/edit ~/.janus.rake file to add more plugins and you can run rake inside ~/.vim to update these plugins.
Sample ~/.janus.rake
NERDTree: provides a file browser, use \n to show/hide.
Command-T: provides an efficient way to search for files in current working directory. Use ⌘+T to show/hide.
snipMate: provides the same Textmate Snippet feature. As you do in TextMate, you can simply type snippet keywords and press tab to expand to code snippets and use tab to jump through various locations in the snippets. You can find all snippet definitions for various languages in ~/.vim/snippets.
ctags: TagList plugin is shipped with Janus. Use :Tlist to show/hide it. But I like Tagbar better than TagList (see below for installation instructions).
Other handy plugins I installed:
Syntastic: syntax checker, you can also go to the jslint route. This Stackoverflow post covers the setup in details.
Tagbar: displays tags of the current file in a sidebar, sorta like TagList, but more comprehensive and orders tags under correct scope/context.
doctorjs: previously known as jstags, provides a set of static analysis tools for JavaScript. Combined with Tagbar, it provides a more detailed code structure navigation than TagList. See this Stackoverflow post for instructions how to set it up. Note that you need to install NodeJS as a prerequisite.
There are two issues to get doctorjs set up properly that is not covered in that Stackoverflow post:
Spend 5 minutes to go through the brief introduction for all the plugins that ships with Janus. Janus also includes a handy way to allow you to create/edit ~/.janus.rake file to add more plugins and you can run rake inside ~/.vim to update these plugins.
Sample ~/.janus.rake
vim_plugin_task "zencoding", "git://github.com/mattn/zencoding-vim.git" vim_plugin_task "minibufexpl", "git://github.com/fholgado/minibufexpl.vim.git"
NERDTree: provides a file browser, use \n to show/hide.
Command-T: provides an efficient way to search for files in current working directory. Use ⌘+T to show/hide.
snipMate: provides the same Textmate Snippet feature. As you do in TextMate, you can simply type snippet keywords and press tab to expand to code snippets and use tab to jump through various locations in the snippets. You can find all snippet definitions for various languages in ~/.vim/snippets.
ctags: TagList plugin is shipped with Janus. Use :Tlist to show/hide it. But I like Tagbar better than TagList (see below for installation instructions).
Other handy plugins I installed:
Syntastic: syntax checker, you can also go to the jslint route. This Stackoverflow post covers the setup in details.
Tagbar: displays tags of the current file in a sidebar, sorta like TagList, but more comprehensive and orders tags under correct scope/context.
doctorjs: previously known as jstags, provides a set of static analysis tools for JavaScript. Combined with Tagbar, it provides a more detailed code structure navigation than TagList. See this Stackoverflow post for instructions how to set it up. Note that you need to install NodeJS as a prerequisite.
There are two issues to get doctorjs set up properly that is not covered in that Stackoverflow post:
- It seems that installing doctorjs needs sudo (sudo make install inside doctorjs git clone directory) to get around permission issue.
- I also got errors about underscore module and ctags NodeJS module cannot be found. They are located at /usr/local/lib/jsctags/ after doctorjs is installed. But node cannot locate them somehow. To fix it, I installed underscore using npm (npm install underscore -g), then I updated my NODE_PATH environment variable to include /usr/local/lib/jsctags/.
Subscribe to:
Posts (Atom)