Emacs: Xah HTML Mode

, 2013-04-28

This is the home page of xah-html-mode, a emacs major mode for HTML5.

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.

This mode currently alpha software. It is result of my several years of manual coding HTML. All commands have fairly complete and correct inline doc. But there's no keybinding as of now. You'll have to set them yourself.

some command names might also change in the future, also behavior. ALPHA!

Current Features

HTML5 tag names are colored. (⁖ p, span, div, b, i, …)
HTML5 attribute names are colored. (⁖ class, id, style, title, width, height, …)
CSS property names are colored. (⁖ color, font-family, border, position, width, …)
CSS unit names are colored. (⁖ px, em, ex, %, …)
CSS color names are colored. (⁖ red, yellow, aqua, aquamarine, …)
Curly quoted text are colored (as well as strings). (⁖ “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 xhm-wrap-html-tag, xhm-wrap-url, xhm-wrap-p-tag.

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

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

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

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

• Extract URL in a text selection. xhm-extract-url.

• Htmlize keyboard shortcuts notation xhm-htmlize-keyboard-shortcut-notation

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

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

• Change inline image tag and image file name. xhm-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. Right now i'm using https://code.google.com/p/ergoemacs/source/browse/packages/xah-comment.el, which is another alpha software.

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

download here: https://code.google.com/p/ergoemacs/source/browse/packages/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 Modes