Showing HTML, JavaScript, And PHP Syntax On Your Blog

By Xps.     What do you think of this article?

So, you want to show web codes on your WordPress blog (or any website) but the web browser always executes it with the rest of your HTML? The trick for showing code on your website is actually pretty simple. Say you want to show the following code:
<p>Lorem ipsum</p>

You can’t type the code as it looks because the web browser will render it as a paragraph tag. Instead, you need to change all less-than signs to HTML Character Codes. The less-than sign has two codes to choose from (< and <). Now your code looks like this:
<p>Lorem ipsum</p>

The web browser won’t render it as a paragraph because the paragraph tag wasn’t actually opened. Make sure you change the less-than sign on both the opening and closing tags of the element.

Contrary to what similar articles say, you don’t need to change the greater-than signs to their respective HTML Character Codes (> and >). If the opening/closing tag was never started, the web browser can’t render the element, so it will just display the greater-than sign like regular text.

I’ll give another example with a PHP page. In order to display this…:

<?php
/**
  * Template Name: Tag Cloud
  */
?>
  <?php
    get_header();
    get_sidebar();
  ?>
  <div id="content">
    <h1>Tag Cloud</h1>
    <?php wp_tag_cloud(array(
      'smallest' => 8,
      'largest' => 22,
      'unit' => 'pt',
      'number' => 500,
      'format' => 'flat',
      'separator' => "\n | \n",
      'orderby' => 'name',
      'order' => 'ASC',
      'exclude' => '',
      'include' => '',
      'link' => 'view',
      'taxonomy' => 'post_tag',
      'echo' => true
    )); ?>
  </div>
  <div class="clear"></div>
</div>
<?php get_footer(); ?>

…you need to code this:

<?php
/**
  * Template Name: Tag Cloud
  */
?>
  <?php
    get_header();
    get_sidebar();
  ?>
  <div id="content">
    <h1>Tag Cloud</h1>
    <?php wp_tag_cloud(array(
      'smallest' => 8,
      'largest' => 22,
      'unit' => 'pt',
      'number' => 500,
      'format' => 'flat',
      'separator' => "\n | \n",
      'orderby' => 'name',
      'order' => 'ASC',
      'exclude' => '',
      'include' => '',
      'link' => 'view',
      'taxonomy' => 'post_tag',
      'echo' => true
    )); ?>
  </div>
  <div class="clear"></div>
</div>
<?php get_footer(); ?>

My thanks to the creator of the Find & Replace tool in text editors. It makes the task very quick.

Now that you’ve got the code you want to display, put it inside a code element (<code>) and give it some style to stand out on your page. If you really want to get fancy, you can mimic “syntax highlighting” found on awesome text editors like Notepad++. This will make it easier for readers to follow the code. JavaScript libraries like PrismJS can do it for you automatically.

Posted in: Web Development