Aug 15, 2015

displaying formatted program code within your blog

How to embed formatted code within your blogger blog.
Up until now, I've been copying the code, pasting to the hilite.me site, copying and pasting the html-formatted code back to block in the HTML directly. Messy, but it works nicely.

An alternative with somewhat fewer steps requires modifying your Blogger template. Still have to edit in HTML to add tag attributes.

Add js to format code as a style using google's Auto-Loader script. You can load the JavaScript and CSS for prettify via one URL.
stackoverflow.com/....prettify-with-blogger-blogspot (scroll down a ways to find)
Add the script to the <head> section of your Blogger template and it will work on all your posts:
 
https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"
More detail here: .../google-code-prettify/wiki/GettingStarted

But, long lines bleed out of margins. To add scrollbars, (from stack exchange) add this CSS to get scrollbars on prettify. [circa 2015]

See more on where to put it at: add custom CSS

To set language to C++, add a language attribute to the PRE tag 

    <pre lang-cpp>


// sample code snippet .....................
int readEncoderABS() {
  static int enc_val_gray;  // value in gray code format as read from encoder 
  static int enc_val;
  static int enc_val_prev;
  static long int rotations = 0;
  static bool led_state;
  static bool first_time_flag = 1;
  int enc_delta;
  bool b;
  static long int total_ticks = 0;
  enc_val_prev = enc_val;  // previous value must be remembered for each call
  enc_val_gray = 0;

---
End.
Labels: , ,