Displaying code blocks in a WordPress tech blog

1 Views

I am trying to display some HTML code in my blog post. Is there any way to show that HTML code as an element of that post?

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. You should go through the documentation about
    Writing Code in Your Posts    .

    Whether you write plugins or hacks for WordPress, or you want to add bits and pieces of code about your own WordPress site or other programming code like HTML, CSS, PHP or JavaScript, putting code in your post that actually looks like code, but doesn’t behave like code, is a frequent challenge for bloggers.

    It’s a nice article on how to display code in post/page of WordPress.

  2. Super easy, and that WordPress Codex page Ram Sharma shared has great material to follow.

    Put all your code within the <code></code> element and simply make sure to escape every opening less than symbol “<” and greater than symbol “>” though you might find yourself escaping other things:

    Example:

    <code>
    <?php echo $var; ?>
    </code>

    But in place of the greater than & less than symbol I replaced them with the appropriate HTML character entities “& g t ;” & “& l t ;” no spaces.

    Check out an example of writing code in your posts over at my Web Development & Design Blog, no plugin! Pure code!

  3. Building off of Giancarlo Colfer’s answer, you can use the <code></code> tags along with the <pre></pre> tags.

    Example:

    <code>
<pre>
<!-- code goes here -->
</pre>
</code>

    Your code will be output exactly as entered.

  4. Great answers so far, I just wanted to add a tip.

    If you are blogging about code you have already written; use a text editor (I use Notepad++) with a built in find and replace (Ctrl+H) function.

    Find: “<“
    Replace: “& l t ;”

    then

    Find: “>”
    Replace: “& g t ;”

    As before, remove the spaces from the replace string.

    Finally – remember to undo the find and replace and/or don’t click save.