-
Notifications
You must be signed in to change notification settings - Fork 1
CLAAT `html` Rendering Format
This document outlines the major parts of the html rendering format (not to be confused with the offline/lite format which also outputs HTML). While this document doesn't explicitly compare this format with other output formats, it was written as supporting material for comparing different formats.
The generated HTML structure looks something like
<!doctype html>
<html>
<head>
...
</head>
<body>
<google-codelab>
<google-codelab-step>
...
</google-codelab-step>
<google-codelab-step>
...
</google-codelab-step>
...
</google-codelab>
<script>
Google Analytics Tracking Stuff
</script>
</body>
<html>
Inside of each step, there is a straightfoward rendering of the content with standard HTML tags (lots of <p>, <em>, <strong>, <ul>, <li>, and <img> tags). Notably, the title of the lab is embedded as a label attribute on the google-codelab-step element. The step duration also gets embedded as an attribute. A typical step may look like
<google-codelab-step label="Introduction" duration="2">
<p>This is some <strong>bolded</strong> text. And this is <em>Italics</em><p>
<p>Here's a list:</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>This one line has some <strong>BOLD</strong> text.</li>
<li>This <em>one has italics</em>!</li>
<li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
</ul>
...
</google-codelab-step>
Tables are generated in a very straightforward way:
<table>
<tr><td colspan="1" rowspan="1"><p>Access to Datastore</p>
</td><td colspan="1" rowspan="1"><p><a href="https://cloud.google.com/appengine/docs/python/ndb/" target="_blank">NDB</a></p>
</td><td colspan="1" rowspan="1"><p><a href="https://cloud.google.com/sdk/cloud-client-libraries" target="_blank">Google Cloud Client Library</a></p>
</td></tr>
...
</table>
Unordered lists are exported with no custom markup (just <ul> with <li>s) and do not support nesting. For example, a list like:
- This is a list item
- And this is nested under it
Gets converted to:
<ul>
<li>This is a list item</li>
<li>And this is nested under it<li>
</ul>
Ordered lists, on the other hand, attempt to support nesting but appear to be buggy. For example, the following ordered list:
1. Vestibulum id ligula porta felis euismod semper.
a. Maecenas faucibus mollis interdum.
b. Aenean lacinia bibendum nulla sed consectetur.
2. Sed posuere consectetur est at lobortis.
a. Cras mattis consectetur purus sit amet fermentum.
b. Donec sed odio dui.
3. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
Gets rendered as:
<ol type="1" start="1">
<li>Vestibulum id ligula porta felis euismod semper.</li>
</ol>
<ol type="1" start="1">
<li>Maecenas faucibus mollis interdum.</li>
<li>Aenean lacinia bibendum nulla sed consectetur.</li>
</ol>
<ol type="1" start="2">
<li>Sed posuere consectetur est at lobortis.</li>
</ol>
<ol type="1" start="1">
<li>Cras mattis consectetur purus sit amet fermentum.</li>
<li>Donec sed odio dui.</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
</ol>
This output format makes no attempt at any syntax highlighting. Inline code is wrapped in <code>...</code> and code blocks are wrapped in <pre><code>...</code></pre>.
Positive info boxes are wrapped in <aside class="special">...</aside>. Negative info boxes are wrapped in <aside class="warning">...</aside>. The markup inside of the boxes is unaffected by this.