HomeTechnologyWrapping Text in HTML Tags with Vim Macros, Vim-Surround and Pandoc

Wrapping Text in HTML Tags with Vim Macros, Vim-Surround and Pandoc

blog/cards/wrapping-text-in-html-tags-with-vim-macros-vim-surround-and-pandoc.jpg

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 visible 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.

Like you, I’m super protecting of my inbox, so don’t worry about getting spammed. You can expect a few emails per month (at most), and you can 1-click unsubscribe at any time. See what else you’ll get too.


© 2021 Nick Janetakis

.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular