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:
- Input: indented text.
- Output: collapsible list.
- Option to open some folders by default.
- 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