7 Comments

Syntax Highlighting in Blog Posts with Vim

Update: Reader Elder Marco has pointed out that WordPress.com does have support for syntax highlighting of source code built-in (which I had never heard of before) that might be a preferred alternative for some. An example of both is below.

Vim is a great all-around editor, it also does very good at syntax highlighting. With the plugin “TOhtml” included with Vim it’s easy to put that highlighting into a blog post. I created a blogscrpt bash script that when run on another script will produce a file defining the syntax highlighting in HTML code. From there it can be pasted into the blog post.

blogscrpt syntax highlighting:

#!/bin/bash
# Create HTML code from Vim syntax highlighting (for use in coloring scripts)

filename=$@
background=light
colorscheme=beauty256
scrpt=${0##*/}  # filename of script

# Display usage if no parameters given
if [[ -z "$@" ]]; then
  echo " $scrpt <filename> - create HTML code from Vim syntax highlighting"
  exit
fi

# Syntax highlighting to HTML export
vim -f  +"syntax on"                  \
        +"set background=$background" \
        +"colorscheme $colorscheme"   \
        +"let html_use_css = 0"       \
        +"let html_no_pre = 1"        \
        +"let html_number_lines = 0"  \
        +"TOhtml"                     \
        +"x"                          \
        +"q" $filename

# Clean up HTML code
tidy -utf8 -f /dev/null --wrap -m $filename.html

# Delete the HTML meta page information.
sed -i '1,/body bgcolor=/d' $filename.html

# Remove line breaks (needed for some things like blog posts)
sed -i 's|<br>||g' $filename.html

# Remove the closing HTML tags
sed -i 's~</body[^>]*>~~g' $filename.html
sed -i 's~</html[^>]*>~~g' $filename.html

# Add preformatting tabs <pre> and </pre>
#sed -i '1 i <pre>' $filename.html
#sed -i '$ a </pre>' $filename.html

# Remove trailing blank lines
while [ "$(tail -n 1 $filename.html)" == "\n" ]; do
  sed -i '$d' $filename.html
done

# Delete newline of last <font> line for better formatting
sed -i ':a;N;$!ba;s/\(.*\)\n/\1/' $filename.html
sed -i ':a;N;$!ba;s/\(.*\)\n/\1/' $filename.html

# Delete final newline
perl -i -e 'local $/; $_ = <>; s/\n$//; print' $filename.html

WordPress built-in syntax highlight support example:

#!/bin/bash
# Create HTML code from Vim syntax highlighting (for use in coloring scripts)

filename=$@
background=light
colorscheme=beauty256
scrpt=${0##*/}  # filename of script

# Display usage if no parameters given
if [[ -z "$@" ]]; then
  echo " $scrpt <filename> - create HTML code from Vim syntax highlighting"
  exit
fi

# Syntax highlighting to HTML export
vim -f  +"syntax on"                  \
        +"set background=$background" \
        +"colorscheme $colorscheme"   \
        +"let html_use_css = 0"       \
        +"let html_no_pre = 1"        \
        +"let html_number_lines = 0"  \
        +"TOhtml"                     \
        +"x"                          \
        +"q" $filename

# Clean up HTML code
tidy -utf8 -f /dev/null --wrap -m $filename.html

# Delete the HTML meta page information.
sed -i '1,/body bgcolor=/d' $filename.html

# Remove line breaks (needed for some things like blog posts)
sed -i 's|<br>||g' $filename.html

# Remove the closing HTML tags
sed -i 's~</body[^>]*>~~g' $filename.html
sed -i 's~</html[^>]*>~~g' $filename.html

# Add preformatting tabs <pre> and </pre>
#sed -i '1 i <pre>' $filename.html
#sed -i '$ a </pre>' $filename.html

# Remove trailing blank lines
while [ "$(tail -n 1 $filename.html)" == "\n" ]; do
  sed -i '$d' $filename.html
done

# Delete newline of last <font> line for better formatting
sed -i ':a;N;$!ba;s/\(.*\)\n/\1/' $filename.html
sed -i ':a;N;$!ba;s/\(.*\)\n/\1/' $filename.html

# Delete final newline
perl -i -e 'local $/; $_ = <>; s/\n$//; print' $filename.html
About these ads

About Todd Partridge (Gently)

Good times, good people, good fun.

7 comments on “Syntax Highlighting in Blog Posts with Vim

  1. Really nice script, thank you for sharing! :)

  2. Hi, really nice! However, wordpress.com supports syntax highlighting: http://en.support.wordpress.com/code/

    :)

  3. Awesome! Thanks for this

  4. Thanks for the comments guys. Never heard before of WordPress built-in support for source code highlighting so thanks Elder, added to post.

  5. I’d like to add :set fileencoding=utf-8, so (it becomes):

    vim -f  +"syntax on"                  \   
            +"set fileencoding=utf-8"     \   
            +"set background=$background" \
            +"colorscheme $colorscheme"   \   
            +"let html_use_css = 0"       \   
            +"let html_no_pre = 1"        \   
            +"let html_number_lines = 0"  \
            +"TOhtml"                     \   
            +"x"                          \   
            +"q" $filename
  6. I’d like to add :set fileencoding=utf-8, so (it becomes):

    vim -f  +"syntax on"                  \   
            +"set fileencoding=utf-8"     \   
            +"set background=$background" \
            +"colorscheme $colorscheme"   \   
            +"let html_use_css = 0"       \   
            +"let html_no_pre = 1"        \   
            +"let html_number_lines = 0"  \
            +"TOhtml"                     \   
            +"x"                          \   
            +"q" $filename

    Not sure it it makes a difference here. If I remember right wordpress servers are on Windows but I don’t think it matters as encoding is properly done with cut and paste from the X org server to say Firefox. Also wouldn’t Vim encode in Linux to UTF anyways?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 52 other followers

%d bloggers like this: