Learn Docker With My Newest Course

Dive into Docker takes you from "What is Docker?" to confidently applying Docker to your own projects. It's packed with best practices and examples. Start Learning Docker →

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

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:

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

What do you use Vim macros or vim-surround for? Let us know below.

Never Miss a Tip, Trick or Tutorial

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



Comments