djsipe.com | Web Development

Code Face is a WordPress plugin that allows you to format code examples within your posts using language-specific styling. With it you can incorporate example code, specially formatted for the following languages: C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, and XML/HTML.

Code Face uses YUI and the syntaxhighlighter project to highlight the syntax of code examples within your posts.  Once enabled, all you have to do is wrap your code examples in a <pre> block and give it a language-specific class name. When your readers view the post, the HTML of the page is “scanned” for these <pre> tags using JavaScript. If any are found, only the appropriate syntax highlighting resources are loaded. This allows you to pick from a wide range of language syntax highlighting options without the overhead of having to include the formatting resources for all the languages you’re not using.

So, jumping right in, here is an example of how you would use Code Face to format a code example as PHP. While editing a post, click the “Code” tab in WordPress’s rich text editor. While in code view, type the following:

<pre class="php-codeface">
    // PHP code:
    require_once "myFile.php";
    echo "hello world";
</pre>

When your readers visit your site what they will see is:

    // PHP code:
    require_once "myFile.php";
    echo "hello world";

Languages and Class Names

Code Face supports many different programming language types. To specify which language syntax you would like to use, you need only use the corresponding CSS class name, like in the example above, in the <pre> tag wrapping your code. Below is a table of supported languages their CSS class names.

Installation

Code Face will only work on WordPress installations that let you edit the code of your posts and set class names for tags in your posts’ code. Other than that little bit, installation should be pretty painless. After you’ve downloaded the plugin, copy the “codeface” directory into your plugins directory—typically /wp-content/plugins.

Next, double check that your theme uses the standard wp_footer() hook. It should be in your footer somewhere, typically in the footer.php file. If you don’t see it anywhere, copy and paste the following code into your footer just above the closing </body> tag:

<?php wp_footer(); ?>

Finally, log into your WordPress administration site and activate Code Face in the Plugins section.