highlight code (xml, javascript, java, php, c#....) in html

Screen Shot 2013-08-19 at 2.39.59 AM

How can one highlight (use a code color scheme) for source code or xml or html and do the following and do it in any html page?
Like this:
Screen Shot 2013-08-19 at 2.38.24 AM

One can use a javascript library. Instead of explaining how it works, here's the trick:

  <pre name="code" class="xml:nogutter:nocontrols">
    <?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
                      <news:name>Kenosha News</news:name>
                <news:title>On target: Archer sets county fair record</news:title>
  <link type="text/css" rel="stylesheet" href="http://syntaxhighlighter.googlecode.com/svn-history/tags/1.5.1/Styles/SyntaxHighlighter.css" />
  <script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/tags/1.5.1/Scripts/shCore.js"></script>
  <script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/tags/1.5.1/Scripts/shBrushXml.js"></script>
  <script language="javascript">

The important part is:


xml = the language
nogutter, nocontrols = options
http://syntaxhighlighter.googlecode.com/svn-history/tags/1.5.1/ = I don't want to include these in my project, so I use them remotely, you can download them locally, but download all.
Add the js libraries for the languages you use. For xml I added shBrushXml (see the code).

Supported languages: https://code.google.com/p/syntaxhighlighter/wiki/Languages
Configuration options: https://code.google.com/p/syntaxhighlighter/wiki/Configuration

Leave a Reply

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

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed.