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.  http://alexgorbatchev.com/SyntaxHighlighter/

Paste Bins

List of paste bins:
http://en.wikipedia.org/wiki/Comparison_of_pastebins
http://www.1stwebdesigner.com/freebies/paste-share-code-snippets/comment-page-1/#comment-87188

Opinion

  • 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 http://quickhighlighter.com/index.php?lng=php
    • 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
http://www.webresourcesdepot.com/11-syntax-highlighters-to-beautify-code-presentation/

Opinion

Displaying code on wordpress posts (advice from wordpress codex)

http://codex.wordpress.org/Writing_Code_in_Your_Posts

Lists of WordPress syntax highlighter plugins
http://speckyboy.com/2009/02/19/12-wordpress-plugins-to-display-and-highlight-code-within-your-blog/

What We Use

We use the syntax highlighter wordpress plugin http://wordpress.org/extend/plugins/syntaxhighlighter/ .

Example of its output:

<div id="wrapper">
    <div id=”header”>
    </div>
            <div id="main">
                <div id="content">
                    <p>Content</p>
                </div>
                <div id="right">
                    <p>Right Side Bar</p>
                </div>
            </div>
    <div id=”footer”>
    </div>
</div>
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>