Syntax Highlight

Source code can have syntax highlight using the highlight.js library by putting it within pre and code tags:

// Sort command line arguments (please fix any bugs).

#include <stdio.h>
#include <stdlib.h>
#include <strings.h>

int main(int argc, char **argv)
        int i;
        qsort(&argv[1], argc - 1, sizeof(char), strcasecmp);
        for (i = 1; i < argc; ++i) {
                printf("%s\n", argv[i]);
        return 0;

The source code language is autodetected unless explicit defined by a class attribute value in the code tag. Color scheme (theme) is selected by the render template by including the prefered CSS-file.

Code fragments

To highlight short code fragments, simply place the code within:

<pre><code class="c">printf("hello world!")</code></pre>

Include this HTML markup on the page yields:

printf("hello world!")

Source code files

For larger chunks of code its better to read the file content inside the tags:

<pre><code class="java"><?php readfile("") ?></code></pre>

Mixup with HTML

Source code that contains HTML special characters needs to be converted or they will disappear from the output. Remember to change the PHP escape sequence to output a string instead of executing a code block:

<pre><code class="c"><?= htmlentities(file_get_contents(("file.c") ?></code></pre>


The CodeBox component provides metods for displaying files or code fragments. For simple cases, its easiest to use the convenience functions. The syntax highlight area containing the code will be wrapped inside a code box:

<?php UUP\Web\Component\Script\CodeBox::outputFile('file.c', true) ?>
<?php UUP\Web\Component\Script\CodeBox::outputText('c', 'printf("hello world!")') ?>

Missing languages?

Please goto Getting highlight.js to select additional languages. Download new bundle and replace the highlight.js library in the assets directory.