Demo blog post created by nikola&org2nikola

python code:

import getopt, sys
if __name__ == '__main__':
    opts, args = getopt.getopt(sys.argv[1:], "hf:", ["help", "file="])
    for o, a in opts:
        if o in ("-h", "--help"):
            assert False, "unhandled option"
    print "hello world";

This is table:

Name Description Alternatives
Evil convert Emacs into vim none
org-mode Get Things Done (GTD) none
company-mode code completion auto-complete
expand-region selection region efficiently none

This is list:

  • list item 1
  • list item 2
  • list item 3
  • list item 4

How to validate HTML5 code with Flymake effectively

UPDATED: <2014-12-11>

CREATED: <2014-12-05>

Here is the solution from EmacsWiki.

I found it not effective because tidy is too strict to HTML5 and produces too much noise.

I only need validation of missing open/closed html tag(s). Nothing more!

So here is my complete solution:

(defun flymake-html-init ()
       (let* ((temp-file (flymake-init-create-temp-buffer-copy
              (local-file (file-relative-name
                           (file-name-directory buffer-file-name))))
         (list "tidy" (list local-file))))

(defun flymake-html-load ()
  (when (and (not (null buffer-file-name)) (file-writable-p buffer-file-name))
    (set (make-local-variable 'flymake-allowed-file-name-masks)
         '(("\\.html\\|\\.ctp\\|\\.ftl\\|\\.jsp\\|\\.php\\|\\.erb\\|\\.rhtml" flymake-html-init))
    (set (make-local-variable 'flymake-err-line-patterns)
         ;; only validate missing html tags
         '(("line \\([0-9]+\\) column \\([0-9]+\\) - \\(Warning\\|Error\\): \\(missing <\/[a-z0-9A-Z]+>.*\\|discarding unexpected.*\\)" nil 1 2 4))
    (flymake-mode t)))

(add-hook 'web-mode-hook 'flymake-html-load)
(add-hook 'html-mode-hook 'flymake-html-load)
(add-hook 'nxml-mode-hook 'flymake-html-load)
(add-hook 'php-mode-hook 'flymake-html-load)

The only difference from EmacsWiki is only one line:

'(("line \\([0-9]+\\) column \\([0-9]+\\) - \\(Warning\\|Error\\): \\(missing <\/[a-z0-9A-Z]+>.*\\|discarding unexpected.*\\)" nil 1 2 4))

Advanced tip on using mozrepl to automatically refresh browser

Here is the setup on Emacswiki.

I find it annoying instead of helpful in real world usage.

The mozrepl trick basically will refresh the current active page in Firefox. It's not smart enough. When developing a web application, I will open many stackoverflow pages to look for technical solution. I don't like my stackoverflow page being refreshed when I'm saving the HTML code for some web application.

So here is my improved solution:

(defun my-moz-refresh-browser-condition (current-file)
  "Should return a boolean javascript expression or nil"
  (let (rlt)
     ((string-match "\\(beeta\\|cb_tutorial\\)" current-file)
      (setq rlt "content.document.location.href.indexOf(':8001')!==-1"))
      (setq rlt nil)))

;; {{ mozrepl auto-refresh browser
(defun moz-reload-browser ()
  (let (js-cond cmd)
    (if (fboundp 'my-moz-refresh-browser-condition)
        (setq js-cond (funcall 'my-moz-refresh-browser-condition (buffer-file-name))))
      (setq cmd (concat "if(" js-cond "){setTimeout(function(){content.document.location.reload(true);}, '500');}")))
      (setq cmd "setTimeout(function(){content.document.location.reload(true);}, '500');")))
    (comint-send-string (inferior-moz-process) cmd)

(defun moz-after-save ()
  (when (memq major-mode '(web-mode html-mode nxml-mode nxhml-mode php-mode))

(add-hook 'after-save-hook
              'append 'local)
;; }}

Tips on using Ctags with Emacs

Ctags is critical to my web projects. I use it for code navigation by `M-x find-tag` and code auto-completion by using company-etags from company-mode.

The first tip is to use global variable `tags-table-list` instead of `tags-file-name`. The Emacs documentation says you should NOT set both. `tags-table-list` is better because it's a list, where you can store multiple tag files.

Here is the value of `tags-table-list` for one project:

("/Users/cb/projs/their-project/test/cdn/test/assets/test/js/TAGS" "/Users/cb/projs/their-project/test/app/TAGS")

The purpose to use multiple tag files in sub-folders instead of one tag file in root folder is to scan less code files.

The second tip is we can avoid feeding big js files to ctags. Currently one of my client's project is not managed well. They place the concatenated js files, third party js libraries, and normal code file into one folder. The naming of files is a mess. So I can not tell which is which from file name or file path. The tag file created from those big concatenated js files will crash my Emacs.

Change the ctags command line underhood will solve the problem. Here is the actual liner to create a tag file:

find proj-dir -type f -not -iwholename '*TAGS' -not -size +16k | ctags -f ~/proj/output/TAGS -e -L -

The point is the option `-not -size +16k`. It means only handle files less thank 16k.

Here is the Emacs lisp function to wrap above shell command:

(defun my-create-tags-if-needed (SRC-DIR CTAGS-OPTS &optional FORCE)
  "return the full path of tags file"
  ;; TODO save the CTAGS-OPTS into hash
  (let ((dir (file-name-as-directory (file-truename SRC-DIR)) )
    (setq file (concat dir "TAGS"))
    (when (or FORCE (not (file-exists-p file)))
      (setq cmd (format "find %s -type f -not -iwholename '*TAGS' -not -size +24k | ctags -f %s -e  %s -L -" dir file CTAGS-OPTS))
      (shell-command cmd))

BTW, here is my ~/.ctags.

In summary, there are ONLY two points:

  • What's the `tags-table-list`
  • How the tags file are created by ctags


  1. My tags file management strategy is described at How to use ctags in Emacs effectively. It's effective to me. But it may be not generic enough to apply to others' use cases.
  2. I do use Gnu Global for C/C++/Java code. I use it exactly in the same way as ctags. Please `man global` for the details. Hint, all you need care is the environment variable GTAGSLIBPATH.

Debug efficiently in Emacs

Please note:

  • I use javascript as a use case. The solution is generic enough to be applied to any language. At the end of the article, Emacs Lisp is used as another example.
  • I'm good at most debuggers. The point of this article is to deal with more difficult issues the debugger can not handle.
  • My code quality is fine. It handles all the corner cases I've met. For example, single quote and double quotes will be escaped properly.

1 Problem

As a freelancer I am often required to debug legacy javascript code from some huge "enterprise"" applications.

The only way to debug such application is to insert as many as possible logging code, watch the output, and think.

So my problem is how to insert logging code as quickly as possible.

2 Solution

My solution is Yasnippet. Yasnippet allow me to insert executable Emacs Lisp code in its snippet. I will Sotake full advantage of that feature.

3 Logging simple JS variable

Given a variable name like "var1", I need insert javascript code as below:

console.log("var1=", var1)


This snippet need you input variable name once.

4 Logging complex JS variable

In real world, the JS variable is often a string like "MyController.servicea.find('.class').attr1" which I hate to type.

So the solution is that I copy the JS variable into kill ring where my snippet will read the variable name.


5 Logging JS function name when it's called

In below example, I need insert "console.log('hello is called');" in function "hello":

function hello() {
  console.log('hello is called');


This snippet use the Emacs command `which-function`. If you read the code of `which-function`, you will find that it's Imenu-mode who actually extracts the function name. But Imenu-mode requires you pre-define enough regular expressions.

Please check I have defined many regular expressions for AngularJS and JQuery.

The regular expressions could be used in both js-mode and js2-mode.

6 Logging JS function name with its parameters

JS example:

function hello(v1, v2,
               v3, v4) {
  console.log("v1=", v1, "v2=", v2, "v3=", v3, "v4=", v4);

I copy the parameter of JS function named "hello". It's just the content between "hello(" and ")", then Emacs Lisp code embedded in the snippet will parse and output the right content from kill ring.


BTW, since I use Evil, copy the parameter into kill-ring is as simple as pressing "yi(".

7 Insert JS debugger statement

@cjk provided this tip. The debugger like Firebug will pause at the debugger statement. It saves me the time to locate JS file, to go to the specific line and set breakpoint after re-deploying the application.


8 Bonus

Similar snippets for Emacs Lisp are defined HERE.

Use bootstrap+font-awesome+jquery for IE7 web application

Live demo:

Screenshot: e86f11a6-733c-11e4-8312-a6c8ad2b17be.png

1 Environment

  • Bootstrap 2.3.2
  • font-awesome 3.2.1
  • JQuery 1.8.2

I only use the grid layout from bootstrap and minimum API from jQuery.

2 Notes

  • IE7 does not support media query. So I abandon "mobile first" strategy, new strategy is "IE7 first".
  • IE7 does not support inline-block properly, I need below css code hack:
.myclass {
  display: inline-block;
  /* ie7*/
  *display: inline;
  zoom: 1;
  • bootstrap's row-fluid has issues in IE7. I use row-fluid in this case, but have to hard code the row width sometimes.
  • add below code into javascript so that I can hack IE7-only css code:
if($.browser.msie && parseFloat($.browser.version) < 8){
  that.ie7 = true;

Make web-mode support HTML with AngularJS data-binding

I find it very useful to use `M-x imenu` to jump to the AngularJS binding point of one HTML file.

Insert below code into ~/.emacs:

(eval-after-load 'web-mode
     ;; angular imenu
     (add-to-list 'web-mode-imenu-regexp-list
                  '(" \\(ng-[a-z]*\\)=\"\\([a-zA-Z0-9]*\\)" 1 2 "="))))

Export org file embedded with code snippets

CREATED: <2014-11-20 Thu>

UPDATED: <2015-06-06 Sat>

1 problem

I use Org-mode to record all my notes.

As a developer, I place code snippets from many programming languages into one org file.

The issue is when exporting the org file, major mode for each language will be loaded to render the code snippet.

It means the hooks of the major modes will be executed. Since I put lots of heavy weight setup things in those hooks, my exporting is extremely slow.

My hooks are also dependent on third party tools. So if anyone else uses my setup without those tools, his/her exporting will fail.

2 Solution

2.1 Setup

In order to solve the issue, I write a small function which will be called at the beginning of each major mode hook.

The function basically check whether the `(buffer-file-name)` is the temporary file created by Org-mode or the output HTML converted from org file. If answer is "YES", then code in major mode hook will not be executed.

(defvar load-user-customized-major-mode-hook t)
(defvar cached-normal-file-full-path nil)
(defun is-buffer-file-temp ()
  "If (buffer-file-name) is nil or a temp file or HTML file converted from org file"
  (let ((f (buffer-file-name))
        (rlt t))
     ((not load-user-customized-major-mode-hook) t)
     ((not f)
      ;; file does not exist at all
      (setq rlt t))
     ((string= f cached-normal-file-full-path)
      (setq rlt nil))
     ((string-match (concat "^" temporary-file-directory) f)
      ;; file is create from temp directory
      (setq rlt t))
     ((and (string-match "\.html$" f)
           (file-exists-p (setq org (replace-regexp-in-string "\.html$" ".org" f))))
      ;; file is a html file exported from org-mode
      (setq rlt t))
      ;; avoid calling to file-exists-p too often for performance reason
      (setq cached-normal-file-full-path f)
      (setq rlt nil)))

2.2 Usage

I use python-mode-hook setup as an example:

(add-hook 'python-mode-hook
          '(lambda ()
             (unless (is-buffer-file-temp)
               (if (executable-find "pyflakes")
               (setq electric-indent-chars (delq ?: electric-indent-chars))

3 Tips

3.1 Export shell code

Exporting shell code will fail if `sh-mode` is loaded. So I use "bash" instead. Since there is no "bash-mode", exporting will be fine.

3.2 Yasnippet setup

To avoid loading yasnippets when exporting, I have to "use yas-minor-mode on a per-buffer basis".

3.3 Manually turn off the major-mode hook

It's controlled by global flag `load-user-customized-major-mode-hook`, as you can see from the "Setup" section.

Say I want to turn off the major mode hooks when `M-x org-publish`, here is the setup:

(defadvice org-publish (around org-publish-advice activate)
  "Stop running major-mode hook when org-publish"
  (let ((old load-user-customized-major-mode-hook))
    (setq load-user-customized-major-mode-hook nil)
    (setq load-user-customized-major-mode-hook old)))

3.4 after-save-hook

`after-save-hook` is the "Normal hook that is run after a buffer is saved to its file". You may also need tweak it up because it will be called when exporting org files

How a programmer publish static HTML blog in Emacs

I can publish my blog in five seconds, running only one Emacs command!

I give you a minimum solution at first, then I explain why and provide technical details.

Basic Emacs lisp knowledges are required.

Please note I'm NOT targeted at specific static site generator like Nikola or Jekyll.

1 Solution

Tested on Linux and OSX.


  • Org-mode bundled with Emacs 24.x
  • Nikola as the blog generator
  • FTP client ncftp
  • Latest org2nikola (v0.0.9+)
  • Insert below code into ~/.emacs
(defun org2nikola-after-hook-setup (title slug)
  (let ((url (concat "" slug ".html"))
        (nikola-dir (file-truename "~/projs/nikola-root"))
        (password "yourpassowrd")
        (username "yourusername")
    (kill-new title)
    (kill-new url)
    (message "%s => kill-ring" url)
    (setq rlt (shell-command-to-string (format "cd %s; nikola build" nikola-dir)))
    (setq lines (split-string rlt "\n"))
    (dolist (l lines)
      (when (string-match "output\\(.*/\\)*\\([^/]*\\)$" l)
        (setq dir (match-string 1 l))
        (setq file (match-string 2 l))
        (setq cmd (format "ncftpput -b -u %s -p %s /blog%s %s/output%s%s"
                          username password dir nikola-dir dir file))
        (message "cmd=%s" cmd)
        (shell-command cmd)

(add-hook 'org2nikola-after-hook 'org2nikola-after-hook-setup)

You can write blog into org file, export and publicize it with command `M-x org2nikola-export-subtree`.

2 Why

I used Wordpress and Org2blog for a very long time. Then I turned to static blog generator because:

  • Wordpress is slow to load web page
  • I waste too much time to "manage" Wordpress (applying security patch, fighting with spam comment …)
  • As a programmer, I need publish code snippets. Wordpress is BAD at rendering code.

Yes, only wordpress sucks. For Org2blog, I can only say good things. Actually, this article is inspired purely by Puneeth Chaganti's excellent work on org2blog.

3 Technical Details

3.1 Generating HTML

As I said, Nikola is my blog generator which converts my org file into HTML.

But I prefer using Org-mode to do the HTML rendering. Nikola only need handle remaining minor book keeping stuff (creating RSS feed, for example).

It's because I want to minimize the dependency. I may switch to other blog generator in the future. But my web site always has the same look and feel because the HTML is generated by Org-mode.

I learned this trick from Org2blog.

If we only use org-mode to create HTML, then extracting code snippet is really easy. All we need is to use regular expression to extract the content between HTML tag "<pre>".

Actually I don't even bother doing the extraction. I just replace all the "<pre>" tag with my own tag because I assume the HTML produced by org-mode is stable.

Here is the Emacs lisp code I borrowed from Org2blog:

(defun org2nikola-replace-pre (html)
  "Replace pre blocks with sourcecode shortcode blocks.
shamelessly copied from org2blog/wp-replace-pre()"
    (let (pos code lang info params header code-start code-end html-attrs pre-class)
        (insert html)
        (goto-char (point-min))
          (while (re-search-forward "<pre\\(.*?\\)>" nil t 1)

            ;; When the codeblock is a src_block
                  (setq pre-class (match-string-no-properties 1))
                  (string-match "example" pre-class))
              ;; Replace the <pre...> text
              (setq lang (replace-regexp-in-string ".*src-\\([a-zA-Z0-9]+\\).*" "\\1" pre-class)  )

              (replace-match "")
              (setq code-start (point))

              ;; Go to end of code and remove </pre>
              (re-search-forward "</pre.*?>" nil t 1)
              (replace-match "")
              (setq code-end (point))
              (setq code (buffer-substring-no-properties code-start code-end))

              ;; Delete the code
              (delete-region code-start code-end)
              ;; Stripping out all the code highlighting done by htmlize
              (setq code (replace-regexp-in-string "<.*?>" "" code))
              ;; class linenums will add stripes which will destory the 3rd party skins
              (insert (concat "\n<pre class=\"prettyprint lang-"
                              (org2nikola-fix-unsupported-language lang)

        ;; Get the new html!
        (setq html (buffer-substring-no-properties (point-min) (point-max))))

The code snippet inside "<pre>" tag could be rendered by 3rd party javascript library google-code-prettify or SyntaxHighlighter.

BTW, the last straw that push me away the Wordpress is its wrapper of SyntaxHighlighter. SyntaxHighlighter is a beautiful and user-friendly library. But the wrapper forces me to tweak the php code in terrible editor from Wordpress.

3.2 Create blog posts

Emacs creates HTML files and meta files. Things created by Emacs will be copied into Nikola's folder.

Nikola's duty is simple. Basically it only copy my stuff from its input folder to its output folder when I trigger "nikola build" command.

The "nikola build" command will also dump the list of files to be uploaded into stdout.

The build message dumped:

Scanning posts....done!
.  render_archive:output/2014/index.html
.  render_sources:output/posts/jump-to-the-positions-before-and-after-m-x-imenu.wp
.  render_posts:cache/posts/jump-to-the-positions-before-and-after-m-x-imenu.html
.  render_indexes:output/index.html
.  render_indexes:output/index-17.html
.  render_tags:output/categories/en.html
.  render_tags:output/categories/emacs.html
.  render_tags:output/assets/js/tag_cloud_data.json
.  render_tags:output/categories/emacs.xml
.  generate_rss:output/rss.xml
.  render_pages:output/posts/jump-to-the-positions-before-and-after-m-x-imenu.html
.  render_pages:output/posts/why-emacs-is-better-editor-part-two.html
.  render_tags:output/categories/en.xml

Only the files in sub-folder "output" need be uploaded.

3.3 Preprocess nikola output

It's all done by Emacs Lisp.

The final output contain lines like:

ncftpput -b -u yourname -p yourpassword /blog/2014/ /home/yourname/nikola-root/output/2014/index.html

As you can see, each line is a ftp upload command we need execute in shell.

3.4 FTP upload

Ncftp is my choice of FTP client. It's solid and efficient.

Its command line tool "ncftpput" has a flag "-b". With the flag ncftpput will start a daemon at background and handles the ftp upload as a batch job submit. It means ftp connection will be reused and the user is not blocked by the upload operation. So the upload operation is extremely fast.

I use Emacs Lisp API `file-truename` to convert all relative path to absolute path to avoid any platform (OSX) issue.

BTW, you can `cat ~/.ncftp/spool/log` to check the FTP upload status.

4 Summary

The workflow is simple.

Emacs and third party JS libraries are responsible for the look and feel of my website.

Blog generator like Nikola is just a thin layer to relay the HTML files created by Emacs.

Ncftp will upload HTML files. It's the best FTP client which could be easily integrated into Emacs.

Jump to the positions before and after `M-x imenu`

As a programmer, I use `M-x imenu` to jump to the callee when editing a code file. After a little code tweaking in the callee, I need jump back to caller as quickly as possible.

1 Solution

Insert below code to ~/.emacs:

(defvar rimenu-position-pair nil "positions before and after imenu jump")
(add-hook 'imenu-after-jump-hook
          (lambda ()
            (let ((start-point (marker-position (car mark-ring)))
                  (end-point (point)))
              (setq rimenu-position-pair (list start-point end-point)))))

(defun rimenu-jump ()
  "jump to the closest before/after position of latest imenu jump"
  (when rimenu-position-pair
    (let ((p1 (car rimenu-position-pair))
          (p2 (cadr rimenu-position-pair)))

      ;; jump to the far way point of the rimenu-position-pair
      (if (< (abs (- (point) p1))
             (abs (- (point) p2)))
          (goto-char p2)
          (goto-char p1))

Now you can use `M-x rimenu-jump` to jump.

2 Technical details

Imenu will push the start point into mark-ring. After reaching the destination, it will call the imenu-after-jump-hook where I can store the end point.

I store the start/end point into rimenu-position-pair and `M-x rimenu-jump` goes to the farthest one from the pair.

Here is the original discussion on G+. Thanks to Jorge A. Alfaro Murillo for enlightening me on the solution.