How To Display Code On A Web Page

Well you can use a WYSIWYG editor or paste it into a code editors design mode e.g. Dreamweaver. This should remove all the characters that may be interpreted as HTML.

Or you can use what is called a ‘paste bin’ that will allow you to paste in your code and it will display the code with lines numbered and code hinting applied.

You could also use a ‘syntax highlighter’ e.g.

Paste Bins

List of paste bins:


  • Tiny paste, pastebin = no good
    • All have big links or frames on them that are distracting and unprofessional
    • They use javascript to pull in and embed the code. As you may already know Search Engines cannot read Javascript! Basically all the code you embed will not be read.
  • Quick Highlighter
    • The best paste bin by far
    • No javascript pull ins
    • No frames or big advertising links
    • Easy to use – just copy paste the source code into your site
    • Highly, Highly recommended

Syntax Highlighters

List of Syntax Highlighters


Displaying code on wordpress posts (advice from wordpress codex)

Lists of WordPress syntax highlighter plugins

What We Use

We use the syntax highlighter wordpress plugin .

Example of its output:

<div id="wrapper">
    <div id=”header”>
            <div id="main">
                <div id="content">
                <div id="right">
                    <p>Right Side Bar</p>
    <div id=”footer”>
This entry was posted in HTML and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>