Syntax Highlighted Code for Websites

Found this amazing post about  Adding Syntax Highlighting to Code Snippets in a Blog or Website from Tania Rascia’s site while I was looking around.  I need to add this to the page here!

Before I searched, I knew Notepad ++ can Escape HTML and PHP markup.  I thought about creating a styled DIV and running the code through Notepad to prep it.  I was curious if any Web Design IDE had a better feature.

For Unity projects I hope to share soon I have been using GitHub.  I don’t think embedding will be too difficult.

Rather, Tania discusses 2 really cool solutions:

  • Host on GitHub or CodePen and embed: this concerns me a bit, because all I see on everybody’s site is more information about embedding GISTs.  I have full GitHub C# projects I’d like to display on the blog.
  • Import a JavaScript Library into your site like Prism, Highlight, or Google PrettifyPrism looks amazing.  It supports a crazy amount of languages, and it doesn’t require anything but a <pre> tag for CSS styling, and a <code class=”NameOfLanguage”> tag nested inside of it for the rest.  I haven’t even looked at the others, yet.  Google Prettify does not need the language class.  It claims to work with all *-type languages.  It has themes that I’m sure you can alter, just like Prism’s CSS.  The big difference I see is Line Count, which was not offered by Highlight.js.  Prism can do this too, with the aid of a plugin.  I like the fact that Google Prettify contains all the options in one package, but I suppose it keeps the code lightweight and clutter-free, which is important when it’s being strapped onto your existing project.  This is especially true, because Prism offers a lot of plugins.

Let’s try it out!

var name = "World";
alert("Hello" + name);

Edit: After installing this here, I found out that Tania’s website is a great review, and an awesome tutorial for setting it up on a static webpage. However, it doesn’t fully cover WordPress. I found another resource where Jake at Crambler.com explains the rest.

I did not use any WordPress Plugins for my setup. I implemented this into a Child Theme created from WordPress twentyseventeen. I took the code from Jake, to include the prism.css and prism.js files with functions.php, and I took Tania’s code to escape HTML. It’s working great! Here is my functions.php file:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentyseventeen-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );







// Function to add prism.css and prism.js to the site
function add_prism() {
// Register prism.css file
wp_register_style(
'prismCSS', // handle name for the style so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script(
'prismJS', // handle name for the script so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');








// Escape HTML in <code> or <pre><code> tags.
function escapeHTML($arr) {
    if (version_compare(PHP_VERSION, '5.2.3') >= 0) {
        $output = htmlspecialchars($arr[2], ENT_NOQUOTES, get_bloginfo('charset'), false);
    }
    else {
        $specialChars = array(
            '&' => '&',
            '<' => '<',
            '>' => '>'
        );
        // decode already converted data
        $data = htmlspecialchars_decode($arr[2]);
        // escapse all data inside <pre>
        $output = strtr($data, $specialChars);
    }
    if (! empty($output)) {
        return  $arr[1] . $output . $arr[3];
    }   else    {
        return  $arr[1] . $arr[2] . $arr[3];
    }
}
function filterCode($data) { // Uncomment if you want to escape anything within a <pre> tag
    //$modifiedData = preg_replace_callback('@(<pre.*>)(.*)(<\/pre>)@isU', 'escapeHTML', $data);
    $modifiedData = preg_replace_callback('@(<code.*>)(.*)(<\/code>)@isU', 'escapeHTML', $data);
    $modifiedData = preg_replace_callback('@(<tt.*>)(.*)(<\/tt>)@isU', 'escapeHTML', $modifiedData);
    return $modifiedData;
}
add_filter( 'content_save_pre', 'filterCode', 9 );
add_filter( 'excerpt_save_pre', 'filterCode', 9 );
?>

Leave a Reply

Your email address will not be published. Required fields are marked *