Xah HTML Mode Tutorial

By Xah Lee. Date: . Last updated: .

This page is a tutorial on using Xah HTML Mode

once you have installed xah-html-mode, then open any file whose name ends in “.html”. In the mode line, you'll see “∑html”, that means you are in xah-html-mode.

xah html mode modeline 2022-03-10 fcHz
xah html mode modeline 2022-03-10 fcHz

View Manual

Alt+x describe-function, then type xah-html-mode, to see the documentation.

xah html mode 2022-03-10 qHVg
xah html mode 2022-03-10

The mode is completely self-documented. You can just browse the doc string in emacs.

Find Key of a Command, or Command Name of a Key

we will only mention command name here. To find the key, see: Emacs Principles, Command and Keys.

Insert Tags

To insert a tag, press Tab (xah-html-insert-tag)

xah html mode insert tag 2021-09-18
xah html mode insert tag

xah-html-insert-tag is the general way to insert any html tag.

Here's specialized commands to create some commonly used tags:

xah-html-blocks-to-paragraph
Turn blocks into paragraphs. Press - to repeat.
xah-html-insert-br-tag
insert a br tag.

Create List

xah-html-lines-to-list
Turn lines to a unordered list. Press Ctrl+u first for ordered list.
xah-html-lines-to-def-list
Turn lines to a definition list

Create Table

xah-html-lines-to-table
Turn lines into a table.

Create Link

To create a link, of url, image, pdf, etc, first paste the url or file path, then Alt+x xah-html-any-to-link

The command creates different links for different url/path. For example:

you can also call a specific command:

Embed Image

To turn a image path into a embedded image with figure and caption, Alt+x xah-html-any-to-link

Here's more specific commands:

xah-html-image-path-to-figure-tag
Turn path into img tag with figure and figcaption
xah-html-image-to-img-tag
Turn path into img tag
xah-html-image-to-link
Turn path into a link

Embed Programing Language Source Code

xah-html-insert-pre-tag
Create a pre code with class name of a programing language.
xah-html-pre-code-to-new-file
Move the source code to a temp file. So you can run it.
xah-html-toggle-syntax-color-tags
add or remove span tags that colors the source code.
xah-html-dehtmlize-pre-code-buffer
remove all span markup in buffer that colors the source code.
xah-html-redo-syntax-coloring-buffer
Redo all pre source code blocks in buffer.

Tag Navigation

xah-html-goto-matching-tag
press to repeat.
xah-html-prev-opening-tag
press to repeat.
xah-html-next-opening-tag
press to repeat.

Select Element

xah-html-select-element
Select the current element. Press - to repeat.

Remove Tags

xah-html-remove-tag-pair
Delete the open and close tag pair. (before cursor) Press - to repeat. Useful info in tag's attribute, such as link url, image source path, are preserved in a markdown format. Not useful innerText such as JavaScript code in script tag, are removed with the tags.
xah-html-remove-list-tags
Delete all list tags. (of current block.)
xah-html-remove-paragraph-tags
Delete all p tags. (of current block.)
xah-html-remove-tags
Delete all tags. (of current block.)
xah-html-html-to-text
Delete tags but preserve info. (of current block.) For example, url in link remain, image path remain. This command basically convert html to plain text in best format as much as possible.
xah-html-join-tags
Join two same elements together. Cursor must be in between the end tag and begin tag. Press - to repeat.

Open in a Browser

xah-html-open-in-browser
Open buffer in default browser.
xah-html-open-in-chrome
In Chrome. If cursor is on a url, open the url, else buffer.
xah-html-open-in-safari
In Safari. If cursor is on a url, open the url, else buffer.
xah-html-open-in-firefox
In Firefox. If cursor is on a url, open the url, else buffer.
xah-html-open-in-brave
In Brave. If cursor is on a url, open the url, else buffer.
xah-html-open-in-vivaldi
In Brave. If cursor is on a url, open the url, else buffer.

Abbreviation

Type hr will become <hr />

Alt+x list-abbrevs to see all abbrevs.

Insert HTML Template

Type htmlt to insert a whole html template.

view the image in a image tag

Just move cursor to the file path, press Enter to open it.

History of Xah Html Mode

xah-html-mode began in 2013. And went thru a complete rewrite in 2021-08.

HTML

ErgoEmacs mascot-s276x226
Buy Xah Emacs Tutorial