styles/index.html

<!DOCTYPE html>
<html>
<head>
<title>Prettify Themes Gallery</title>
<style type="text/css">
iframe { width: 100%; border-style: none; margin: 0; padding: 0; }
.attribution { padding-left: 1em; }
</style>
<script type="text/javascript">
/**
 * Called by the demo.html frames loaded per theme to size the iframes
 * properly and to allow them to tile the page nicely.
 */
function adjustChildIframeSize(themeName, width, height) {
  if (typeof console !== 'undefined' && console.log) {
    try {
      console.log('adjusting ' + themeName + ' to ' + width + 'x' + height);
    } catch (ex) {
      // Don't bother logging log failure.
    }
  }
  var iframe = document.getElementById(themeName);
  iframe.style.height = (+height + 16) + 'px';
  var container = iframe.parentNode;
  container.style.width = (+width + 16) + 'px';
  container.style.display = 'inline-block';
}

/**
 * Create an iframe to showcase theme.
 * We pass the theme name to the iframe via its URI query, and it loads
 * prettify and the theme CSS, and calls back to this page to resize iframe.
 */
function appendThemeIFrame(theme) {
  // title
  var link = document.createElement('a');
  link.href = 'https://github.com/google/code-prettify/blob/master/' +
    (theme.name === 'default' ? 'src/prettify.css' :
    ('styles/' + encodeURIComponent(theme.name) + '.css'));
  link.appendChild(document.createTextNode(
    theme.name.replace(/\b[a-z]/g, function (letter) {
      // Capitalize first letter of each word
      return letter.toUpperCase();
    })));
  var header = document.createElement('h2');
  header.className = 'title';
  header.appendChild(link);

  // attribution
  var attribution;
  if (theme.author) {
    attribution = document.createElement('span');
    attribution.className = 'attribution';
    attribution.innerHTML = 'by <em>' + theme.author + '<\/em>';
  }

  // iframe
  var iframe = document.createElement('iframe');
  iframe.id = theme.name;
  iframe.name = theme.name;  // theme name retrieved in demo.html
  iframe.src = 'demo.html';
  //iframe.src = 'demo.html?' + encodeURIComponent(theme.name);

  // insert into page
  var container = document.createElement('div');
  container.className = 'container';
  container.appendChild(header);
  if (theme.author) { container.appendChild(attribution); }
  container.appendChild(iframe);
  document.body.appendChild(container);
}
</script>
</head>

<body>
<noscript>This page requires JavaScript</noscript>

<h1>Gallery of themes for
<a href="https://github.com/google/code-prettify">code prettify</a></h1>
<p>
Click on a theme name for a link to the file in revision control.
Print preview this page to see how the themes work on the printed page.
</p>

<script type="text/javascript">
var allThemes = [
  { name: 'default' },
  { name: 'desert', author: '<a href="https://code.google.com/u/techtonik@gmail.com/">anatoly techtonik<\/a>' },
  { name: 'sunburst', author: 'David Leibovic' },
  { name: 'sons-of-obsidian', author: '<a href="http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme">Alex Ford<\/a>' },
  { name: 'doxy', author: 'Robert Sperberg' }
];

(function () {
  // Produce an iframe per theme.
  for (var i = 0, n = allThemes.length; i < n; ++i) {
    appendThemeIFrame(allThemes[i]);
  }
})();
</script>

</body>
</html>