HTML5 tag to display syntax highlighting

Question

I was wondering if there was a tag that auto-highlights the syntax of HTML and or PHP in HTML5. I'm writing a guide that has some code in it. Since I'm using a lot of the new html5 tags (I use section for the outline of my guide) I would like to use something in native html5.

If this does not exist, what is the best way to do this? (Like, PHP and CSS?)

Answer 1

HTML5, like every other version of HTML, is for defining content and structure. You denote code blocks using <pre>, <code>, etc, but you don't use HTML to tell the browser what something should look like, so there isn't such an element to tell the browser to syntax highlight a code block.

Syntax highlighting, thus, would fall under the domain of style, decoration, etc, which is handled by CSS. As suggested by NullUserException (some great links there!), you can use a JavaScript syntax highlighter so it highlights code for you on the client side (like the one here on Stack Overflow), or do it on the server side and output styled HTML code blocks from the server-side language.

Answer 2

There's nothing like that in HTML5 I am afraid, but you can always use highlight_string() from PHP. If you want something purely on the client side, try a JS highlighter like prettify, which is what StackOverflow uses for their code highlighting:

http://code.google.com/p/google-code-prettify/

Here are some other ones:

• SyntaxHighlighter
• SHJS (uses GNU Source-highlight definitions)

Answer 3

I found a nice comparison of some code highlighters here: http://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/