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"
              xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
          <url>
              <loc>http://www.kenoshanews.com/news/on_target_archer_sets_county_fair_record_472937185.html</loc>
                <news:news>
                  <news:publication>
                      <news:name>Kenosha News</news:name>
                      <news:language>en</news:language>
                  </news:publication>
                  <news:access>Subscription</news:access>
                <news:publication_date>2013-08-18</news:publication_date>
                <news:title>On target: Archer sets county fair record</news:title>
                </news:news>
          </url>
      </urlset>
  </pre>
  <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">
    dp.SyntaxHighlighter.HighlightAll('code');
  </script>

The important part is:

class="xml:nogutter:nocontrols"

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.