Wrapping Text in HTML Tags with Vim Macros, Vim-Surround and Pandoc
In this video we'll wrap Markdown paragraphs in HTML P tags in a number of different ways. All of which could be useful in specific cases.
Quick Jump: Demo Video
I recently found myself wanting to wrap a bunch of Markdown paragraphs in
<p>...</p> tags to create HTML slides out of a bunch of written text.
This lead me into doing it manually for a bit, automating the process with Vim macros, figuring out a faster way to do it with vim-surround and then ultimately just converting Markdown to HTML on the command line with Pandoc.
It was a fun adventure and now I feel more comfortable using Vim macros.
Here’s a reference of everything run in the video.
Enter these key sequences while being inside of Vim’s normal mode:
# Record both macros: qo I <p> q qc A </p> q # Use both macros: @o @c
Optionally persist the macros in your
let @o = 'I<p>' let @c = 'A<p>'
# After visually selecting your text, press: St # Input a pargraph tag and close it: p>
At this point your selected text will be surrounded with
<p>...</p>. You can use this to wrap your text with other HTML tags too, such as
# Install pandoc on Debian based distros: sudo apt-get install pandoc # If you're on macOS: brew install pandoc # Convert Markdown to HTML: pandoc path/to/file/foo.md # Same as above except don't use fancy apostrophes, quotes and other characters: pandoc path/to/file/foo.md --from markdown-smart
- 0:40 – How did I arrive at these specifics solutions?
- 2:31 – Manually surrounding text using Vim key sequences
- 3:16 – Using Vim macros to automate the process a bit
- 6:10 – Using vim-surround to wrap a visual selection in a specific HTML tag
- 7:42 – Using Pandoc to convert Markdown paragraphs into HTML P tags
- 9:08 – Replacing fancy quotes with straight quotes when using Pandoc
- 10:03 – Optimizing your work flow to copy the output into Vim
- 10:43 – Signing up to the web app deployment course when it’s available
What do you use Vim macros or vim-surround for? Let us know below.