Include code snippets in Pulse articles

In September 2014, I decided to finally try Pulse, the publication system of LinkedIn. I took the very first blog post I ever posted, and tried to post it in Pulse. It was very disapointing, as Pulse did not provide any way to include code snippets in the articles. Not even a mono-spaced font. Since my posts do usually include code, I decided that Pulse was no option for me.

But now, I understood I could use PhantomJS to generate one image of each code snippet, so I can include it in place of actual code text. As the original posts include the code text, the reader can always go to the original one to copy and paste code. The solution is not ideal, but surely good enough.

The way images are generated is using by the following code, using the Screen Capture feature of PhantoJS:

#!/usr/local/bin/phantomjs

var page = require('webpage').create();
var system = require('system');

// ***** Argument handling

function isInt(value) {
  return !isNaN(value) &&
         parseInt(Number(value)) == value &&
         !isNaN(parseInt(value, 10));
}

if ( system.args.length !== 4 ) {
  console.log('Usage: gist-to-png.js <gist-ID> <lines> <filename>');
  console.log('    <gist-ID>  - the ID of the Gist, from the URL, e.g. 2ab741a36788a38b459e');
  console.log('    <lines>    - number of lines in the Gist');
  console.log('    <filename> - output file');
  phantom.exit();
}

var id     = system.args[1];
var lines  = system.args[2];
var output = system.args[3];
var url    = 'https://gist.github.com/fgeorges/' + id;

if ( ! isInt(lines) ) {
  console.log('The number of lines is not an integer: ' + lines);
  phantom.exit();
}

// ***** Processing

// the portion of the page to take a screenshot of
page.clipRect = {
  top: 275,
  left: 10,
  width: 790,
  height: ( 18 * parseInt(lines, 10) ) + 2
};

page.open(url, function(status) {
  if (status !== 'success') {
    console.log('FAIL to load the URL: ' + url);
  }
  else {
    page.render(output);
    phantom.exit();
  }
});

The code has to have been posted as a Gist. The Gist ID is passed as an argument to the script. Then the number of lines of the snippet, so we can compute the total height on the screen. The last argument is the file to output the PNG image.

Posted by Florent Georges, on 2015-11-22T01:21:00, tags: linkedin and phantomjs.