Xah HTML Mode Tutorial
This page is a tutorial on using Xah HTML Mode
to see the documentation.
To insert a tag, press
It'll wrap the tag around the current word, line, or block, depending on the tag. Also, if there is selection, it'll wrap around the selection.
To add a class attribute or id attribute, press Ctrl+u Tab. It'll prompt for class name and id. Leave blank if you do not want the attribute.
xah-html-insert-tag is the general way to insert any html tag.
Here's specialized commands to create some commonly used tags:
- Turn blocks into paragraphs. Press Space to repeat.
- insert a
- Turn lines to a unordered list. Press Ctrl+u first for ordered list.
- Turn lines to a definition list
- Turn lines into a table.
To create a link,
of url, image, pdf, etc,
first paste the url or file path, then
xah-html-any-to-link is a smart command, it 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.
looks at the input and calls one of the following:
you can call any of these yourself.
Emacs: Insert HTML Tag
To turn a image path into a embedded image with figure and caption,
just press Tab
Here's more specific commands:
- Turn path into
- Turn path into
- Turn path into
Embed Programing Language Source Code
- Create a pre code with class name of a programing language.
- Move the source code to a temp file. So you can run it.
- add or remove span tags that colors the source code.
- remove all span markup in buffer that colors the source code.
- Redo all pre source code blocks in buffer.
- Goto previous begin tag. Press ← to repeat.
- Goto next begin tag. Press → to repeat.
- Goto element's begin/end tag. Press Space to repeat.
- Select the current element. Press Space to repeat.
- Delete all list tags. (of current block.)
- Delete all p tags. (of current block.)
- Delete all tags. (of current block.)
- 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.
- Join two same elements together. Cursor must be in between the end tag and begin tag. Press Space to repeat.
preview in a browser
- Open buffer in default browser.
- In Chrome. If cursor is on a url, open the url, else buffer.
- In Safari. If cursor is on a url, open the url, else buffer.
- In Firefox. If cursor is on a url, open the url, else buffer.
- In Brave. If cursor is on a url, open the url, else buffer.
hr will become
list-abbrevs to see all abbrevs.
p→ p tag (paragraph)
br→ br tag (line break).
hr→ hr tag (horizontal line)
Insert HTML Template
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.
open the current directory in OS desktop
Emacs: Open File in External App
History of Xah Html Mode
Xah Html Mode began in 2013. And went thru a complete rewrite in 2021-08. There are a lot to code. If you like it, please pay me.