Emacs: Xah HTML Mode

By Xah Lee. Date: 2013-04-28. Last updated: 2014-10-01.

This is the home page of xah-html-mode.

xah-html-mode is a emacs major mode for HTML5.

xah-html-mode is a pure HTML mode. It's good for if you manually write pure HTML, with no mixed JavaScript and PHP etc. 〔➤see Xah JavaScript Tutorial〕

It is designed for clean HTML5 only. (but you could use it for HTML4 or XHTML.)

How's it diff from default HTML mode or other HTML modes?

The basic idea of this mode is simple keyword based coloring. Just color keywords, that's all, no fancy syntax parsing. (this also means you'll get wrong colors in text.)

The idea of simple keyword coloring is that, if a word is colored in a particular way, you know for sure it is a keyword in one of {HTML, CSS, JavaScript, PHP, …}, and you can tell if it is {type, class, var, function, property} by the coloring (most of the time). It lets you easily recognize typos too, because it won't be colored.

that's the basic idea.

the mode's tag completion is much more superior.

Features

HTML5 tag names are colored. (➢ for example: p, span, div, b, i, …)
HTML5 attribute names are colored. (➢ for example: class, id, style, title, width, height, …)
CSS property names are colored. (➢ for example: color, font-family, border, position, width, …)
CSS unit names are colored. (➢ for example: px, em, ex, %, …)
CSS color names are colored. (➢ for example: red, yellow, aqua, aquamarine, …)
Curly quoted text are colored (as well as strings). (➢ for example: “curly”, "string")

• tag insertion cammands. They wrap a tag around text selection. If there's no selection, then decided smartly on word/line/block. When current selection or position is empty, it'll place your cursor in between the inserted tag. The major command is xah-html-wrap-html-tag, xah-html-wrap-url, xah-html-wrap-p-tag.

• Convert text to table or reverse. xah-html-make-html-table, xah-html-make-html-table-undo.

• Convert lines to list xah-html-lines-to-html-list.

• Command to colorize computer language code. xah-html-pre-source-code, xah-html-htmlize-or-de-precode, xah-html-get-precode-make-new-file

• Remove HTML tags: xah-html-remove-html-tags, xah-html-remove-span-tag-region

• Extract URL in a text selection. xah-html-extract-url.

• Htmlize keyboard shortcuts notation xah-html-htmlize-keyboard-shortcut-notation

• Replace region text to HTML entities or Unicode equivalent. xah-html-replace-html-chars-to-unicode, xah-html-replace-html-chars-to-entities

• Updating title and h1 tags of current file. xah-html-update-title

• Change inline image tag and image file name. xah-html-rename-html-inline-image

Todo

here's major features am working on

lets you navigate/delete tags. Similar to sgml-skip-tag-forward and sgml-delete-tag, but hopefully better.

real-time syntax coloring of nesting tags. Similar to show-paren-mode.

some type of sematic unit editing (similar to paredit mode for elisp). The idea is that, you always edit by tag units, so that your tags are never mismatched.

robust handling of comments.

Possibly adding JavaScript and PHP keywords, so the mode could become a general mode for web dev.

normal problem of multi-mode is mostly avoided, because this package doesn't really try to do any syntax checking. I'm thinking this approach might be better in practice.

Download

https://github.com/xahlee/xah-html-mode.el

Want this mode to grow? Voice your support. 《Emacs: new major modes for HTML, CSS, PHP, ELISP, and Lean Emacs LISP Manual》 @ http://pledgie.com/campaigns/19973

also checkout Emacs: Xah CSS Mode. Much simpler.

Xah Emacs Packages

Like it? Buy Xah Emacs Tutorial. ♥ Thanks.

or, buy something from my keyboard store.