Emacs and HTML Tips

Put your cursor on or inside the tag, then press 【Ctrl+c Ctrl+d】 (sgml-delete-tag). This will delete both starting and ending tags. Very convenient.

Type 【Ctrl+c Ctrl+f】 (sgml-skip-tag-forward) and【Ctrl+c Ctrl+b】 (sgml-skip-tag-backward).

You can assign a easier shortcut of 【Alt+→】 and 【Alt+←】. Use the following code:

(add-hook 'html-mode-hook
 (lambda ()
 (define-key html-mode-map (kbd "<M-left>") 'sgml-skip-tag-backward)
 (define-key html-mode-map (kbd "<M-right>") 'sgml-skip-tag-forward)
 )
)

If you don't need to do indenting in your html source, you can make the tab key to jump to the next ending tag (without matching anything), and shift-tab to jump to previous beginning tag. The following elisp code does it:

(defun html-next-content ()
  "Move cursor to the end of next html tag's content."
  (interactive)
  (forward-char 1)
  (search-forward-regexp "</")
  (backward-char 2)
  )

(defun html-previous-content ()
  "Move cursor to the beginning of previous html tag's content."
  (interactive)
  (search-backward-regexp ">\\([^§]+?\\)</")
  (forward-char 1)
  )

(add-hook 'html-mode-hook
 (lambda ()
 (local-set-key (kbd "<f7>") 'html-previous-content)
 (local-set-key (kbd "<f8>") 'html-next-content)
 )
)

Place the following in your emacs init file:

(defun replace-string-pairs-region (start end mylist)
  "Replace string pairs in region."
  (save-restriction 
    (narrow-to-region start end)
    (mapc
      (lambda (arg)
        (goto-char (point-min)) 
        (while (search-forward (car arg) nil t) (replace-match (cadr arg)) )
      ) mylist
    )
  )
)

(defun replace-html-chars (start end)
  "Replace “<” by “&lt;” and other similar HTML chars that needs to be encoded."
  (interactive "r")
(replace-string-pairs-region start end '(
("&" "&amp;")
("<" "&lt;")
(">" "&gt;")
    )
  )
)

With the above code, you can select a region, then press 【Alt+x replace-html-chars】, and have all “&”, “>”, “<” replaced by their encoded entity. You can define a keyboard shortcut for easy operation.

You can also use the code to replace some HTML entities by their actual unicode characters. For example:

This makes the HTML source code more elegant and readable. You need to declare your charset as one of unicode encodings. See Character Sets and Encoding in HTML.

Press 【Ctrl+c Ctrl+v】 (browse-url-of-buffer). You can also get a textual preview by pressing 【Ctrl+c Tab】 (sgml-tags-invisible), which will hide all the tags. Press 【Ctrl+c Tab】 again to show tags.

Put the following code in your emacs init file:

(defvar hexcolour-keywords
  '(("#[abcdef[:digit:]]\\{6\\}"
     (0 (put-text-property
         (match-beginning 0)
         (match-end 0)
         'face (list :background 
                     (match-string-no-properties 0)))))))
(defun hexcolour-add-to-font-lock ()
  (font-lock-add-keywords nil hexcolour-keywords))

(add-hook 'css-mode-hook 'hexcolour-add-to-font-lock)

With the above code, when you open a css file, any text of color spec in hex form will be colored with its value, as the background color. Here's a sample screenshot:

If you want it work in html file too, repeat the “add-hook” line with “'html-mode-hook”.

Use the menu 〖Edit▸Text Properties▸Display Colors〗 or type 【Alt+x list-colors-display】. This is useful as a color reference for HTML coding. To show their RGB value in decimal: 【Ctrl+h v color-name-rgb-alist】.

Suppose this is your text:

<img src="img/emacs_logo.png">

Move your curser on the file path, then press 【Alt+x ffap】. (ffap is a alias to the command find-file-at-point) You can also create a shortcut such as F8 key for this.

In emacs version 22 or later, type 【Alt+x tumme】. Emacs will create thumbnails on the fly. (You need ImageMagick installed for tumme to work.) Here's a screenshot:

(defun open-in-desktop ()
  "Open the current file in desktop.
Works in Microsoft Windows and Mac OS X."
  (interactive)
  (cond
   ((string-equal system-type "windows-nt")
    (w32-shell-execute "explore"
                       (replace-regexp-in-string "/" "\\" default-directory t t)))
   ((string-equal system-type "darwin") (shell-command "open ."))
   ) )

(global-set-key (kbd "<f7>") 'open-in-desktop) 

With above, pressing F7 will open the current dir in desktop on Windows or Mac.