2015-01-18

Level Up - Blogger: How to add formatted code to post (with highlighting)

In many of my posts, I like to add code snippets. Blogger doesn't have good native support for displaying code with syntax and line highlighting, so I found a way to add that feature using GitHub Gists and gist-embed project on GitHub.

The following steps can mostly be used with any blog.

Step 1: Include jQuery and gist-embed within your header tags.

<head>
  ...
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gist-embed/2.0/gist-embed.min.js"></script>
</head>


Step 2: Add a code element to where you want your Gist code to appear.

<code data-gist-id=""></code>


Example:



Source:
<code data-gist-file="PrimeNumbers.cpp" data-gist-hide-footer="true"
   data-gist-highlight-line="9,12,35-42" data-gist-id="5789439"></code>


Nice features also included, but not shown above:

  • Ability to show GitHub footer
  • Remove line numbers
  • Load multiple files from a Gist
  • Load a signal file from a Gist
  • Show only certain lines from a file


This article was mainly written for myself in the future, but I hope others can benefit from it, as well.

Links:



~ Danial Goodwin ~


Labels: , , , , , , , , , , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)