Versión en español de esta publicación.
Posting code to the blog has always been tricky, that’s because one have to have in mind that there are a lot of special characters that can mess with the database and with the format of the post itself, here I present the approach I’m using to post code to the blog and keep that code separated from the post content,
Plugins
First of all we need a couple of plugins in order to post source code in wordpress the way I’m doing it, here are the two:
- the first one is called SyntaxHighlighter Evolved and can be downloaded from here, this plugin allows us to post source code with a great support for multiple programming languages
- The second one is called exec-PHP, this one allow us to execute php code inside our post, we are going to be taking advantage of php to read and post out external scripts, this plugin can be downloaded from here
Procedure
First of all, download and install the plugins mentioned above, I will not go into much detail into how to do this, there is plenty of information of how to do it in the web please refer to that.
Once installed you need to have ftp access to your server file system or have a way to upload the new script files to your server, you can also use the media uploader but you will need to expand your supported MIME types, I like to have a custom directory in the file system and put all my posted scripts in there, I’ll go with that approach.
As we are going to use PHP to insert our code into the post I created a PHP function that basically does that, the function supports posting the contents of a file and also it can post only certain lines of code if specified, the simple function is listed below.
blog_utils.php
<?php
function add_script($script_file_path, $language = 'bash', $start_line = -1, $end_line = -1,
$att_collapse = 'false') {
$data = file($script_file_path);
// if no start line specidied, include all file, calculate endline number
// by counting the data
if ($start_line == -1) {
$start_line = 0;
$end_line = $line = count($data);
}
// depending on the language of the file to be included is the type of header tag to include,
// we now support to include syntax hignlight evolved scripts, quick latex scripts,
// and pgn chess games all in external files
switch ($language) {
case 'inc': // content to include in post 'as is'
break;
default:
echo htmlentities('[' . $language . ' collapse=' . $att_collapse . ']');
break;
}
// here we just include the file content line by line, and depending on the language
// we use htmlentities, pgn games does not need this
for ($i = $start_line-1; $i <= $end_line-1; $i++) {
switch ($language) {
case 'inc': // content to include in post 'as is'
case 'pgn': // pgn games don't need escaping
echo $data[$i];
break;
default:
echo htmlentities($data[$i]);
break;
}
}
// depending on the language is the type of footer tag to include
switch ($language) {
case 'inc': // content to include in post 'as is'
case 'latexpage': // pgn games don't need escaping
break;
default:
echo htmlentities('[/' . $language . ']');
break;
}
}
?>
As we can see what this function does is echoing the specified file contents, also, it is specifying the language that we want to use in a [] syntax, this syntax is used by the SyntaxHighlighter Evolved plugin to make its magic and have the code highlighted.
So to use the complete approach we need to create a file named blog_utils.php with the function I listed above and upload it to a custom folder in the file system, I like to call it scripts, we also have to upload to the same folder the file script that we want to post and finally just add some PHP code to your post to have the file script posted to your wordpress blog, here is the code that I used to include the external file code to post the code you saw above.
blog_utils_post.php
<?php include_once(ABSPATH . '/scripts/blog_utils.php'); add_script(ABSPATH . 'wp-content/uploads/2017/03/template-wiki_php.txt', 'php'); ?>
Very pretty right? :),
Downsides of this Approach
It was all too beautiful until.. I noticed that there was a downside to this approach, the graphical editor of wordpress is messing with the PHP code that is included in the post, I tried several approaches to be able to still use the graphical editor with no luck, posting code in a clean way is so important to me that I ended up disabling the graphical editor and the xhtml checks from wordpress so now I only use the text version editor to make my posts and I’m a very happy man :).
Enjoy! 🙂
-Yohan