Emacs: Xah HTML Mode Tutorial

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.

View Manual

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

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

Insert Tags

To insert a tag, press Tab twice. (xah-html-insert-tag) You can change the start key.

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.

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:

• If the the url is Wikipedia, it'll use just the article title for link text.
• If the path is YouTube url, it'll embed the video.
• If the path ends in jpg/png/svg, it'll become embedded image.
• If the path ends in css, it'll create stylesheet link.
• If the path ends in js, it'll create script link.
• If the path ends in audio/video extension, it'll create audio/video embed.

you can also call a specific command:

• xah-html-audio-file-embed
• xah-html-css-path-to-link
• xah-html-emacs-ref-to-link
• xah-html-image-path-to-figure-tag
• xah-html-js-path-to-link
• xah-html-local-file-to-link
• xah-html-pdf-path-to-link
• xah-html-url-to-dated-link
• xah-html-video-file-embed
• xah-html-wikipedia-url-to-link
• xah-html-word-to-anchor-tag
• xah-html-youtube-url-embed

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

Includes a abbrev system. You can define any tag or 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.