Tuesday, February 23, 2016

How to Format Code in a Blog Post?

There are quite a few ways to easily format code in HTML, I'll walk you through the steps I took.

Step 1 - Find a good CSS library for code formatting

The best HTML syntax highlighter library I found was PrismJs. It's free, incredibly thorough the languages it supports, and it provides a professional look. You simply choose the language support you like and download the CSS and Javascript files.

Here is a before look:
let items = [1; 3; 4]
items |> List.map(fun x -> x + 1)
Here is the code after formatting with PrismJs:
let items = [1; 3; 4]
items |> List.map(fun x -> x + 1)

Step 2 - Move from Wordpress to Google Blogger

I originally had the blog on Wordpress using a free template but I decided to move it to Google Blogger. The reason for moving was Google Blogger provided free template editing. Wordpress has other advantages but for my purpose I simply needed to tweak the template to include the Prism CSS and Javascript files. Since I only had a few posts this was not a difficult move.

Step 3 - Host PrismJs CSS and Javascript files in DropBox
I used the instructions in this article to host the files in DropBox so they can be referenced publicly.

Step 4 - Update template HTML to include CSS and Javascript files

In Google Blogger I went to Template -> Edit HTML and added this piece in the header.
<link href='https://dl.dropboxusercontent.com/s/wvc7y6gckrru3ex/prism.css' rel='stylesheet'/>
<script src='https://dl.dropboxusercontent.com/s/sy0k7bc7ixl6xan/prism.js' type='text/javascript'/>
It was that easy! Now my blogging code looks much nicer.

6 comments:

  1. Their open communication, organized project management, and rapid scaling contributed to a productive partnership.
    best web design firms

    ReplyDelete
  2. They provide useful suggestions and high quality solutions.
    logo development

    ReplyDelete
  3. Exceptional service app agencies
    He became truly efficient and friendly.

    ReplyDelete
  4. They are timely and treated the entire procedure very professionally.
    top UI designers

    ReplyDelete
  5. They offer great attention to detail, making sure that they’re creating the best possible product
    branding agency

    ReplyDelete
  6. This text may be value everyone’s attention. How will I learn more?
    experience design firm

    ReplyDelete