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.
Demo Video
Commands
Here’s a reference of everything run in the video.
Vim Macros
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 ~/.vimrc file:
let @o = 'I<p>'
let @c = 'A<p>'
Using vim-surround
# 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 <h2>, etc..
Pandoc
# 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
Timestamps
- 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
Reference Links
- https://github.com/tpope/vim-surround
- https://revealjs.com/
- https://pandoc.org/
- https://nickjanetakis.com/courses/deploy-to-production
What do you use Vim macros or vim-surround for? Let us know below.