How to include code from GitHub in a WordPress post

In my article about How to setup a Multi Page Application in AngularJS, I wanted to include code from GitHub. Having installed Nzymes on my blog, that wasn’t too difficult.

I thought about using an injection like this:

´{[ =<URL of the file>= | 1.get-url(1) | =javascript= | 1.hl(2) ]}´

so that I could easily reuse it just by changing the URL.

Here are the contents of the execution enzymes.

get-url

list($url) = $arguments;
$pieces = preg_split('@/@', $url, -1, PREG_SPLIT_NO_EMPTY);
$protocol = array_shift($pieces);
$file = implode('/', $pieces);

$upload_dir = wp_upload_dir();
$filename = "{$upload_dir['basedir']}/$file";
if (! file_exists($filename)) {
  $dirname = dirname($filename);
  if (! file_exists($dirname)) {
    wp_mkdir_p($dirname);
  }
  $data = file_get_contents($url);
  file_put_contents($filename, $data);
}
$data = file_get_contents($filename);
return $data;

The idea is to download the remote file once and store it on the server, in a directory structure like the url (except the protocol). Thus, at any later time, the local copy is returned.

hl

list( $code, $language, $numbers ) = array_pad( $arguments, 3, null );

$pre_class = '';
$numbers   = trim( $numbers );
if ( $numbers ) {
    $pre_class = ' class="' . $numbers . '"';
}

$code     = str_replace( '{' . '[', '{' . '-[', $code );  // escape Enzymes 3 injections just in case
$code     = htmlspecialchars( $code );

$code_class = '';
$language   = trim( $language );
if ( $language ) {
    $code_class = ' class="' . $language . ($language == 'ruby' ? ' hljs' : '') . '"';
    $template = '<pre%s><code%s>%s</code></pre>';
    $args = array($template, $pre_class, $code_class, $code);
} else {
    $template = '<pre%s>%s</pre>';
    $args = array($template, $pre_class, $code);
}

$result   = call_user_func_array( 'sprintf', $args );
return $result;

The idea is to wrap the escaped code into a PRE CODE element, prepared for Chili to later highlight it in the browser. Fun fact: above hl highlights itself:

´{[ 1.hl | =php= | 1.hl(2) ]}´.

How to convert indented text to a collapsible list

In my article about How to setup a Multi Page Application in AngularJS, I wanted to show a directory structure. I thought I would wrap it into a PRE element, to easily glance at the containment hierarchy. I started by jotting down only folders and files that I needed to talk about, hoping to simplify my readers task to go through them. But soon I realized that that structure was exactly what I was trying to describe in the first place and it didn’t make much sense to intentionally leave out other meaningful folders and files, just because it would be a pain to read. So I understood I had to find a way to make folders toggle on click. That would allow me to show only a portion by default, and allow the reader to freely move around in the hierarchy.

I looked in the Internet for a ready made solution with these features:

  1. Input: indented text.
  2. Output: collapsible list.
  3. Option to open some folders by default.
  4. Easily injectable into a WordPress post.

I couldn’t find anything that suited my needs, so I embarked into building something myself.

First I found an ingenuous article about making a Pure CSS collapsible tree menu. But if a way to expand collapse unordered lists is just a couple of lines in jQuery, and I still needed some code for converting the indented text to an HTML list, better to stay in the JS realm for all the solution and not mess with CSS. However, I really enjoyed how that guy took advantage of checkboxes to keep track of the collapsing state of folders.

After a couple of days, I shared my Indentation to Toggling List project on GitHub.

https://github.com/aercolino/indentation-to-toggling-list#indentation-to-toggling-list