Showing HTML, JavaScript, And PHP Syntax On Your Blog

By .     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 (&lt; and &#60;). Now your code looks like this: &lt;p>Lorem ipsum&lt;/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 (&gt; and &#62;). 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: &lt;?php /* Template Name: Tag Cloud */ ?>   &lt;?php     get_header();     get_sidebar();   ?>   &lt;div id="content">     &lt;h1>Tag Cloud&lt;/h1>     &lt;?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     )); ?>   &lt;/div>   &lt;div class="clear">&lt;/div> &lt;/div> &lt;?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 to follow the code for readers. <p>Lorem ipsum</p>

Posted in: Web Development



is the site owner of Computer Tech Tips and is passionate about computer technology, particularly Windows-based software, malware removal, and web development. He enjoys helping people troubleshoot computer problems and providing technical support to family, friends, and people around the net. Xps wrote 79 article(s) for Computer Tech Tips.


 Subscribe to comments: this article | all articles
Comments are automatically closed to prevent SPAM.