# Vim Macros for Speedy HTML

### --| Posted: 2025-04-17

#### Table of Contents

#### 1. The Problem

Typing is hard when your hands are cold. Typing HTML manually when your hands are cold is even worse.

Manually adding every single tag and being required to move off of the home row or have really bendy fingers is not fun. I notice myself forgetting what to write because I need to focus all my attention on hitting that < key.

After looking at markdown and downright refusing to use Hugo (probably a big mistake) I found a video by the lovely Luke Smith which goes over how to use vim macros, Vim spellcheck, and remapped insert mode keys to create a solid experience for going Sonic fast through boilerplate garbage and basically turning HTML into tagged-markdown.

I like Vim, so that's what I decided to go with, and boy was it a night and day change.

#### 2. My Solution

I have remapped insert mode keys in vim to add literally every HTML element this website will ever need, links, code, paragraph, bold, italic, headers with link capability, and everything in between. If you've seen an element used on this site, it's now been remapped to automatically generate for me in vim with the press of maybe 3 keys at the maximum.

#### 3. "But how!? Don't keep it all to yourself!"

This can be re-used for any language syntactically speaking. Time to spill the secret sauce!

#### 3.1 Pre-requisites

To successfully write what I've implemented for a different language, you will need to have a decent working-knowledge of vim normal mode commands.

First, go into your vimrc, it is probably located in /etc/vim/vimrc and needs sudo permissions to write to.

Create a gap of newlines in your vimrc and add the following to it:

    filetype plugin on
    set hlsearch

This will allow you to remap keys in your vimrc depending on the filetype of the file.

as outlined in the Luke Smith video, I will be using <++> as a jumping marker to quickly move to key positions in the element template we will generate, this should be added to your vimrc like this:

    noremap <Space><Space> <Esc>/<++><Enter>"_c4l

now you should be able to type <++> anywhere in the html file and hit space twice in normal mode and jump to it, automatically getting put into insert mode.

#### 3.2 Simple Remap

Let's start with a simple remap:

    autocmd FileType html inoremap ;b <b></b> <++><Esc>4ba

breaking the command down, we can understand the following:

1. "autocmd FileType html" is used to denote the filetype of the file with that plugin we enabled

2. "inoremap ;b" is used to remap the key combination ";b" in insert mode to a command

3. "<b></b> <++><Esc>4ba" will insert that string into the document, escape to normal mode, then move 4 words back and insert you one character to the right, putting you where you need to be.

This format is literally the entire basis for what I do.

From this point, all there is to do is expand, if you want a complete list of the remap macros I've made, they are on my Gitea. Remember that some of these macros are for my specific CSS and will not work well otherwise unless they are modified.

#### 3.3 Table Creation and Generation with a Vim Macro

There are entire plugins dedicated to what I'm going to show in this macro-based solution for both generating and quickly populating a table of contents for HTML. This solution includes support for the creating and populating headers and subheaders. So let's have a look at this monster:

#### 3.4 Header and Subheader Generation

to generate the normal header that would be in the text of the html, you would add the following to your vimrc

    autocmd FileType html inoremap ;h <h id=">(<++>)" class="blog-header"><++></h<++>><Enter><Enter><++><Esc>2k$2Bhi

to generate the table of contents entry for the header, the macro is much like the bold macro showcased before

    autocmd FileType html inoremap ;lh <li><a href="#>()"></a></li><Enter>

this will all be done in insert mode, there will be no movement and the cursor will stay behind the entire entry. The only difference between this and the subheader is the () changes to {}. If you're wondering why the parenthesis and everything is needed, you'll see in a minute.

#### 3.5 Header and Subheader Table of Contents Filling

Okay, we have the headers that go in the actual document, we have the links that go in the actual table of contents section, time to take the content from the headers and automatically put them in the table of contents. Which can be done using the following macro for headers.

    autocmd FileType html noremap ;T />([0-9]<CR>a~<Esc>2l"by/)<Esc>/><CR>l"ty/<<CR>A%^%<Esc>/>()<CR>a~<Esc>l"bp/><CR>"tp/%^%<CR>d3l/>([0-9]<CR>h<Esc>

My disgusting creation! Typing this out with the HTML specified notations for "> and <" were really annoying!

To summarize this command instead of breaking everything down, what this does is it will look for the next header in the document, it will then copy the number and content from it, then it will place a unique set of characters at the end of the line and then look for the special empty header value (is it making sense why now?). It will then paste the header number and content into the document and go back to the character, that's the entire macro.

sadly, it doesn't seem like you can run something like "2;T" and replicate the macro twice, you will probably need to put it into a buffer then run "2@<macro_key> to get it to work. Or you could put it into a function and run that. Honestly, it's better to have to spam it out because it gives more fine control over catching mistakes and actually seeing where your content goes."

#### 4. Conclusion

Again, all of these macros are 100% correctly "working on my machine bro!" so if you want to get them and change them around, they are here for your viewing displeasure.

#### 4.1 Benefits of this Solution

You can go fast, I mean really fast with the creation of individual HTML syntax and barely break a sweat making these pages compared to manually typing out all of the syntax and having to verify that what you're typing is actually valid.

#### 4.2 Drawbacks of this Solution

The only drawback of this solution aside from directly going out of your way to not learn Hugo, is you will 100% forget how to write those tags that you subconsciously beat into your head over the months you've been writing the site for. You will become dependent on the tags and never be able to pass that high school HTML class because you were too busy optimizing your macro to end the universe.

#### 4.3 One Final Thing. Vim Spellcheck!

"Vim has spellcheck?" Yes. I didn't know this for the longest time and now I have it on all the time, who needs LibreOffice when you've got the funny text editor. To turn it on, assuming you speak English, you can put this in your vimrc:

    set spell spelllang=en_us

and just like that, you got it. Anything you typed while half-asleep will hopefully get caught by this.

you can navigate quickly to next word in front of the cursor by typing ]s and can navigate back to the previous wrong word by typing [s, these are done in normal mode.

It wouldn't be much of spellcheck without a list of corrected words, right? When hovered over the wrong word, you can type z= to open a list of potentially correct words and type the number of word you want to correct it to.

That's everything I've got for this blog post. I hope you learned something. Bye for now, either a new edition to the digital forensics course or a GPG blog post next!