1<!DOCTYPE html>
2<html>
3<head>
4<title>Demo</title>
5<script src="../src/prettify.js"></script>
6<script src="../src/lang-css.js"></script>
7<style type="text/css">
8body { margin: 0; padding: 0; }
9pre { margin: 0; }
10#container { width: 40em; display: inline-block; }
11</style>
12<script type="text/javascript">
13/**
14 * Call out to the parent so that it can resize the iframe once this
15 * document's body is loaded.
16 * @param {string} theme
17 */
18function adjustHeightInParent(theme) {
19  if (parent !== window) {
20    try {
21      var div = document.getElementById('container');
22      parent.adjustChildIframeSize(theme, div.offsetWidth, div.offsetHeight);
23    } catch (ex) {
24      // Can happen when this page is opened in its own tab.
25    }
26  } else {
27    // redirect to main page if this page is loaded directly
28    window.location = "./index.html";
29  }
30}
31
32/**
33 * Theme name is specified by iframe in which the page is loaded
34 * @return {string}
35 */
36function getThemeName() {
37  // theme is named in the query part of the URL
38  //var theme = decodeURIComponent(document.location.search.substring(1));
39
40  // theme is named in the "name" property of the embedded iframe
41  var theme = window.frameElement && window.frameElement.getAttribute("name");
42
43  return theme ? theme : 'default';
44}
45
46/**
47 * Load the necessary CSS
48 * @param {string} theme
49 */
50function loadTheme(theme) {
51  var link = document.createElement('link');
52  link.rel = 'stylesheet';
53  link.type = 'text/css';
54  link.href = theme === 'default' ? '../src/prettify.css' : theme + '.css';
55  document.getElementsByTagName('head')[0].appendChild(link);
56}
57
58/**
59 * Called on page load.
60 * This page displays some code styled using theme specified.
61 */
62function onLoadFcn() {
63  // syntax highlight
64  PR.prettyPrint();
65
66  // call to parent we're embedded into
67  var theme = getThemeName();
68  adjustHeightInParent(theme);
69}
70
71(function () {
72  // Load the stylesheet that we're demoing.
73  var themeName = getThemeName();
74  document.title = 'Theme ' + themeName;
75  loadTheme(themeName);
76})();
77</script>
78</head>
79
80<body onload="onLoadFcn();">
81
82<div id="container">
83<pre class="prettyprint lang-html linenums">
84&lt;!doctype html&gt;
85&lt;html&gt;
86&lt;head&gt;
87&lt;title&gt;HTML Test&lt;/title&gt;
88&lt;script type="text/javascript"&gt;
89// Say hello world until the user starts questioning
90// the meaningfulness of their existence.
91function helloWorld(world) {
92  for (var i = 42; --i &gt;= 0;) {
93    alert('Hello ' + String(world));
94  }
95}
96&lt;/script&gt;
97&lt;style type="text/css"&gt;
98p { color: pink }
99b { color: blue }
100u { color: "umber" }
101&lt;/style&gt;
102&lt;/head&gt;
103&lt;body&gt;
104&lt;h1&gt;Hello world!&lt;/h1&gt;
105&lt;/body&gt;
106&lt;/html&gt;
107</pre>
108</div>
109
110</body>
111</html>
112