2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

How to convert Markdown into inline-styled HTML

Last updated at Posted at 2016-10-03

I needed to get some Markdown into inline-styled HTML for my work's blog today, was surprised I couldn't find any straightforward guides. Well folks, here we are:

  1. generate your CSS with Pygmentize
  2. pandoc your markdown with that css
  3. use premailer or something to inline css styles
  4. remove class attributes if your CMS removes all attributes when there are class attributes
  5. put it in your pasteboard
pygmentize -S default -f html > default.css
pandoc input.md > intermediate.html -c default.css
python -m premailer -f intermediate.html -o output.html
sed -i -E 's/class="[^"]*"//g' output.html
cat output.html | pbcopy

…and that’s how you get from normal Markdown to inlined-styled HTML for your CMS or whatever the hell.

Thanks to my coworker and @rightfold for the tip.

As a bash script gist here:

#!/bin/bash
if [ "$#" -ne 1 ]
then
  echo "Supply an input markdown file for this script to work."
  exit 1
fi
input="$1"
output="$1-output.html"
rm $output*
pygmentize -S default -f html > default.css
pandoc $1 > intermediate.html -c default.css
python -m premailer -f intermediate.html -o $output
sed -i -E 's/class="[^"]*" //g' $output
rm intermediate.html
cat $output | pbcopy
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?