<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">
  <xi:include href="prefs.html" />
  <head>
    <title>Syntax Highlighting</title>
    <style type="text/css">
      div.code pre { border: 1px solid #999; font-size: 90%; margin: 1em 2em;
        padding: 5px; width: 60%;
      }
    </style>
    <link py:for="style in sorted(styles)" rel="stylesheet" type="text/css"
          href="${href.pygments('%s.css' % style)}" title="${style.title()}" />
    <script type="text/javascript">
    	(function($){
	      window.switchStyleSheet = function(title) {
	        $('link[rel="stylesheet"][title]').each(function() {
	          this.disabled = this.getAttribute('title') != title;
	        });
	      }
      })(jQuery);
      jQuery(document).ready(function($) {
        switchStyleSheet("${selection.title()}");
        $("#pygment_theme").attr("autocomplete", "off").bind('change keypress', function() {
          switchStyleSheet(this.options[this.selectedIndex].text);
        });
      });
    </script>
  </head>
  <body>

    <div class="field">
      <p class="hint">The Pygments syntax highlighter can be used with
      different coloring styles.</p>
      <p><label>Style:
        <select id="pygment_theme" name="style">
          <option py:for="style in sorted(styles)" value="${style}"
                  selected="${selection == style or None}">${style.title()}</option>
        </select>
      </label></p>
      Preview:
      <div class="code"><pre>${output}</pre></div>
    </div>

  </body>
</html>
