1<!DOCTYPE html>
2<html>
3<head>
4<title>Prettify Themes Gallery</title>
5<style type="text/css">
6iframe { width: 100%; border-style: none; margin: 0; padding: 0; }
7.attribution { padding-left: 1em; }
8</style>
9<script type="text/javascript">
10/**
11 * Called by the demo.html frames loaded per theme to size the iframes
12 * properly and to allow them to tile the page nicely.
13 */
14function adjustChildIframeSize(themeName, width, height) {
15  if (typeof console !== 'undefined' && console.log) {
16    try {
17      console.log('adjusting ' + themeName + ' to ' + width + 'x' + height);
18    } catch (ex) {
19      // Don't bother logging log failure.
20    }
21  }
22  var iframe = document.getElementById(themeName);
23  iframe.style.height = (+height + 16) + 'px';
24  var container = iframe.parentNode;
25  container.style.width = (+width + 16) + 'px';
26  container.style.display = 'inline-block';
27}
28
29/**
30 * Create an iframe to showcase theme.
31 * We pass the theme name to the iframe via its URI query, and it loads
32 * prettify and the theme CSS, and calls back to this page to resize iframe.
33 */
34function appendThemeIFrame(theme) {
35  // title
36  var link = document.createElement('a');
37  link.href = 'https://github.com/google/code-prettify/blob/master/' +
38    (theme.name === 'default' ? 'src/prettify.css' :
39    ('styles/' + encodeURIComponent(theme.name) + '.css'));
40  link.appendChild(document.createTextNode(
41    theme.name.replace(/\b[a-z]/g, function (letter) {
42      // Capitalize first letter of each word
43      return letter.toUpperCase();
44    })));
45  var header = document.createElement('h2');
46  header.className = 'title';
47  header.appendChild(link);
48
49  // attribution
50  var attribution;
51  if (theme.author) {
52    attribution = document.createElement('span');
53    attribution.className = 'attribution';
54    attribution.innerHTML = 'by <em>' + theme.author + '<\/em>';
55  }
56
57  // iframe
58  var iframe = document.createElement('iframe');
59  iframe.id = theme.name;
60  iframe.name = theme.name;  // theme name retrieved in demo.html
61  iframe.src = 'demo.html';
62  //iframe.src = 'demo.html?' + encodeURIComponent(theme.name);
63
64  // insert into page
65  var container = document.createElement('div');
66  container.className = 'container';
67  container.appendChild(header);
68  if (theme.author) { container.appendChild(attribution); }
69  container.appendChild(iframe);
70  document.body.appendChild(container);
71}
72</script>
73</head>
74
75<body>
76<noscript>This page requires JavaScript</noscript>
77
78<h1>Gallery of themes for
79<a href="https://github.com/google/code-prettify">code prettify</a></h1>
80<p>
81Click on a theme name for a link to the file in revision control.
82Print preview this page to see how the themes work on the printed page.
83</p>
84
85<script type="text/javascript">
86var allThemes = [
87  { name: 'default' },
88  { name: 'desert', author: '<a href="https://code.google.com/u/techtonik@gmail.com/">anatoly techtonik<\/a>' },
89  { name: 'sunburst', author: 'David Leibovic' },
90  { name: 'sons-of-obsidian', author: '<a href="http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme">Alex Ford<\/a>' },
91  { name: 'doxy', author: 'Robert Sperberg' }
92];
93
94(function () {
95  // Produce an iframe per theme.
96  for (var i = 0, n = allThemes.length; i < n; ++i) {
97    appendThemeIFrame(allThemes[i]);
98  }
99})();
100</script>
101
102</body>
103</html>
104