From f74dc3a9175be5759c25e0e4024a45b9fbcdbd5c Mon Sep 17 00:00:00 2001
From: Michiel Bijl <MichielBijl@users.noreply.github.com>
Date: Sat, 18 Feb 2017 22:22:13 +0000
Subject: [PATCH] New design for all example pages (#296)

- Included default spec stylesheet
- Added a style for `<kbd>`
- Added some fixes on top of the default spec sheet to fix table styles
---
 examples/accordion/accordion1.html            |  22 +--
 examples/alert/index.html                     |   9 +-
 examples/breadcrumb/css/breadcrumb.css        |  21 +--
 examples/breadcrumb/index.html                |  14 +-
 examples/button/button.html                   |  42 ++---
 examples/checkbox/checkbox-1/checkbox-1.html  |  47 +++---
 examples/checkbox/checkbox-2/checkbox-2.html  |  23 +--
 ...ultipleImplementationExample-Template.html |   4 +-
 .../coding-template/Example-Template.html     |  26 +--
 .../combobox-autocomplete-both.html           |  24 +--
 .../combobox-autocomplete-list.html           |  20 ++-
 .../combobox-autocomplete-none.html           |  20 ++-
 .../combobox/aria1.1pattern/dialog-combo.html |  20 ++-
 .../combobox/aria1.1pattern/grid-combo.html   |  20 ++-
 .../aria1.1pattern/listbox-combo.html         |  20 ++-
 .../combobox/aria1.1pattern/tree-combo.html   |  20 ++-
 examples/css/core.css                         | 103 +++---------
 examples/css/core.old                         |  99 +++++++++++
 examples/css/github.css                       |  99 +++++++++++
 examples/disclosure/disclosure-faq.html       |  28 +--
 .../disclosure-img-long-description.html      |  38 +++--
 examples/feed/feed.html                       |  26 +--
 examples/grid/LayoutGrids.html                |  20 ++-
 examples/grid/advancedDataGrid.html           |  13 +-
 examples/grid/dataGrids.html                  |  27 +--
 examples/index.html                           |  79 +++++++++
 examples/js/app.js                            |   4 +
 examples/js/highlight.pack.js                 |   2 +
 examples/link/link.html                       |  20 ++-
 examples/listbox/listbox.html                 |  14 +-
 .../menu-button-1/menu-button-1.html          |  21 ++-
 .../menu-button-2/menu-button-2.html          |  20 ++-
 examples/menubar/menubar-1/menubar-1.html     | 159 +++++++++---------
 examples/menubar/menubar-2/menubar-2.html     |  19 ++-
 .../PresentationRoleExamples.html             |   8 +-
 examples/radio/radio-1/radio-1.html           |  35 ++--
 examples/radio/radio-2/radio-2.html           |  16 +-
 examples/slider/slider-1.html                 |  35 ++--
 examples/slider/slider-2.html                 |  29 ++--
 examples/tabs/css/tabs.css                    |   1 -
 examples/tabs/tabs-1/tabs.html                |  18 +-
 examples/tabs/tabs-2/tabs.html                |  14 +-
 examples/toolbar/toolbar.html                 |  15 +-
 examples/treeview/treeview-1/treeview-1a.html |  46 ++---
 examples/treeview/treeview-1/treeview-1b.html |  41 ++---
 examples/treeview/treeview-2/treeview-2a.html |  45 ++---
 examples/treeview/treeview-2/treeview-2b.html |  39 +++--
 47 files changed, 890 insertions(+), 595 deletions(-)
 create mode 100644 examples/css/core.old
 create mode 100644 examples/css/github.css
 create mode 100644 examples/index.html
 create mode 100644 examples/js/app.js
 create mode 100644 examples/js/highlight.pack.js

diff --git a/examples/accordion/accordion1.html b/examples/accordion/accordion1.html
index 227766c13f..a227135bff 100644
--- a/examples/accordion/accordion1.html
+++ b/examples/accordion/accordion1.html
@@ -5,9 +5,11 @@
 <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 <title>Accordion Example | WAI-ARIA Authoring Practices 1.1</title>
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link rel="stylesheet" type="text/css" href="css/customize.css" />
@@ -146,7 +148,7 @@ <h2 id="ex_label">Example</h2>
   </section>
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -155,7 +157,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       </thead>
       <tbody>
         <tr>
-          <td><kbd>Space</kbd> or <kbd>Enter</kbd></td>
+          <th><kbd>Space</kbd> or <kbd>Enter</kbd></th>
           <td>When focus is on the accordion header of a collapsed section, expands the section.</td>
         </tr>
       </tbody>
@@ -167,7 +169,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
       Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -286,12 +288,12 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <script>
-            sourceCode.add('sc1', 'coding-arena')
-            sourceCode.make()
-        </script>
+      sourceCode.add('sc1', 'coding-arena');
+      sourceCode.make();
+    </script>
   </section>
 
   </main>
diff --git a/examples/alert/index.html b/examples/alert/index.html
index aa3f3e075d..663e4b779a 100644
--- a/examples/alert/index.html
+++ b/examples/alert/index.html
@@ -5,8 +5,11 @@
     <title>Alert Example | WAI-ARIA Authoring Practices 1.1</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
-    <link href="../css/core.css" rel="stylesheet">
-    <link href="../css/table.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../css/core.css">
+    <script src="../js/examples.js"></script>
+    <script src="../js/highlight.pack.js"></script>
+    <script src="../js/app.js"></script>
 
     <!--  js and css for this example. -->
     <link href="css/alert.css" rel="stylesheet">
@@ -55,7 +58,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
     <section>
       <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-      <table aria-labelledby="rps_label">
+      <table aria-labelledby="rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
diff --git a/examples/breadcrumb/css/breadcrumb.css b/examples/breadcrumb/css/breadcrumb.css
index 853e268080..372ab35236 100644
--- a/examples/breadcrumb/css/breadcrumb.css
+++ b/examples/breadcrumb/css/breadcrumb.css
@@ -1,8 +1,8 @@
 nav.breadcrumb {
   padding: 0.8em 1em;
-  border: 1px solid #f5f5f5;
+  border: 1px solid hsl(0, 0%, 90%);
   border-radius: 4px;
-  background: #FCFBFC;
+  background: hsl(300, 14%, 97%);
 }
 
 nav.breadcrumb ol {
@@ -15,12 +15,6 @@ nav.breadcrumb li {
   display: inline;
 }
 
-/*nav.breadcrumb li + li::before {
-  display: inline-block;
-  content: url('../images/slash.svg');
-  vertical-align: middle;
-}*/
-
 nav.breadcrumb li + li::before {
   display: inline-block;
   margin: 0 .25em;
@@ -30,17 +24,6 @@ nav.breadcrumb li + li::before {
   content: '';
 }
 
-nav.breadcrumb a {
-  color: #2F72C8;
-  text-decoration: none;
-}
-
-nav.breadcrumb a:focus,
-nav.breadcrumb a:hover {
-  text-decoration: underline;
-  background: transparent;
-}
-
 nav.breadcrumb [aria-current="page"] {
   color: #000;
   font-weight: 700;
diff --git a/examples/breadcrumb/index.html b/examples/breadcrumb/index.html
index 6109186b6f..fd1675b06b 100644
--- a/examples/breadcrumb/index.html
+++ b/examples/breadcrumb/index.html
@@ -4,9 +4,13 @@
     <meta charset="utf-8" />
     <title>Breadcrumb Example | WAI-ARIA Authoring Practices 1.1</title>
 
-    <link href="../css/core.css" rel="stylesheet">
-    <link href="../css/table.css" rel="stylesheet">
-    <script src="../js/examples.js" type="text/javascript"></script>
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../css/core.css">
+    <script src="../js/examples.js"></script>
+    <script src="../js/highlight.pack.js"></script>
+    <script src="../js/app.js"></script>
+
     <link href="css/breadcrumb.css" rel="stylesheet">
   </head>
   <body>
@@ -61,7 +65,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
     <section>
       <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-      <table aria-labelledby="rps_label">
+      <table aria-labelledby="rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
@@ -112,7 +116,7 @@ <h2>Javascript and CSS Source Code</h2>
     <section>
       <h2 id="sc1_label">HTML Source Code</h2>
       <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-      <pre id="sc1"></pre>
+      <pre><code id="sc1"></code></pre>
       <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
       <script>
         sourceCode.add('sc1', 'ex1');
diff --git a/examples/button/button.html b/examples/button/button.html
index 946574031f..472e7d7f94 100644
--- a/examples/button/button.html
+++ b/examples/button/button.html
@@ -3,24 +3,16 @@
 <head>
 <meta charset="utf-8" />
 <title>Button Examples | WAI-ARIA Authoring Practices 1.1</title>
-<meta name="generator" content="BBEdit 10.5" />
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
+
+<!--  Core js and css shared by all examples; do not modify when using this template. -->
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
+
 <link href="css/button.css" rel="stylesheet">
 <script src="js/button.js" type="text/javascript"></script>
-<style type="text/css">
-  #example h3 {
-    padding: 0;
-    margin: 0;
-    margin-top: 1em;
-    margin-bottom: 0.25em;
-  }
-  #example p {
-    padding: 0;
-    margin: 0;
-    margin-bottom: 0.5em;
-  }
-</style>
 </head>
 <body>
   <main>
@@ -38,21 +30,21 @@ <h1>Button Examples</h1>
       <h3>Action Button</h3>
       <p>Print button uses a <code>div</code> element.</p>
       <div tabindex="0" role="button" id="action">Print Page</div>
-      
+
       <h3>Toggle Button</h3>
       <p>Mute button uses a <code>a</code> element.</p>
       <div>
         <a tabindex="0" role="button" id="toggle" aria-pressed="false">Mute</a>
       </div>
 
-    </div>  
-  </section>  
+    </div>
+  </section>
 
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
 
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -71,7 +63,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">ARIA Roles, Properties and States</h2>
 
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -164,19 +156,19 @@ <h2>HTML Source Code</h2>
 
     <h3 id="sc1_label">Action Button</h3>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <div id="source1"></div>
+    <pre><code id="source1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
     <h3 id="sc2_label">Toggle Button</h3>
     <div role="separator" id="sc2_start_sep" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of"></div>
-    <div id="source2"></div>
+    <pre><code id="source2"></code></pre>
     <div role="separator" id="sc2_end_sep" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of"></div>
 
 
 
     <script>
-      sourceCode.add('source1', 'action')
-      sourceCode.add('source2', 'toggle')
+      sourceCode.add('source1', 'action');
+      sourceCode.add('source2', 'toggle');
       sourceCode.make();
     </script>
   </section>
diff --git a/examples/checkbox/checkbox-1/checkbox-1.html b/examples/checkbox/checkbox-1/checkbox-1.html
index 82621ce56f..9fde76b3cc 100644
--- a/examples/checkbox/checkbox-1/checkbox-1.html
+++ b/examples/checkbox/checkbox-1/checkbox-1.html
@@ -4,12 +4,15 @@
   <meta charset="utf-8" />
   <title>Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.1</title>
 
-  <link href="../../css/core.css" rel="stylesheet">
-  <link href="../../css/table.css" rel="stylesheet">
-  <script src="../../js/examples.js" type="text/javascript"></script>
-  
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../../css/core.css">
+  <script src="../../js/examples.js"></script>
+  <script src="../../js/highlight.pack.js"></script>
+  <script src="../../js/app.js"></script>
+
   <link href="css/checkbox.css" rel="stylesheet">
-  
+
   <script src="js/checkbox.js" type="text/javascript"></script>
 </head>
 <body>
@@ -38,7 +41,7 @@ <h3>Sandwich Condiments</h3>
         </div>
 
         <script type="text/javascript">
-          window.onload=function() {
+          window.onload = function () {
 
             var checkboxes = document.querySelectorAll('[role="checkbox"]');
 
@@ -47,10 +50,10 @@ <h3>Sandwich Condiments</h3>
               cb.init();
             }
 
-          }    
+          };
         </script>
 
-      </div>  
+      </div>
 
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
 
@@ -58,7 +61,7 @@ <h3>Sandwich Condiments</h3>
 
      <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label"> 
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -71,24 +74,24 @@ <h2 id="kbd_label">Keyboard Support</h2>
             <td>
               <ul>
                 <li>Moves keyboard focus to the <code>checkbox</code>.</li>
-              </ul>  
+              </ul>
             </td>
           </tr>
             <tr>
               <th><kbd>Space</kbd></th>
               <td>
                 <ul>
-                  <li>Toggle check checkbox between checked and unchecked.</li>  
-                </ul>  
+                  <li>Toggle check checkbox between checked and unchecked.</li>
+                </ul>
               </td>
             </tr>
           </tbody>
         </table>
       </section>
- 
-    <section>   
+
+    <section>
       <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-      <table aria-labelledby="rps_label">
+      <table aria-labelledby="rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
@@ -107,7 +110,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>The <code>role=&quot;checkbox&quot;</code> attribute identifies the <code>div</code> element as a ARIA <code>checkbox</code>.</li>
                   <li>The accessible name comes the child text content of the <code>div[role=&quot;checkbox&quot;]</code> element.</li>
                   <li>The <code>checkbox</code> widget needs a <code>tabindex=&quot;0&quot;</code> value.</li>
-                </ul> 
+                </ul>
               </td>
             </tr>
             <tr>
@@ -117,7 +120,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
               <td>
                   <ul>
                     <li>The <code>div[&quot;checkbox&quot;]</code> is identified as an ineractive element and is added to the tab order of the page by setting the <code>tabindex=&quot;0&quot;</code>.</li>
-                   </ul>  
+                   </ul>
               </td>
             </tr>
             <tr>
@@ -129,7 +132,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                     <li>Indentifies the <code>checkbox</code> button as unchecked.</li>
                     <li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;false&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
                     <li>The CSS <code>:before</code> psuedo selector and the <code>content</code> property are used to indcate visual state of "unchecked" to support high contrast setting in operating systems and browsers.</li>
-                  </ul>  
+                  </ul>
               </td>
             </tr>
             <tr>
@@ -141,13 +144,13 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                     <li>Indentifies the <code>checkbox</code> as checked.</li>
                     <li>CSS attribute selectors (e.g. <code>[aria-checked=&quot;true&quot;]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
                     <li>The CSS <code>:before</code> psuedo selector and the <code>content</code> property are used to indcate visual state of "checked" to support high contrast setting in operating systems and browsers.</li>
-                  </ul>  
+                  </ul>
               </td>
             </tr>
         </tbody>
       </table>
     </section>
-  
+
   <section>
     <h2>Javascript and CSS Source Code</h2>
     <ul>
@@ -164,7 +167,7 @@ <h2>Javascript and CSS Source Code</h2>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
 
     <script>
@@ -172,7 +175,7 @@ <h3 id="sc1_label">Simple Two-State Checkbox Example</h3>
         sourceCode.make();
     </script>
   </section>
-  </main>  
+  </main>
   <nav>
     <a href="../../../#checkbox">Checkbox Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
   </nav>
diff --git a/examples/checkbox/checkbox-2/checkbox-2.html b/examples/checkbox/checkbox-2/checkbox-2.html
index 6759cf4d80..fd727a6d7a 100644
--- a/examples/checkbox/checkbox-2/checkbox-2.html
+++ b/examples/checkbox/checkbox-2/checkbox-2.html
@@ -3,10 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <title>Checkbox Example (Mixed State) | WAI-ARIA Authoring Practices 1.1</title>
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
 
-    <script src="../../js/examples.js" type="text/javascript"></script>
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <link href="css/checkboxMixed.css" rel="stylesheet">
 
@@ -54,15 +57,15 @@ <h2 id="ex_label">Example</h2>
 
           <script type="text/javascript">
 
-            function checkboxFocus(event) {
+            function checkboxFocus (event) {
               event.currentTarget.parentNode.classList.add('focus');
             };
 
-            function checkboxBlur(event) {
+            function checkboxBlur (event) {
               event.currentTarget.parentNode.classList.remove('focus');
             };
 
-            window.onload=function() {
+            window.onload = function () {
               var i;
 
               var mixed = document.querySelectorAll('[role="checkbox"]');
@@ -80,7 +83,7 @@ <h2 id="ex_label">Example</h2>
                 cb.addEventListener('blur', checkboxBlur);
               }
 
-            }
+            };
           </script>
 
         </div>
@@ -92,7 +95,7 @@ <h2 id="ex_label">Example</h2>
 
       <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label">
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -127,7 +130,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
         <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
-        <table aria-labelledby="rps_label">
+        <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -229,7 +232,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
         <script>
diff --git a/examples/coding-template/Depricated-MultipleImplementationExample-Template.html b/examples/coding-template/Depricated-MultipleImplementationExample-Template.html
index ff5b22c26d..b0b1e5680e 100644
--- a/examples/coding-template/Depricated-MultipleImplementationExample-Template.html
+++ b/examples/coding-template/Depricated-MultipleImplementationExample-Template.html
@@ -204,7 +204,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
       Update this table to describe how roles, properties, states, and tabindex are used in this example.  
       If the content will vary significantly for the above implementations, make this a level 4 section inside each of the above level 3 implementation sections.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th>Attribute</th>
@@ -254,7 +254,7 @@ <h2>Javascript and CSS Source Code</h2>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Example 1: title of this variation of the implementation</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for" ></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for" ></div>
     <!-- 
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/coding-template/Example-Template.html b/examples/coding-template/Example-Template.html
index 1063818d33..fdb8a9a93c 100644
--- a/examples/coding-template/Example-Template.html
+++ b/examples/coding-template/Example-Template.html
@@ -9,18 +9,20 @@
   Similarly, rename the javascript and CSS stub files in the js and css subdirectories and update the head element of this file.
 -->
 
-<!--  
-  Give this example implementation a name and put it in the title element, 
+<!--
+  Give this example implementation a name and put it in the title element,
   e.g., "Checkbox" if implementing the checkbox pattern.
-  The name should be unique if the pattern will have multiple implementations, 
+  The name should be unique if the pattern will have multiple implementations,
   e.g., "Simple Two-State Checkbox" or "Three-State Checkbox".
 -->
 <title>EXAMPLE_NAME Example | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 
 <!--  js and css for this example.
   When developing an example implementation of a design pattern,
@@ -86,7 +88,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -96,7 +98,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -128,9 +130,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -150,7 +152,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -186,7 +188,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html b/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html
index d387490d95..a658449596 100644
--- a/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html
+++ b/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html
@@ -5,9 +5,11 @@
 <title>Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../../css/core.css">
+<script src="../../js/examples.js"></script>
+<script src="../../js/highlight.pack.js"></script>
+<script src="../../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.0.css" rel="stylesheet">
@@ -49,9 +51,7 @@ <h2 id="ex_label">Example</h2>
         <li>The HTML in this section along with the javascript and CSS it uses demonstrate
           the design pattern.</li>
         <li>
-          When developing an example implementation for this guide, please follow the
-          <a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>
-          .
+          When developing an example implementation for this guide, please follow the <a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>.
         </li>
         <!--  Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo.  -->
       </ul>
@@ -73,7 +73,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -83,7 +83,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -115,9 +115,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -137,7 +137,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -173,7 +173,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html b/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
index 085f644aaa..ac48a39893 100644
--- a/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
+++ b/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
@@ -5,9 +5,11 @@
 <title>Example of Legacy ARIA 1.0 Combobox With an Autocomplete List | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../../css/core.css">
+<script src="../../js/examples.js"></script>
+<script src="../../js/highlight.pack.js"></script>
+<script src="../../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.0.css" rel="stylesheet">
@@ -73,7 +75,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -83,7 +85,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -115,9 +117,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -137,7 +139,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -173,7 +175,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html b/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html
index 92a277ba39..4ad9ed1ca7 100644
--- a/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html
+++ b/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html
@@ -5,9 +5,11 @@
 <title>Example of Legacy ARIA 1.0 Combobox Without Autocomplete | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../../css/core.css">
+<script src="../../js/examples.js"></script>
+<script src="../../js/highlight.pack.js"></script>
+<script src="../../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.0.css" rel="stylesheet">
@@ -73,7 +75,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -83,7 +85,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -115,9 +117,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -137,7 +139,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -173,7 +175,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/combobox/aria1.1pattern/dialog-combo.html b/examples/combobox/aria1.1pattern/dialog-combo.html
index 87a7b7551c..b5712c47fb 100644
--- a/examples/combobox/aria1.1pattern/dialog-combo.html
+++ b/examples/combobox/aria1.1pattern/dialog-combo.html
@@ -5,9 +5,11 @@
 <title>Example of ARIA 1.1 Combobox with Dialog Popup | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../../css/core.css">
+<script src="../../js/examples.js"></script>
+<script src="../../js/highlight.pack.js"></script>
+<script src="../../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.1.css" rel="stylesheet">
@@ -73,7 +75,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -83,7 +85,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -115,9 +117,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -137,7 +139,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -173,7 +175,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/combobox/aria1.1pattern/grid-combo.html b/examples/combobox/aria1.1pattern/grid-combo.html
index 28d5844004..23b78345a8 100644
--- a/examples/combobox/aria1.1pattern/grid-combo.html
+++ b/examples/combobox/aria1.1pattern/grid-combo.html
@@ -5,9 +5,11 @@
 <title>Example of ARIA 1.1 Combobox with Grid Popup | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../../css/core.css">
+<script src="../../js/examples.js"></script>
+<script src="../../js/highlight.pack.js"></script>
+<script src="../../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.1.css" rel="stylesheet">
@@ -73,7 +75,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -83,7 +85,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -115,9 +117,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -137,7 +139,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -173,7 +175,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/combobox/aria1.1pattern/listbox-combo.html b/examples/combobox/aria1.1pattern/listbox-combo.html
index e1da9a58ee..1c3e4ef62b 100644
--- a/examples/combobox/aria1.1pattern/listbox-combo.html
+++ b/examples/combobox/aria1.1pattern/listbox-combo.html
@@ -5,9 +5,11 @@
 <title>Example of ARIA 1.1 Combobox with Listbox Popup | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../../css/core.css">
+<script src="../../js/examples.js"></script>
+<script src="../../js/highlight.pack.js"></script>
+<script src="../../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.1.css" rel="stylesheet">
@@ -73,7 +75,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -83,7 +85,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -115,9 +117,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -137,7 +139,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -173,7 +175,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/combobox/aria1.1pattern/tree-combo.html b/examples/combobox/aria1.1pattern/tree-combo.html
index 8f3639e007..adf4d40a2f 100644
--- a/examples/combobox/aria1.1pattern/tree-combo.html
+++ b/examples/combobox/aria1.1pattern/tree-combo.html
@@ -5,9 +5,11 @@
 <title>Example of ARIA 1.1 Combobox with Tree Popup | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../../css/core.css">
+<script src="../../js/examples.js"></script>
+<script src="../../js/highlight.pack.js"></script>
+<script src="../../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.1.css" rel="stylesheet">
@@ -73,7 +75,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -83,7 +85,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -115,9 +117,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -137,7 +139,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -173,7 +175,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/css/core.css b/examples/css/core.css
index 2e338d3ebc..7b57c6d36e 100644
--- a/examples/css/core.css
+++ b/examples/css/core.css
@@ -1,83 +1,16 @@
-html,
-body {
-  font: normal 95% Helvetica, Verdana, Arial, sans-serif;
-  color: #000;
-  padding: 0;
-  margin: 0;
-}
-
-body {
-  padding: 0.5em 0.7em;
-  margin: 0 4em 0 1em;
-  max-width: 55em;
-  background: #fff;
-}
-
-h1,
-h2,
-h3 {
-  font: normal 170%/100% Helvetica, Verdana, Arial, sans-serif;
-  margin-top: 1em;
-  margin-bottom: 0;
-  color: #630;
-  background: transparent;
-}
-
-h1 {
-  padding: 0.2em;
-}
-
-h2 {
-  font: normal 150%/100% Helvetica, Verdana, Arial, sans-serif;
-  margin-top: 2em;
-}
-
-h3 {
-  font: normal 140%/120% Helvetica, Verdana, Arial, sans-serif;
-}
-
-a {
-  color: #009;
-  background: transparent;
-}
-
-a:visited {
-  color:#360;
-  background:transparent;
-}
-
-a:hover,
-a:focus,
-a:active {
-  color:#000;
-  background-color: #fc0;
-}
-
-img {
-  max-width: 100%;
-  border: none;
-}
+/* Style for syntax highlighting */
+@import url("github.css");
 
+/* Code blocks */
 pre,
 code,
 samp,
 .sourcecode {
   color: hsl(11, 81%, 43%);
-  font-family: "Menlo", "Consolas", "DejaVu Sans Mono", "Monaco", monospace;
-  font-size: .9em;
-  page-break-inside: avoid;
-  hyphens: none;
-  text-transform: none;
-  white-space: pre-line;
-}
-
-pre code,
-code code {
-  font-size: 100%;
 }
 
-pre,
-.sourcecode {
+pre code:not(.hljs),
+.sourcecode:not(.hljs) {
   margin: 1em 0;
   padding: 1em;
   border-radius: .2em;
@@ -85,15 +18,27 @@ pre,
   background: hsl(24, 20%, 95%);
 }
 
-[hidden] {
-  display: none;
+/* Style all kbd elements that are not in table headers */
+:not(th) > kbd {
+  display: inline-block;
+  padding: .1em .3em;
+  color: #555;
+  vertical-align: middle;
+  background-color: #fcfcfc;
+  border: solid 1px #ccc;
+  border-bottom-color: #bbb;
+  border-radius: .2em;
+  box-shadow: inset 0 -1px 0 #bbb
 }
 
-#example {
-  margin-top: 1em;
-  margin-bottom: 2em;
+/* Align border for */
+table.attributes tbody th:first-child {
+  border-right: 0;
 }
 
-#example li + li {
-  margin-top: .5em;
+table.attributes tbody th:first-child + td,
+table.attributes tbody th:nth-child(2) {
+  border-right: 2px solid;
+  border-top: 1px solid silver;
+  padding-right: 1em;
 }
diff --git a/examples/css/core.old b/examples/css/core.old
new file mode 100644
index 0000000000..2e338d3ebc
--- /dev/null
+++ b/examples/css/core.old
@@ -0,0 +1,99 @@
+html,
+body {
+  font: normal 95% Helvetica, Verdana, Arial, sans-serif;
+  color: #000;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  padding: 0.5em 0.7em;
+  margin: 0 4em 0 1em;
+  max-width: 55em;
+  background: #fff;
+}
+
+h1,
+h2,
+h3 {
+  font: normal 170%/100% Helvetica, Verdana, Arial, sans-serif;
+  margin-top: 1em;
+  margin-bottom: 0;
+  color: #630;
+  background: transparent;
+}
+
+h1 {
+  padding: 0.2em;
+}
+
+h2 {
+  font: normal 150%/100% Helvetica, Verdana, Arial, sans-serif;
+  margin-top: 2em;
+}
+
+h3 {
+  font: normal 140%/120% Helvetica, Verdana, Arial, sans-serif;
+}
+
+a {
+  color: #009;
+  background: transparent;
+}
+
+a:visited {
+  color:#360;
+  background:transparent;
+}
+
+a:hover,
+a:focus,
+a:active {
+  color:#000;
+  background-color: #fc0;
+}
+
+img {
+  max-width: 100%;
+  border: none;
+}
+
+pre,
+code,
+samp,
+.sourcecode {
+  color: hsl(11, 81%, 43%);
+  font-family: "Menlo", "Consolas", "DejaVu Sans Mono", "Monaco", monospace;
+  font-size: .9em;
+  page-break-inside: avoid;
+  hyphens: none;
+  text-transform: none;
+  white-space: pre-line;
+}
+
+pre code,
+code code {
+  font-size: 100%;
+}
+
+pre,
+.sourcecode {
+  margin: 1em 0;
+  padding: 1em;
+  border-radius: .2em;
+  overflow: auto;
+  background: hsl(24, 20%, 95%);
+}
+
+[hidden] {
+  display: none;
+}
+
+#example {
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
+
+#example li + li {
+  margin-top: .5em;
+}
diff --git a/examples/css/github.css b/examples/css/github.css
new file mode 100644
index 0000000000..791932b87e
--- /dev/null
+++ b/examples/css/github.css
@@ -0,0 +1,99 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/examples/disclosure/disclosure-faq.html b/examples/disclosure/disclosure-faq.html
index 5e2737ed79..75c43ec206 100644
--- a/examples/disclosure/disclosure-faq.html
+++ b/examples/disclosure/disclosure-faq.html
@@ -4,12 +4,16 @@
 <meta charset="utf-8" />
 <title>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions | WAI-ARIA Authoring
   Practices 1.1</title>
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
 
-<link href="css/disclosure-faq.css" rel="stylesheet">
-<script src="js/disclosureButton.js" type="text/javascript"></script>
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../css/core.css">
+  <script src="../js/examples.js"></script>
+  <script src="../js/highlight.pack.js"></script>
+  <script src="../js/app.js"></script>
+
+  <link href="css/disclosure-faq.css" rel="stylesheet">
+  <script src="js/disclosureButton.js" type="text/javascript"></script>
 
 </head>
 <body>
@@ -100,7 +104,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -123,7 +127,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </th>
           <td>
               <li>
-              Activates the disclosure button, 
+              Activates the disclosure button,
               which toggles the visibility of the answer to the question.
           </td>
         </tr>
@@ -133,7 +137,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -227,12 +231,12 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of" ></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of" ></div>
     <script>
-          sourceCode.add('sc1', 'ex1');
-          sourceCode.make();
-        </script>
+      sourceCode.add('sc1', 'ex1');
+      sourceCode.make();
+    </script>
   </section>
   </main>
   <nav>
diff --git a/examples/disclosure/disclosure-img-long-description.html b/examples/disclosure/disclosure-img-long-description.html
index 1e5a2b3fee..c2326c4490 100644
--- a/examples/disclosure/disclosure-img-long-description.html
+++ b/examples/disclosure/disclosure-img-long-description.html
@@ -3,9 +3,13 @@
 <head>
 <meta charset="utf-8" />
 <title>Example Disclosure (Show/Hide) for Image Description | WAI-ARIA Authoring Practices 1.1</title>
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+
+<!--  Core js and css shared by all examples; do not modify when using this template. -->
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 
 <link href="css/disclosure-img-long-description.css" rel="stylesheet">
 <script src="js/disclosureButton.js" type="text/javascript"></script>
@@ -15,7 +19,7 @@
   <main>
   <h1>Example Disclosure (Show/Hide) for Image Description</h1>
   <p>
-    Please provide feedback on this example in 
+    Please provide feedback on this example in
     <a href="https://github.com/w3c/aria-practices/issues/264">issue 264.</a>
   </p>
   <p>
@@ -36,16 +40,16 @@ <h2 id="ex_label">Example</h2>
       <figure>
 
         <img src="images/minard.png" aria-labelledby="id_short_desc" />
-      
+
         <caption id="id_short_desc"> Charles Minard's 1869 chart showing the number of men in
           Napoleon’s 1812 Russian campaign army, their movements, as well as the temperature they
-          encountered on the return path.</caption> 
+          encountered on the return path.</caption>
 
         <button aria-expanded="true" aria-controls="id_long_desc">Data Table for Minard's Chart</button>
 
         <div id="id_long_desc">
           <h3 id="id_data_label">Data for Charles Minars's Chart of Naploean's Invasion of Russia</h3>
-          <table aria-labelledby="id_data_label">
+          <table aria-labelledby="id_data_label" class="data">
             <thead>
               <tr>
                 <th scope="col">Location</th>
@@ -235,7 +239,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -258,7 +262,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </th>
           <td>
               <li>
-              Activates the disclosure button, 
+              Activates the disclosure button,
               which toggles the visibility of the long description.
           </td>
         </tr>
@@ -268,7 +272,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -289,7 +293,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
           <td>
             <ul>
               <li>The disclosure button controls visibility of the container identified by the <code>IDREF</code> value.</li>
-            </ul>  
+            </ul>
           </td>
         </tr>
         <tr>
@@ -306,7 +310,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
                 Indicates that the container controlled by the disclosure button is <em>hidden </em>.
               </li>
               <li>
-                CSS attribute selectors (e.g. <code>[aria-expanded=&quot;false&quot;]</code>) 
+                CSS attribute selectors (e.g. <code>[aria-expanded=&quot;false&quot;]</code>)
                 synchronize the visual states with the value of the <code>aria-expanded</code>
                 attribute.
               </li>
@@ -331,7 +335,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
                 Indicates that the container controlled by the disclosure button is <em>visible</em>.
               </li>
               <li>
-                CSS attribute selectors (e.g. <code>[aria-expanded=&quot;true&quot;]</code>) 
+                CSS attribute selectors (e.g. <code>[aria-expanded=&quot;true&quot;]</code>)
                 synchronize the visual states with the value of the <code>aria-expanded</code>
                 attribute.
               </li>
@@ -365,15 +369,15 @@ <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label"
       aria-label="Start of"
     ></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label"
       aria-label="End of"
     ></div>
 
     <script>
-          sourceCode.add('sc1', 'ex1');
-          sourceCode.make();
-        </script>
+      sourceCode.add('sc1', 'ex1');
+      sourceCode.make();
+    </script>
   </section>
   </main>
   <nav>
diff --git a/examples/feed/feed.html b/examples/feed/feed.html
index 8dc4a9bacb..8828a74aca 100644
--- a/examples/feed/feed.html
+++ b/examples/feed/feed.html
@@ -5,9 +5,11 @@
 <title>Feed Example | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/feed.css" rel="stylesheet">
@@ -18,14 +20,14 @@
   <h1>Feed Example</h1>
   <p>
     <strong>NOTE:</strong> This page is work in progress; is not ready for review.
-    Work on this example is tracked by 
+    Work on this example is tracked by
     <a href="https://github.com/w3c/aria-practices/issues/246">issue 246.</a>
   </p>
   <p>
-    The example below demonstrates an implementation of the 
+    The example below demonstrates an implementation of the
     This example uses ... summarize salient techniques )
   </p>
-  
+
   <section>
     <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
@@ -60,7 +62,7 @@ <h2>Accessibility Features</h2>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <!-- 
+    <!--
       List the keys supported in this example.
       Remember to:
       Use kbd tags,e.g. <kbd>KeyName</kbd>.
@@ -70,7 +72,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
       One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
       Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
      -->
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -102,9 +104,9 @@ <h2 id="kbd_label">Keyboard Support</h2>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
     <!--
-      Update this table to describe how roles, properties, states, and tabindex are used in this example.  
+      Update this table to describe how roles, properties, states, and tabindex are used in this example.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -124,7 +126,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         </tr>
         <tr>
           <td>
-            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role. 
+            <!--  Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
               Make a row like this for each attribute/value pair.
           -->
           </td>
@@ -160,7 +162,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre id="sc1"></pre>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <script>
       sourceCode.add('sc1', 'ex1');
diff --git a/examples/grid/LayoutGrids.html b/examples/grid/LayoutGrids.html
index c6dc87731b..fd0f99697b 100644
--- a/examples/grid/LayoutGrids.html
+++ b/examples/grid/LayoutGrids.html
@@ -3,11 +3,15 @@
 <head>
 <meta charset="utf-8" />
 <title>Layout Grid Examples | WAI-ARIA Authoring Practices 1.1</title>
+
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 <script src="../js/utils.js" type="text/javascript"></script>
+
 <!--  js and css for this example. -->
 <link href="css/layoutGrids.css" rel="stylesheet">
 <script src="js/dataGrid.js" type="text/javascript"></script>
@@ -389,7 +393,7 @@ <h2>Other Features</h2>
   </section>
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -507,7 +511,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -636,19 +640,19 @@ <h2>Javascript and CSS Source Code</h2>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Example 1: Simple List of Links</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
     <script>sourceCode.add('sc1', 'ex1')</script>
 
     <h3 id="sc2_label">Example 2: Pill List For Components Like a List of Message Recipients</h3>
     <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
-    <div id="sc2"></div>
+    <pre><code id="sc2"></code></pre>
     <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
     <script>sourceCode.add('sc2', 'ex2')</script>
 
     <h3 id="sc3_label">Example 3: Scrollable Search Results</h3>
     <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
-    <div id="sc3"></div>
+    <pre><code id="sc3"></code></pre>
     <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
     <script>sourceCode.add('sc3', 'ex3') </script>
     <!--  After all source has been added, run make to do the insert.  -->
diff --git a/examples/grid/advancedDataGrid.html b/examples/grid/advancedDataGrid.html
index 7ebb17cc37..0218e308f2 100644
--- a/examples/grid/advancedDataGrid.html
+++ b/examples/grid/advancedDataGrid.html
@@ -3,10 +3,13 @@
 <head>
 <meta charset="utf-8" />
 <title>Advanced Data Grid Example | WAI-ARIA Authoring Practices 1.1</title>
+
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 <script src="../js/utils.js" type="text/javascript"></script>
 <!--
   js and css for this example.
@@ -88,7 +91,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
       Update this table to describe how roles, properties, states, and tabindex are used in this example.
       If the content will vary significantly for the above implementations, make this a level 4 section inside each of the above level 3 implementation sections.
     -->
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th>Attribute</th>
@@ -137,7 +140,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/grid/dataGrids.html b/examples/grid/dataGrids.html
index d45586901f..04630bf335 100644
--- a/examples/grid/dataGrids.html
+++ b/examples/grid/dataGrids.html
@@ -5,9 +5,11 @@
 <title>Data Grid Examples | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 <script src="../js/utils.js" type="text/javascript"></script>
 
 <!--  js and css for this example. -->
@@ -45,7 +47,7 @@ <h3 id="ex1_label">Example 1: Minimal Data Grid</h3>
       <div role="separator" id="ex1_start_sep" aria-labelledby="ex1_start_sep ex1_label" aria-label="Start of"></div>
       <div id="ex1">
         <h4 id="grid1Label">Transactions January 1 through January 6</h4>
-        <table role="grid" aria-labelledby="grid1Label">
+        <table role="grid" aria-labelledby="grid1Label" class="data">
           <tr>
             <th>Date</th>
             <th>Type</th>
@@ -133,7 +135,7 @@ <h3 id="ex2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
       <div role="separator" id="ex2_start_sep" aria-labelledby="ex2_start_sep ex2_label" aria-label="Start of"></div>
       <div id="ex2">
         <h4 id="grid2Label">Transactions January 1 through January 7</h4>
-        <table role="grid" aria-labelledby="grid2Label">
+        <table role="grid" aria-labelledby="grid2Label" class="data">
           <tr>
             <th aria-sort="ascending">
               <span tabindex="-1" role="button">Date</span>
@@ -334,8 +336,7 @@ <h4 id="grid3Label">Transactions for January 1 through January 15</h4>
         <button id="toggle_column_btn" type="button" name="toggle_columns">Hide Type and
           Category</button>
         <table role="grid" aria-labelledby="grid3Label" aria-rowcount="16" aria-colcount="6"
-          data-per-page="5"
-        >
+          data-per-page="5" class="data">
           <tr data-fixed="true">
             <th>Date</th>
             <th>Type</th>
@@ -521,7 +522,7 @@ <h4>Notes</h4>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <tr>
         <th>key</th>
         <th>Function</th>
@@ -623,7 +624,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
 <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -803,23 +804,23 @@ <h2>Javascript and CSS Source Code</h2>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Example 1: Minimal Data Grid</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
     <script>sourceCode.add('sc1', 'ex1')</script>
 
     <h3 id="sc2_label">Example 2: Sortable Data Grid With Editable Cells</h3>
     <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
-    <div id="sc2"></div>
+    <pre><code id="sc2"></code></pre>
     <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
     <script>sourceCode.add('sc2', 'ex2')</script>
 
     <h3 id="sc3_label">Example 3: Scrollable Data Grid With Column Hiding</h3>
     <div id="sc3_start_sep" role="separator" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of HTML for"></div>
-    <div id="sc3"></div>
+    <pre><code id="sc3"></code></pre>
     <div id="sc3_end_sep" role="separator" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of HTML for"></div>
     <script>sourceCode.add('sc3', 'ex3') </script>
     <!--  After all source has been added, run make to do the insert.  -->
-    <script> sourceCode.make() </script>
+    <script> sourceCode.make(); </script>
   </section>
   </main>
   <nav>
diff --git a/examples/index.html b/examples/index.html
new file mode 100644
index 0000000000..f625b49559
--- /dev/null
+++ b/examples/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>List of all APG example pages</title>
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="css/core.css">
+</head>
+<body>
+  <h1>This page has a link to all current APG example pages. Internal use only (it’s probably already out of date).</h1>
+  <ol>
+    <li><a href="accordion/accordion1.html">Accordion</a></li>
+    <li><a href="alert/index.html">Alert</a></li>
+    <li><a href="breadcrumb/index.html">Breadcrumb</a></li>
+    <li><a href="button/button.html">Button</a></li>
+    <li>Checkbox
+      <ol>
+        <li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox 1</a></li>
+        <li><a href="checkbox/checkbox-2/checkbox-2.html">Checkbox 2</a></li>
+      </ol>
+    </li>
+    <li>Disclosure
+      <ol>
+        <li><a href="disclosure/disclosure-faq.html">Disclosure FAQ</a></li>
+        <li><a href="disclosure/disclosure-img-long-description.html">Disclosure long image description</a></li>
+      </ol>
+    </li>
+    <li><a href="feed/feed.html">Feed</a></li>
+    <li>Grid
+      <ul>
+        <li><a href="grid/advancedDataGrid.html">Advanced Data Grid</a></li>
+        <li><a href="grid/dataGrids.html">Data Grids</a></li>
+        <li><a href="grid/LayoutGrids.html">Layout Grids</a></li>
+      </ul>
+    </li>
+    <li><a href="link/link.html">Link</a></li>
+    <li><a href="listbox/listbox.html">Listbox</a></li>
+    <li>Menu button
+      <ul>
+        <li><a href="menu-button/menu-button-1/menu-button-1.html">Menu button 1</a></li>
+        <li><a href="menu-button/menu-button-2/menu-button-2.html">Menu button 2</a></li>
+      </ul>
+    </li>
+    <li>Menubar
+      <ul>
+        <li><a href="menubar/menubar-1/menubar-1.html">Menubar 1</a></li>
+        <li><a href="menubar/menubar-2/menubar-2.html">Menubar 2</a></li>
+      </ul>
+    </li>
+    <li>Radio
+      <ul>
+        <li><a href="radio/radio-1/radio-1.html">Radio 1</a></li>
+        <li><a href="radio/radio-2/radio-2.html">Radio 2</a></li>
+      </ul>
+    </li>
+    <li>Slider
+      <ul>
+        <li><a href="slider/slider-1.html">Slider 1</a></li>
+        <li><a href="slider/slider-2.html">Slider 2</a></li>
+      </ul>
+    </li>
+    <li>Tabs
+      <ul>
+        <li><a href="tabs/tabs-1/tabs.html">Tabs 1</a></li>
+        <li><a href="tabs/tabs-2/tabs.html">Tabs 2</a></li>
+      </ul>
+    </li>
+    <li><a href="toolbar/toolbar.html">Toolbar</a></li>
+    <li>Treeview
+      <ul>
+        <li><a href="treeview/treeview-1/treeview-1a.html">Treeview 1a</a></li>
+        <li><a href="treeview/treeview-1/treeview-1b.html">Treeview 1b</a></li>
+        <li><a href="treeview/treeview-2/treeview-2a.html">Treeview 2a</a></li>
+        <li><a href="treeview/treeview-2/treeview-2b.html">Treeview 2b</a></li>
+      </ul>
+    </li>
+  </ol>
+</body>
+</html>
diff --git a/examples/js/app.js b/examples/js/app.js
new file mode 100644
index 0000000000..f274ed25b1
--- /dev/null
+++ b/examples/js/app.js
@@ -0,0 +1,4 @@
+(function () {
+  // Load syntax highlighting
+  hljs.initHighlightingOnLoad();
+})();
diff --git a/examples/js/highlight.pack.js b/examples/js/highlight.pack.js
new file mode 100644
index 0000000000..21b82fb624
--- /dev/null
+++ b/examples/js/highlight.pack.js
@@ -0,0 +1,2 @@
+/*! highlight.js v9.9.0 | BSD3 License | git.io/hljslicense */
+!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/[&<>]/gm,function(e){return I[e]})}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function i(e){return k.test(e)}function a(e){var n,t,r,a,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=B.exec(o))return R(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(a=o[n],i(a)||R(a))return a}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,i){for(var a=e.firstChild;a;a=a.nextSibling)3===a.nodeType?i+=a.nodeValue.length:1===a.nodeType&&(n.push({event:"start",offset:i,node:a}),i=r(a,i),t(a).match(/br|hr|img|input/)||n.push({event:"stop",offset:i,node:a}));return i}(e,0),n}function c(e,r,i){function a(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset<r[0].offset?e:r:"start"===r[0].event?e:r:e.length?e:r}function o(e){function r(e){return" "+e.nodeName+'="'+n(e.value)+'"'}l+="<"+t(e)+w.map.call(e.attributes,r).join("")+">"}function u(e){l+="</"+t(e)+">"}function c(e){("start"===e.event?o:u)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=a();if(l+=n(i.substring(s,g[0].offset)),s=g[0].offset,g===e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=a();while(g===e&&g.length&&g[0].offset===s);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return l+n(i.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(i,a){if(!i.compiled){if(i.compiled=!0,i.k=i.k||i.bK,i.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof i.k?c("keyword",i.k):E(i.k).forEach(function(e){c(e,i.k[e])}),i.k=u}i.lR=t(i.l||/\w+/,!0),a&&(i.bK&&(i.b="\\b("+i.bK.split(" ").join("|")+")\\b"),i.b||(i.b=/\B|\b/),i.bR=t(i.b),i.e||i.eW||(i.e=/\B|\b/),i.e&&(i.eR=t(i.e)),i.tE=n(i.e)||"",i.eW&&a.tE&&(i.tE+=(i.e?"|":"")+a.tE)),i.i&&(i.iR=t(i.i)),null==i.r&&(i.r=1),i.c||(i.c=[]);var s=[];i.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"===e?i:e)}),i.c=s,i.c.forEach(function(e){r(e,i)}),i.starts&&r(i.starts,a);var l=i.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([i.tE,i.i]).map(n).filter(Boolean);i.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function l(e,t,i,a){function o(e,n){var t,i;for(t=0,i=n.c.length;i>t;t++)if(r(n.c[t].bR,e))return n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function c(e,n){return!i&&r(n.iR,e)}function g(e,n){var t=N.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function h(e,n,t,r){var i=r?"":y.classPrefix,a='<span class="'+i,o=t?"":C;return a+=e+'">',a+n+o}function p(){var e,t,r,i;if(!E.k)return n(B);for(i="",t=0,E.lR.lastIndex=0,r=E.lR.exec(B);r;)i+=n(B.substring(t,r.index)),e=g(E,r),e?(M+=e[1],i+=h(e[0],n(r[0]))):i+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(B);return i+n(B.substr(t))}function d(){var e="string"==typeof E.sL;if(e&&!x[E.sL])return n(B);var t=e?l(E.sL,B,!0,L[E.sL]):f(B,E.sL.length?E.sL:void 0);return E.r>0&&(M+=t.r),e&&(L[E.sL]=t.top),h(t.language,t.value,!1,!0)}function b(){k+=null!=E.sL?d():p(),B=""}function v(e){k+=e.cN?h(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function m(e,n){if(B+=e,null==n)return b(),0;var t=o(n,E);if(t)return t.skip?B+=n:(t.eB&&(B+=n),b(),t.rB||t.eB||(B=n)),v(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var i=E;i.skip?B+=n:(i.rE||i.eE||(B+=n),b(),i.eE&&(B=n));do E.cN&&(k+=C),E.skip||(M+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&v(r.starts,""),i.rE?0:n.length}if(c(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"<unnamed>")+'"');return B+=n,n.length||1}var N=R(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var w,E=a||N,L={},k="";for(w=E;w!==N;w=w.parent)w.cN&&(k=h(w.cN,"",!0)+k);var B="",M=0;try{for(var I,j,O=0;;){if(E.t.lastIndex=O,I=E.t.exec(t),!I)break;j=m(t.substring(O,I.index),I[0]),O=I.index+j}for(m(t.substr(O)),w=E;w.parent;w=w.parent)w.cN&&(k+=C);return{r:M,value:k,language:e,top:E}}catch(T){if(T.message&&-1!==T.message.indexOf("Illegal"))return{r:0,value:n(t)};throw T}}function f(e,t){t=t||y.languages||E(x);var r={r:0,value:n(e)},i=r;return t.filter(R).forEach(function(n){var t=l(n,e,!1);t.language=n,t.r>i.r&&(i=t),t.r>r.r&&(i=r,r=t)}),i.language&&(r.second_best=i),r}function g(e){return y.tabReplace||y.useBR?e.replace(M,function(e,n){return y.useBR&&"\n"===e?"<br>":y.tabReplace?n.replace(/\t/g,y.tabReplace):void 0}):e}function h(e,n,t){var r=n?L[n]:t,i=[e.trim()];return e.match(/\bhljs\b/)||i.push("hljs"),-1===e.indexOf(r)&&i.push(r),i.join(" ").trim()}function p(e){var n,t,r,o,s,p=a(e);i(p)||(y.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/<br[ \/]*>/g,"\n")):n=e,s=n.textContent,r=p?l(p,s,!0):f(s),t=u(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=c(t,u(o),s)),r.value=g(r.value),e.innerHTML=r.value,e.className=h(e.className,p,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function d(e){y=o(y,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");w.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=x[n]=t(e);r.aliases&&r.aliases.forEach(function(e){L[e]=n})}function N(){return E(x)}function R(e){return e=(e||"").toLowerCase(),x[e]||x[L[e]]}var w=[],E=Object.keys,x={},L={},k=/^(no-?highlight|plain|text)$/i,B=/\blang(?:uage)?-([\w-]+)\b/i,M=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,C="</span>",y={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},I={"&":"&amp;","<":"&lt;",">":"&gt;"};return e.highlight=l,e.highlightAuto=f,e.fixMarkup=g,e.highlightBlock=p,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=R,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var i=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return i.c.push(e.PWM),i.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),i},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/</,r:0,c:[{cN:"attr",b:e,r:0},{b:/=\s*/,r:0,c:[{cN:"string",endsParent:!0,v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s"'=<>`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("<!--","-->",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0}]},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{name:"style"},c:[t],starts:{e:"</style>",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{name:"script"},c:[t],starts:{e:"</script>",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"meta",v:[{b:/<\?xml/,e:/\?>/,r:10},{b:/<\?\w+/,e:/\?>/}]},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",t={b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{eW:!0,eE:!0,c:[{b:/[\w-]+\(/,rB:!0,c:[{cN:"built_in",b:/[\w-]+/},{b:/\(/,e:/\)/,c:[e.ASM,e.QSM]}]},e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"number",b:"#[0-9A-Fa-f]+"},{cN:"meta",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"selector-id",b:/#[A-Za-z0-9_-]+/},{cN:"selector-class",b:/\.[A-Za-z0-9_-]+/},{cN:"selector-attr",b:/\[/,e:/\]/,i:"$"},{cN:"selector-pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"'.]+/},{b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{b:"@",e:"[{;]",i:/:/,c:[{cN:"keyword",b:/\w+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[e.ASM,e.QSM,e.CSSNM]}]},{cN:"selector-tag",b:c,r:0},{b:"{",e:"}",i:/\S/,c:[e.CBCM,t]}]}});hljs.registerLanguage("json",function(e){var i={literal:"true false null"},n=[e.QSM,e.CNM],r={e:",",eW:!0,eE:!0,c:n,k:i},t={b:"{",e:"}",c:[{cN:"attr",b:/"/,e:/"/,c:[e.BE],i:"\\n"},e.inherit(r,{b:/:/})],i:"\\S"},c={b:"\\[",e:"\\]",c:[e.inherit(r)],i:"\\S"};return n.splice(n.length,0,t,c),{c:n,k:i,i:"\\S"}});hljs.registerLanguage("javascript",function(e){var r="[A-Za-z$_][0-9A-Za-z$_]*",t={keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},a={cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},n={cN:"subst",b:"\\$\\{",e:"\\}",k:t,c:[]},c={cN:"string",b:"`",e:"`",c:[e.BE,n]};n.c=[e.ASM,e.QSM,c,a,e.RM];var s=n.c.concat([e.CBCM,e.CLCM]);return{aliases:["js","jsx"],k:t,c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,c,e.CLCM,e.CBCM,a,{b:/[{,]\s*/,r:0,c:[{b:r+"\\s*:",rB:!0,r:0,c:[{cN:"attr",b:r,r:0}]}]},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{cN:"function",b:"(\\(.*?\\)|"+r+")\\s*=>",rB:!0,e:"\\s*=>",c:[{cN:"params",v:[{b:r},{b:/\(\s*\)/},{b:/\(/,e:/\)/,eB:!0,eE:!0,k:t,c:s}]}]},{b:/</,e:/(\/\w+|\w+\/)>/,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:[{b:/<\w+\s*\/>/,skip:!0},"self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:r}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:s}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}});
\ No newline at end of file
diff --git a/examples/link/link.html b/examples/link/link.html
index 84a065b96a..3d7b43e35b 100644
--- a/examples/link/link.html
+++ b/examples/link/link.html
@@ -6,9 +6,11 @@
 <title>Link Examples | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/link.css" rel="stylesheet">
@@ -33,7 +35,7 @@ <h1>Link Examples</h1>
   <section>
     <h2 id="ex_label">Examples</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-    <table>
+    <table class="data">
       <thead>
         <tr>
           <th>Number</th>
@@ -99,7 +101,7 @@ <h2 id="ex_label">Examples</h2>
   </section>
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
-    <table aria-labelledby="kbd_label">
+    <table aria-labelledby="kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -119,7 +121,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -184,15 +186,15 @@ <h2>Javascript and CSS Source Code</h2>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Link 1</h3>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
     <h3 id="sc2_label">Link 2</h3>
     <div role="separator" id="sc2_start_sep" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of"></div>
-    <div id="sc2"></div>
+    <pre><code id="sc2"></code></pre>
     <div role="separator" id="sc2_end_sep" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of"></div>
     <h3 id="sc3_label">Link 3</h3>
     <div role="separator" id="sc3_start_sep" aria-labelledby="sc3_start_sep sc3_label" aria-label="Start of"></div>
-    <div id="sc3"></div>
+    <pre><code id="sc3"></code></pre>
     <div role="separator" id="sc3_end_sep" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of"></div>
     <script>
       sourceCode.add('sc1', 'ex1');
diff --git a/examples/listbox/listbox.html b/examples/listbox/listbox.html
index 4791df95ce..4ac39e8496 100644
--- a/examples/listbox/listbox.html
+++ b/examples/listbox/listbox.html
@@ -5,9 +5,11 @@
 <title>Listbox Example | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 <script src="../js/utils.js" type="text/javascript"></script>
 
 <link href="css/listbox.css" rel="stylesheet">
@@ -234,7 +236,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th>Attribute</th>
@@ -328,12 +330,12 @@ <h2>Javascript and CSS Source Code</h2>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Example 1: Single-Select Listbox</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for"></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for"></div>
     <script>sourceCode.add('sc1', 'ex1')</script>
     <h3 id="sc2_label">Example 2: Multi-Select Listbox</h3>
     <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for"></div>
-    <div id="sc2"></div>
+    <pre><code id="sc2"></code></pre>
     <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for"></div>
     <script>sourceCode.add('sc2', 'ex2')</script>
     <!--  After all source has been added, run make to do the insert.  -->
diff --git a/examples/menu-button/menu-button-1/menu-button-1.html b/examples/menu-button/menu-button-1/menu-button-1.html
index 22d3ad98e5..beee9cf72f 100644
--- a/examples/menu-button/menu-button-1/menu-button-1.html
+++ b/examples/menu-button/menu-button-1/menu-button-1.html
@@ -3,11 +3,14 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>Menu Button Example: Actions | WAI-ARIA Authoring Practices 1.1</title>
 
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
-    <link href="css/menuButtonAction.css" rel="stylesheet">
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
-    <script src="../../js/examples.js" type="text/javascript"></script>
+    <link href="css/menuButtonAction.css" rel="stylesheet">
     <script src="js/Menubutton.js" type="text/javascript"></script>
     <script src="js/MenuItemAction.js" type="text/javascript"></script>
     <script src="js/PopupMenuAction.js" type="text/javascript"></script>
@@ -80,7 +83,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
         <h3 id="kbd1_label">Menu Button</h3>
 
-        <table aria-labelledby="kbd1_label kbd_label">
+        <table aria-labelledby="kbd1_label kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -101,7 +104,7 @@ <h3 id="kbd1_label">Menu Button</h3>
 
          <h3 id="kbd2_label" class="widget">Popup Menu Widget</h3>
 
-        <table aria-labelledby="kbd2_label kbd_label">
+        <table aria-labelledby="kbd2_label kbd_label" class="def">
           <thead>
             <tr>
               <th style="min-width: 8em">Key</th>
@@ -180,7 +183,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
         <h3 id="rps1_label">Menu Button Widget</h3>
 
-        <table aria-labelledby="rps1_label rps_label">
+        <table aria-labelledby="rps1_label rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -259,7 +262,7 @@ <h3 id="rps1_label">Menu Button Widget</h3>
 
         <h3 id="rps2_label">Popup Menu</h3>
 
-        <table aria-labelledby="rps2_label rps_label">
+        <table aria-labelledby="rps2_label rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -347,7 +350,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <!--
           The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/menu-button/menu-button-2/menu-button-2.html b/examples/menu-button/menu-button-2/menu-button-2.html
index 0df6aab894..392da007d8 100644
--- a/examples/menu-button/menu-button-2/menu-button-2.html
+++ b/examples/menu-button/menu-button-2/menu-button-2.html
@@ -3,10 +3,12 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>Menu Button Example: Links | WAI-ARIA Authoring Practices 1.1</title>
 
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
-
-    <script src="../../js/examples.js" type="text/javascript"></script>
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <link href="css/MenubuttonLinks.css" rel="stylesheet">
 
@@ -97,7 +99,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
         <h3 id="kbd1_label">Menu Button</h3>
 
-        <table aria-labelledby="kbd1_label kbd_label">
+        <table aria-labelledby="kbd1_label kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -118,7 +120,7 @@ <h3 id="kbd1_label">Menu Button</h3>
 
          <h3 id="kbd2_label" class="widget">Popup Menu</h3>
 
-        <table aria-labelledby="kbd2_label kbd_label">
+        <table aria-labelledby="kbd2_label kbd_label" class="def">
           <thead>
             <tr>
               <th style="min-width: 8em">Key</th>
@@ -195,7 +197,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
         <h3 id="rps1_label">Menu Button Widget</h3>
 
-        <table aria-labelledby="rps1_label rps_label">
+        <table aria-labelledby="rps1_label rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -288,7 +290,7 @@ <h3 id="rps1_label">Menu Button Widget</h3>
 
         <h3 id="rps2_label">Popup Menu Widget</h3>
 
-        <table aria-labelledby="rps2_label rps_label">
+        <table aria-labelledby="rps2_label rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -391,7 +393,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <!--
           The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/menubar/menubar-1/menubar-1.html b/examples/menubar/menubar-1/menubar-1.html
index d1bfa8ed03..50b151cdd4 100644
--- a/examples/menubar/menubar-1/menubar-1.html
+++ b/examples/menubar/menubar-1/menubar-1.html
@@ -3,9 +3,14 @@
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>Navigation Menubar Example | WAI-ARIA Authoring Practices 1.1</title>
-<link href="../../css/core.css" rel="stylesheet">
-<link href="../../css/table.css" rel="stylesheet">
-<script src="../../js/examples.js" type="text/javascript"></script>
+
+<!--  Core js and css shared by all examples; do not modify when using this template. -->
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../../css/core.css">
+<script src="../../js/examples.js"></script>
+<script src="../../js/highlight.pack.js"></script>
+<script src="../../js/app.js"></script>
+
 <script src="js/MenubarLinks.js" type="text/javascript"></script>
 <script src="js/MenubarItemLinks.js" type="text/javascript"></script>
 <script src="js/PopupMenuLinks.js" type="text/javascript"></script>
@@ -244,7 +249,7 @@ <h4>Notes</h4>
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>
     <h3 id="kbd1_label">Menubar</h3>
-    <table aria-labelledby="kbd1_label kbd_label">
+    <table aria-labelledby="kbd1_label kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -253,9 +258,9 @@ <h3 id="kbd1_label">Menubar</h3>
       </thead>
       <tbody>
         <tr>
-          <td>
+          <th>
             <kbd>Space or Enter</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Open or Close popup menu (e.g. toggle).</li>
@@ -263,9 +268,9 @@ <h3 id="kbd1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Left Arrow</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to previous menubar menu item.</li>
@@ -275,9 +280,9 @@ <h3 id="kbd1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Right Arrow</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to next menubar menu item.</li>
@@ -287,9 +292,9 @@ <h3 id="kbd1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Down Arrow</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Open popup menu.</li>
@@ -298,9 +303,9 @@ <h3 id="kbd1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Up Arrow </kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Open popup menu.</li>
@@ -309,9 +314,9 @@ <h3 id="kbd1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Home</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to first menubar menu item.</li>
@@ -319,9 +324,9 @@ <h3 id="kbd1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>End</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to last menubar menu item.</li>
@@ -329,9 +334,9 @@ <h3 id="kbd1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Character</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to next menubar item that starts with that letter.</li>
@@ -343,7 +348,7 @@ <h3 id="kbd1_label">Menubar</h3>
     </table>
 
     <h3 id="kbd2_label">Popup Menu</h3>
-    <table aria-labelledby="kbd2_label kbd_label">
+    <table aria-labelledby="kbd2_label kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -352,9 +357,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
       </thead>
       <tbody>
         <tr>
-          <td>
+          <th>
             <kbd>Space or Enter</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Follow link.</li>
@@ -364,9 +369,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Escape</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Closes popup menu.</li>
@@ -375,9 +380,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Left Arrow</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Closes popup menu.</li>
@@ -387,9 +392,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Right Arrow</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Closes popup menu.</li>
@@ -399,9 +404,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Up Arrow</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to previous popup menu item.</li>
@@ -410,9 +415,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Down Arrow</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to next popup menu item.</li>
@@ -421,9 +426,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Home</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to first popup menu item.</li>
@@ -431,9 +436,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>End</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to last popup menu item.</li>
@@ -441,9 +446,9 @@ <h3 id="kbd2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <kbd>Character</kbd>
-          </td>
+          </th>
           <td>
             <ul>
               <li>Moves focus to the next popup item that starts with that letter.</li>
@@ -459,7 +464,7 @@ <h3 id="kbd2_label">Popup Menu</h3>
     <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
     <h3 id="rps1_label">Menubar</h3>
 
-    <table aria-labelledby="rps1_label rps_label">
+    <table aria-labelledby="rps1_label rps_label" class="data attributes">
       <thead>
         <tr>
           <th>Role</th>
@@ -470,9 +475,9 @@ <h3 id="rps1_label">Menubar</h3>
       </thead>
       <tbody>
         <tr>
-          <td>
+          <th>
             <code>menubar</code>
-          </td>
+          </th>
           <td></td>
           <td>
             <code>ul</code>
@@ -492,10 +497,10 @@ <h3 id="rps1_label">Menubar</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>aria-label=&quot;<em>string</em>&quot;
             </code>
-          </td>
+          </th>
           <td>
             <code>ul</code>
           </td>
@@ -508,9 +513,9 @@ <h3 id="rps1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <code>menuitem</code>
-          </td>
+          </th>
           <td></td>
           <td>
             <code>a</code>
@@ -527,9 +532,9 @@ <h3 id="rps1_label">Menubar</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>tabindex=&quot;-1&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -544,9 +549,9 @@ <h3 id="rps1_label">Menubar</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>tabindex=&quot;0&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -573,9 +578,9 @@ <h3 id="rps1_label">Menubar</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>aria-haspopup=&quot;true&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -588,9 +593,9 @@ <h3 id="rps1_label">Menubar</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>aria-expanded=&quot;true&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -602,9 +607,9 @@ <h3 id="rps1_label">Menubar</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>aria-expanded=&quot;false&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -615,9 +620,9 @@ <h3 id="rps1_label">Menubar</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <code>none</code>
-          </td>
+          </th>
           <td></td>
           <td>
             <code>li</code>
@@ -633,7 +638,7 @@ <h3 id="rps1_label">Menubar</h3>
     </table>
 
     <h3 id="rps2_label">Popup Menu</h3>
-    <table aria-labelledby="rps2_label rps_label">
+    <table aria-labelledby="rps2_label rps_label" class="data attributes">
       <thead>
         <tr>
           <th>Role</th>
@@ -644,9 +649,9 @@ <h3 id="rps2_label">Popup Menu</h3>
       </thead>
       <tbody>
         <tr>
-          <td>
+          <th>
             <code>menu</code>
-          </td>
+          </th>
           <td></td>
           <td>
             <code>ul</code>
@@ -666,10 +671,10 @@ <h3 id="rps2_label">Popup Menu</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>aria-label=&quot;<em>string</em>&quot;
             </code>
-          </td>
+          </th>
           <td>
             <code>ul</code>
           </td>
@@ -682,9 +687,9 @@ <h3 id="rps2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <code>menuitem</code>
-          </td>
+          </th>
           <td></td>
           <td>
             <code>a</code>
@@ -701,9 +706,9 @@ <h3 id="rps2_label">Popup Menu</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>tabindex=&quot;-1&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -718,9 +723,9 @@ <h3 id="rps2_label">Popup Menu</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>aria-haspopup=&quot;true&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -733,9 +738,9 @@ <h3 id="rps2_label">Popup Menu</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>aria-expanded=&quot;true&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -747,9 +752,9 @@ <h3 id="rps2_label">Popup Menu</h3>
         </tr>
         <tr>
           <td></td>
-          <td>
+          <th>
             <code>aria-expanded=&quot;false&quot;</code>
-          </td>
+          </th>
           <td>
             <code>a</code>
           </td>
@@ -760,9 +765,9 @@ <h3 id="rps2_label">Popup Menu</h3>
           </td>
         </tr>
         <tr>
-          <td>
+          <th>
             <code>none</code>
-          </td>
+          </th>
           <td></td>
           <td>
             <code>li</code>
@@ -804,14 +809,14 @@ <h2>Javascript and CSS Source Code</h2>
     <h2>HTML Source Code</h2>
     <h3 id="sc1_label">Example 1: Menubar With ARIA Markup in the HTML Source</h3>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for" ></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for" ></div>
     <script>
             sourceCode.add('sc1', 'ex1')
             </script>
     <h3 id="sc2_label">Example 2: ARIA markup added dynamically</h3>
     <div id="sc2_start_sep" role="separator" aria-labelledby="sc2_start_sep sc2_label" aria-label="Start of HTML for" ></div>
-    <div id="sc2"></div>
+    <pre><code id="sc2"></code></pre>
     <div id="sc2_end_sep" role="separator" aria-labelledby="sc2_end_sep sc2_label" aria-label="End of HTML for" ></div>
     <script>
             sourceCode.add('sc2', 'ex2')
diff --git a/examples/menubar/menubar-2/menubar-2.html b/examples/menubar/menubar-2/menubar-2.html
index 321f2636ec..223eb4e9d9 100644
--- a/examples/menubar/menubar-2/menubar-2.html
+++ b/examples/menubar/menubar-2/menubar-2.html
@@ -4,12 +4,15 @@
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <title>Editor Menubar Example | WAI-ARIA Authoring Practices 1.1</title>
 
-  <link href="../../css/core.css"  rel="stylesheet">
-  <link href="../../css/table.css" rel="stylesheet">
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../../css/core.css">
+  <script src="../../js/examples.js"></script>
+  <script src="../../js/highlight.pack.js"></script>
+  <script src="../../js/app.js"></script>
 
   <link href="css/menubarAction.css" rel="stylesheet">
 
-  <script src="../../js/examples.js" type="text/javascript"></script>
   <script src="js/TextStyling.js"    type="text/javascript"></script>
 
   <script src="js/MenubarAction.js"     type="text/javascript"></script>
@@ -153,7 +156,7 @@ <h4>Notes</h4>
     <h2 id="kbd_label">Keyboard Support</h2>
 
     <h3 id="kbd1_label">Menubar</h3>
-    <table aria-labelledby="kbd1_label kbd_label">
+    <table aria-labelledby="kbd1_label kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -228,7 +231,7 @@ <h3 id="kbd1_label">Menubar</h3>
     </table>
 
     <h3 id="kbd2_label">Popup</h3>
-    <table aria-labelledby="kbd2_label kbd_label">
+    <table aria-labelledby="kbd2_label kbd_label" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -330,7 +333,7 @@ <h3 id="kbd2_label">Popup</h3>
       <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
 
       <h3 id="rps1_label">Menubar</h3>
-      <table aria-labelledby="rps1_label rps_label">
+      <table aria-labelledby="rps1_label rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
@@ -485,7 +488,7 @@ <h3 id="rps1_label">Menubar</h3>
       </table>
 
       <h3 id="rps2_label">Popup Menu</h3>
-      <table aria-labelledby="rps2_label rps_label">
+      <table aria-labelledby="rps2_label rps_label" class="data attributes">
       <thead>
         <tr>
           <th scope="col">Role</th>
@@ -745,7 +748,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div id="sc1_start_sep" role="separator" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of" ></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div id="sc1_end_sep" role="separator" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of" ></div>
     <script>
 sourceCode.add('sc1', 'ex1');
diff --git a/examples/presentation/PresentationRoleExamples.html b/examples/presentation/PresentationRoleExamples.html
index d846ad4ab6..e0cfcac58d 100644
--- a/examples/presentation/PresentationRoleExamples.html
+++ b/examples/presentation/PresentationRoleExamples.html
@@ -5,9 +5,11 @@
 <title>Presentation Role Examples | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 </head>
 <body>
   <main>
diff --git a/examples/radio/radio-1/radio-1.html b/examples/radio/radio-1/radio-1.html
index 34250b39ae..d05569f0e9 100644
--- a/examples/radio/radio-1/radio-1.html
+++ b/examples/radio/radio-1/radio-1.html
@@ -3,14 +3,17 @@
   <head>
     <meta charset="utf-8" />
     <title>Radio Button Example | WAI-ARIA Authoring Practices 1.1</title>
-    <meta name="generator" content="BBEdit 10.5" />
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
-    <link href="css/radio.css" rel="stylesheet">
 
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
+
+    <link rel="stylesheet" href="css/radio.css">
     <script src="js/radioGroup.js" type="text/javascript"></script>
     <script src="js/radioButton.js" type="text/javascript"></script>
-    <script src="../../js/examples.js" type="text/javascript"></script>
 
   </head>
   <body>
@@ -33,17 +36,17 @@ <h2 id="example_label">Example Start</h2>
         <div  role="radiogroup" aria-labelledby="group_label_1" id="rg1">
             <h3 id="group_label_1">Pizza Crust</h3>
 
-            <div role="radio" 
+            <div role="radio"
                 aria-checked="false"
                 tabindex="0">
               Regular crust
            </div>
-           <div role="radio" 
+           <div role="radio"
                 aria-checked="false"
                 tabindex="-1">
               Deep dish
            </div>
-           <div role="radio" 
+           <div role="radio"
                 aria-checked="false"
                 tabindex="-1">
               Thin crust
@@ -52,19 +55,19 @@ <h3 id="group_label_1">Pizza Crust</h3>
 
         <div  role="radiogroup" aria-labelledby="group_label_2" id="rg2">
             <h3 id="group_label_2">Pizza Delivery</h3>
-            <div role="radio" 
+            <div role="radio"
                 aria-checked="false"
                 tabindex="0">
               Pickup
             </div>
-           
-            <div role="radio" 
+
+            <div role="radio"
                 aria-checked="false"
                 tabindex="-1">
               Home Delivery
             </div>
-           
-            <div role="radio" 
+
+            <div role="radio"
                 aria-checked="false"
                 tabindex="-1">
             Dine in
@@ -92,7 +95,7 @@ <h3>Implementation Notes</h3>
 
       <h3 id="kbd_label">Keyboard Support</h3>
 
-      <table aria-labelledby="kbd_label">
+      <table aria-labelledby="kbd_label" class="def">
         <thead>
           <tr>
             <th>Key</th>
@@ -140,7 +143,7 @@ <h3 id="kbd_label">Keyboard Support</h3>
 
       <h3 id="rps_label">ARIA Roles, Properties and States</h3>
 
-      <table aria-labelledby="rps_label">
+      <table aria-labelledby="rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
@@ -249,7 +252,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <!--
           The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/radio/radio-2/radio-2.html b/examples/radio/radio-2/radio-2.html
index d8cc1b9def..d3161543ab 100644
--- a/examples/radio/radio-2/radio-2.html
+++ b/examples/radio/radio-2/radio-2.html
@@ -4,16 +4,18 @@
     <meta charset="utf-8" />
     <title>Radio Button Example (aria-activedescendant) | WAI-ARIA Authoring Practices 1.1</title>
 
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <link href="css/radioActiveDescendant.css" rel="stylesheet">
 
     <script src="js/radioGroupActiveDescendant.js" type="text/javascript"></script>
     <script src="js/radioButtonActiveDescendant.js" type="text/javascript"></script>
 
-    <script src="../../js/examples.js" type="text/javascript"></script>
-
   </head>
   <body>
     <main role="main">
@@ -103,7 +105,7 @@ <h3>Implementation Notes</h3>
 
 
       <h3 id="kbd_label">Keyboard Support</h3>
-      <table aria-labelledby="kbd_label">
+      <table aria-labelledby="kbd_label" class="def">
         <thead>
           <tr>
             <th>Key</th>
@@ -152,7 +154,7 @@ <h3 id="kbd_label">Keyboard Support</h3>
 
     <h3 id="rps_label">ARIA Roles, Properties and States</h3>
 
-      <table aria-labelledby="rps_label">
+      <table aria-labelledby="rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
@@ -272,7 +274,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <!--
           The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/slider/slider-1.html b/examples/slider/slider-1.html
index 23d6ee114f..2348955106 100644
--- a/examples/slider/slider-1.html
+++ b/examples/slider/slider-1.html
@@ -3,9 +3,14 @@
 <head>
   <meta charset="utf-8" />
   <title>ARIA Example: Horizontal Sliders using aria-valuenow</title>
-  <meta name="generator" content="BBEdit 10.5" />
-  <link href="../css/core.css" rel="stylesheet">
-  <link href="../css/table.css" rel="stylesheet">
+
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../css/core.css">
+  <script src="../js/examples.js"></script>
+  <script src="../js/highlight.pack.js"></script>
+  <script src="../js/app.js"></script>
+
   <link href="css/slider.css" rel="stylesheet">
   <style type="text/css">
     #idColorBox {
@@ -30,7 +35,7 @@ <h1>ARIA Example: Horizontal Sliders using <code>aria-valuenow</code></h1>
 
     <h1>Color Picker Using Slider Widgets</h1>
     <p>
-      This example page needs updates as described in 
+      This example page needs updates as described in
       <a href="https://github.com/w3c/aria-practices/issues/229">issue 229.</a>
     </p>
     <p>Change sliders to update the background color of box (note: the box is visually left of the 3 slider controls), with the HEX color value in a form control.</p>
@@ -93,7 +98,7 @@ <h2>Color Box</h2>
 
     <h2 id="id_kbd">Keyboard Support</h2>
 
-    <table aria-labelledby="id_kbd">
+    <table aria-labelledby="id_kbd" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -130,7 +135,7 @@ <h2 id="id_kbd">Keyboard Support</h2>
 
     <h2 id="id_rps">ARIA Roles, Properties and States</h2>
 
-    <table aria-labelledby="id_rps">
+    <table aria-labelledby="id_rps" class="data attributes">
       <thead>
         <tr>
           <th>Role</th>
@@ -141,32 +146,32 @@ <h2 id="id_rps">ARIA Roles, Properties and States</h2>
       </thead>
       <tbody>
         <tr>
-          <td>slider</td>
+          <th>slider</th>
           <td></td>
           <td>thumb</td>
           <td>Identify the widget as a slider</td>
         </tr>
         <tr>
           <td></td>
-          <td>aria-valuemax</td>
+          <th>aria-valuemax</th>
           <td>thumb</td>
           <td>Maximum value of the slider</td>
         </tr>
         <tr>
           <td></td>
-          <td>aria-valuemin</td>
+          <th>aria-valuemin</th>
           <td>thumb</td>
           <td>Minimum value of the slider</td>
         </tr>
         <tr>
           <td></td>
-          <td>aria-valuenow</td>
+          <th>aria-valuenow</th>
           <td>thumb</td>
           <td>Current value of the slider</td>
         </tr>
         <tr>
           <td></td>
-          <td>aria-labelledby</td>
+          <th>aria-labelledby</th>
           <td>thumb</td>
           <td>Reference to define a unique descriptive <em>accessible name</em> for each slider widget</td>
         </tr>
@@ -183,14 +188,12 @@ <h2>Source Code</h2>
       <li>Javascript: <a href="js/slider.js" type="text/javascript">slider.js</a></li>
     </ul>
 
-    <div id="sc1">
-
-    </div>
+    <pre><code id="sc1"></code></pre>
 
 
     <script>
-      sourceCode.add('sc1', 'example1')
-      sourceCode.make()
+      sourceCode.add('sc1', 'example1');
+      sourceCode.make();
     </script>
 
   </main>
diff --git a/examples/slider/slider-2.html b/examples/slider/slider-2.html
index 8eac3870a9..00286127d7 100644
--- a/examples/slider/slider-2.html
+++ b/examples/slider/slider-2.html
@@ -3,9 +3,14 @@
 <head>
   <meta charset="utf-8" />
   <title>ARIA Example: Vertical Sider and Sliders using aria-valuetext</title>
-  <meta name="generator" content="BBEdit 10.5" />
-  <link href="../css/core.css" rel="stylesheet">
-  <link href="../css/table.css" rel="stylesheet">
+
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../css/core.css">
+  <script src="../js/examples.js"></script>
+  <script src="../js/highlight.pack.js"></script>
+  <script src="../js/app.js"></script>
+
   <link href="css/vertical-slider.css" rel="stylesheet">
   <link href="css/text-slider.css" rel="stylesheet">
 </head>
@@ -16,7 +21,7 @@ <h1>ARIA Example: Vertical Sider and Sliders using <code>aria-valuetext</code></
   <main>
     <h1>Thermostat Controls using ARIA Sliders</h1>
     <p>
-      This example needs revisions as described in 
+      This example needs revisions as described in
       <a href="https://github.com/w3c/aria-practices/issues/230">issue 230.</a>
     </p>
     <p>Change sliders to set values for setting a vertical temperature, fan speed and heat/air conditioning.  The examples also use <code>aria-valuetext</code> property.</p>
@@ -89,7 +94,7 @@ <h2>Slider Examples using using <code>aria-valuetext</code></h2>
 
     <h2 id="id_kbd" style="clear: both;">Keyboard Support</h2>
 
-    <table aria-labelledby="id_kbd">
+    <table aria-labelledby="id_kbd" class="def">
       <thead>
         <tr>
           <th>Key</th>
@@ -126,7 +131,7 @@ <h2 id="id_kbd" style="clear: both;">Keyboard Support</h2>
 
     <h2 id="id_rps">ARIA Roles, Properties and States</h2>
 
-    <table aria-labelledby="id_rps">
+    <table aria-labelledby="id_rps" class="data attributes">
       <thead>
         <tr>
           <th>Role</th>
@@ -193,9 +198,7 @@ <h3>Temperature Slider</h3>
       <li>Javascript: <a href="js/vertical-slider.js" type="text/javascript">vertical-slider.js</a></li>
     </ul>
 
-    <div id="sc1">
-
-    </div>
+    <pre><code id="sc1"></code></pre>
 
     <h3>Fan/Heat Sliders</h3>
 
@@ -204,14 +207,12 @@ <h3>Fan/Heat Sliders</h3>
       <li>Javascript: <a href="js/text-slider.js" type="text/javascript">text-slider.js</a></li>
     </ul>
 
-    <div id="sc2">
-
-    </div>
+    <pre><code id="sc2"></code></pre>
 
     <script>
       console.log(sourceCode)
-      sourceCode.add('sc1', 'example1')
-      sourceCode.add('sc2', 'example2')
+      sourceCode.add('sc1', 'example1');
+      sourceCode.add('sc2', 'example2');
       sourceCode.make()
 
     </script>
diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css
index 8bdaba2c7b..a34d7b07bd 100644
--- a/examples/tabs/css/tabs.css
+++ b/examples/tabs/css/tabs.css
@@ -1,5 +1,4 @@
 .tabs {
-  margin-top: 2em;
   width: 20em;
   font-family: "lucida grande", sans-serif;
 }
diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html
index a899672ff8..049512c497 100644
--- a/examples/tabs/tabs-1/tabs.html
+++ b/examples/tabs/tabs-1/tabs.html
@@ -5,9 +5,11 @@
     <title>Tabs With Automatic Activation | WAI-ARIA Authoring Practices 1.1</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
-    <script src="../../js/examples.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <!--  js and css for this example. -->
     <link href="../css/tabs.css" rel="stylesheet">
@@ -15,6 +17,7 @@
   <body>
     <main>
       <h1>Tabs With Automatic Activation</h1>
+
       <p>
         Provide feedback on updates to this page in
         <a href="https://github.com/w3c/aria-practices/issues/278">issue 278.</a>
@@ -68,7 +71,7 @@ <h2>Accessibility Features</h2>
 
       <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label">
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -123,7 +126,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
       <section>
         <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-        <table aria-labelledby="rps_label">
+        <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -301,7 +304,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
           sourceCode.add('sc1', 'ex1');
@@ -316,7 +319,6 @@ <h2 id="sc1_label">HTML Source Code</h2>
       <a href="../../../#tabpanel">Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
     </nav>
 
-    <script src="js/tabs.js" type="text/javascript"></script>
-
+    <script src="js/tabs.js"></script>
   </body>
 </html>
diff --git a/examples/tabs/tabs-2/tabs.html b/examples/tabs/tabs-2/tabs.html
index 149e86acb2..928803b054 100644
--- a/examples/tabs/tabs-2/tabs.html
+++ b/examples/tabs/tabs-2/tabs.html
@@ -5,9 +5,11 @@
     <title>Tabs With Manual Activation | WAI-ARIA Authoring Practices 1.1</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
-    <script src="../../js/examples.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <!--  js and css for this example. -->
     <link href="../css/tabs.css" rel="stylesheet">
@@ -68,7 +70,7 @@ <h2>Accessibility Features</h2>
 
       <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label">
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -129,7 +131,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
       <section>
         <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-        <table aria-labelledby="rps_label">
+        <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -304,7 +306,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
           sourceCode.add('sc1', 'ex1');
diff --git a/examples/toolbar/toolbar.html b/examples/toolbar/toolbar.html
index d1c1563c5a..6973c2b1fe 100644
--- a/examples/toolbar/toolbar.html
+++ b/examples/toolbar/toolbar.html
@@ -5,10 +5,13 @@
 <title>Toolbar Example | WAI-ARIA Authoring Practices 1.1</title>
 
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
-<link href="../css/core.css" rel="stylesheet">
-<link href="../css/table.css" rel="stylesheet">
-<script src="../js/examples.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+<link rel="stylesheet" href="../css/core.css">
+<script src="../js/examples.js"></script>
+<script src="../js/highlight.pack.js"></script>
+<script src="../js/app.js"></script>
 <script src="../js/utils.js" type="text/javascript"></script>
+
 <!--  js and css for this example. -->
 <link href="css/menuButton.css" rel="stylesheet">
 <script src="js/menuButton.js" type="text/javascript"></script>
@@ -21,7 +24,7 @@
   <h1>Toolbar Example</h1>
   <p>
     <strong>NOTE:</strong> This example is not yet complete.
-    When it is ready for review, feedback will be welcom in
+    When it is ready for review, feedback will be welcome in
     <a href="https://github.com/w3c/aria-practices/issues/126">issue 126.</a>
   </p>
   <p>
@@ -100,7 +103,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-    <table aria-labelledby="rps_label">
+    <table aria-labelledby="rps_label" class="data attributes">
       <thead>
         <tr>
           <th>Attribute</th>
@@ -153,7 +156,7 @@ <h2>Javascript and CSS Source Code</h2>
   <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of HTML for "></div>
-    <div id="sc1"></div>
+    <pre><code id="sc1"></code></pre>
     <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of HTML for "></div>
     <!--
       The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
diff --git a/examples/treeview/treeview-1/treeview-1a.html b/examples/treeview/treeview-1/treeview-1a.html
index a730847e44..3da5d91376 100644
--- a/examples/treeview/treeview-1/treeview-1a.html
+++ b/examples/treeview/treeview-1/treeview-1a.html
@@ -4,8 +4,12 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>File Directory Treeview Example Using Computed Properties | WAI-ARIA Authoring Practices 1.1</title>
 
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <link href="css/tree.css" rel="stylesheet">
 
@@ -13,29 +17,27 @@
     <script type="text/javascript" src="js/treeitem.js"></script>
     <script type="text/javascript" src="js/treeitemClick.js"></script>
 
-    <script src="../../js/examples.js" type="text/javascript"></script>
-
   </head>
 
   <body>
     <main>
       <h1>File Directory Treeview Example Using Computed Properties</h1>
       <p>
-        Code is complete for this example. 
-        Feedback and progress on editorial work on this page are being tracked in 
+        Code is complete for this example.
+        Feedback and progress on editorial work on this page are being tracked in
         <a href="https://github.com/w3c/aria-practices/issues/223">issue 223.</a>
       </p>
       <p>
-        The below example implements the 
-        <a href="../../../#TreeView">Treeview Design Pattern</a> 
-        to simulate a file selector.  
+        The below example implements the
+        <a href="../../../#TreeView">Treeview Design Pattern</a>
+        to simulate a file selector.
         When users activate an item that represents a file name in the below tree, the name of the selected file appears in the read-only edit field next to the tree.
       </p>
       <p>
-        This example relies on the browser to compute values for <code>aria-setsize</code>, <code>aria-posinset</code>, and <code>aria-level</code>.   
-        The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute their values. 
+        This example relies on the browser to compute values for <code>aria-setsize</code>, <code>aria-posinset</code>, and <code>aria-level</code>.
+        The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute their values.
         So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared.
-        If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a 
+        If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a
         <a href="../treeview-1/treeview-1b.html">File Directory Treeview using <em>declared</em> properties.</a>
        </p>
       <p>Similar examples include: </p>
@@ -263,25 +265,25 @@ <h3 id="tree_label">
       <section>
         <h2>Accessibility Features</h2>
         <p>
-          The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes.  
+          The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes.
           To do this, focus, blur, mouseover, and mouseout events trigger application of classes to the <code>span</code> element that contains the visible label of the <code>treeitem</code>.
         </p>
       </section>
-      
+
       <section>
         <h2>Terms Used to Describe Trees</h2>
         <p>
           A tree item that can be expanded to reveal child items is called a parrent node.
           It is a closed node when the children are hidden and an open node when it is expanded.
-          An end node does not have any children. 
-          For a complete list of terms and definitions, see the 
+          An end node does not have any children.
+          For a complete list of terms and definitions, see the
           <a href="../../../#TreeView">Treeview Design Pattern.</a>
         </p>
       </section>
 
       <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label">
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -371,7 +373,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
       <section>
         <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-        <table aria-labelledby="rps_label">
+        <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -390,8 +392,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>Identifies the <code>ul</code> element as an <code>tree</code> widget.</li>
                   <li>A <code>tree</code> is a container widget for focusable, interactive <code>treeitem</code> elements.</li>
                   <li>
-                    The <code>tree</code> is not made focusable with a <code>tabindex</code> value because a 
-                    <a href="../../../#kbd_roving_tabindex">roving tabindex</a> 
+                    The <code>tree</code> is not made focusable with a <code>tabindex</code> value because a
+                    <a href="../../../#kbd_roving_tabindex">roving tabindex</a>
                     is used to control which descendant <code>treeitem</code> receives focus.
                   </li>
                 </ul>
@@ -442,7 +444,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>Only one <code>treeitem</code> in the <code>tree</code> has <code>tabindex=&quot;0&quot;</code>.</li>
                   <li>In this implementation, the first <code>treeitem</code> in the <code>tree</code> is included in the tab sequence when the page loads.</li>
                   <li>
-                    When the user moves focus in the <code>tree</code>, the element included in the tab sequence changes to the element with focus as described in the section on 
+                    When the user moves focus in the <code>tree</code>, the element included in the tab sequence changes to the element with focus as described in the section on
                     <a href="../../../#kbd_roving_tabindex">roving tabindex.</a>
                   </li>
                  </ul>
@@ -514,7 +516,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
         <script>
diff --git a/examples/treeview/treeview-1/treeview-1b.html b/examples/treeview/treeview-1/treeview-1b.html
index 33d934694d..4e1d822c17 100644
--- a/examples/treeview/treeview-1/treeview-1b.html
+++ b/examples/treeview/treeview-1/treeview-1b.html
@@ -4,9 +4,12 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>File Directory Treeview Example Using Declared Properties | WAI-ARIA Authoring Practices 1.1</title>
 
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
-    <script src="../../js/examples.js" type="text/javascript"></script>
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <link href="css/tree.css" rel="stylesheet">
     <script type="text/javascript" src="js/tree.js"></script>
@@ -17,14 +20,14 @@
     <main>
       <h1>File Directory Treeview Example Using Declared Properties</h1>
       <p>
-        Code is complete for this example. 
-        Feedback and progress on editorial work on this page are being tracked in 
+        Code is complete for this example.
+        Feedback and progress on editorial work on this page are being tracked in
         <a href="https://github.com/w3c/aria-practices/issues/224">issue 224.</a>
       </p>
       <p>
-        The below example implements the 
-        <a href="../../../#TreeView">Treeview Design Pattern</a> 
-        to simulate a file selector.  
+        The below example implements the
+        <a href="../../../#TreeView">Treeview Design Pattern</a>
+        to simulate a file selector.
         When users activate an item that represents a file name in the below tree, the name of the selected file appears in the read-only edit field next to the tree.
       </p>
       <p>
@@ -418,29 +421,29 @@ <h3 id="tree1">File Viewer</h3>
         </div>
         <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep start" aria-label="End of"></div>
       </section>
-      
+
       <section>
         <h2>Accessibility Features</h2>
         <p>
-          The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes.  
+          The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes.
           To do this, focus, blur, mouseover, and mouseout events trigger application of classes to the <code>span</code> element that contains the visible label of the <code>treeitem</code>.
         </p>
       </section>
-      
+
       <section>
         <h2>Terms Used to Describe Trees</h2>
         <p>
           A tree item that can be expanded to reveal child items is called a parrent node.
           It is a closed node when the children are hidden and an open node when it is expanded.
-          An end node does not have any children. 
-          For a complete list of terms and definitions, see the 
+          An end node does not have any children.
+          For a complete list of terms and definitions, see the
           <a href="../../../#TreeView">Treeview Design Pattern.</a>
         </p>
       </section>
 
       <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label">
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -530,7 +533,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
 
       <section>
         <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-        <table aria-labelledby="rps_label">
+        <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -549,8 +552,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>Identifies the <code>ul</code> element as an <code>tree</code> widget.</li>
                   <li>A <code>tree</code> is a container widget for focusable, interactive <code>treeitem</code> elements.</li>
                   <li>
-                    The <code>tree</code> is not made focusable with a <code>tabindex</code> value because a 
-                    <a href="../../../#kbd_roving_tabindex">roving tabindex</a> 
+                    The <code>tree</code> is not made focusable with a <code>tabindex</code> value because a
+                    <a href="../../../#kbd_roving_tabindex">roving tabindex</a>
                     is used to control which descendant <code>treeitem</code> receives focus.
                   </li>
                 </ul>
@@ -601,7 +604,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>Only one <code>treeitem</code> in the <code>tree</code> has <code>tabindex=&quot;0&quot;</code>.</li>
                   <li>In this implementation, the first <code>treeitem</code> in the <code>tree</code> is included in the tab sequence when the page loads.</li>
                   <li>
-                    When the user moves focus in the <code>tree</code>, the element included in the tab sequence changes to the element with focus as described in the section on 
+                    When the user moves focus in the <code>tree</code>, the element included in the tab sequence changes to the element with focus as described in the section on
                     <a href="../../../#kbd_roving_tabindex">roving tabindex.</a>
                   </li>
                  </ul>
@@ -702,7 +705,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
         <script>
diff --git a/examples/treeview/treeview-2/treeview-2a.html b/examples/treeview/treeview-2/treeview-2a.html
index dc63302515..75f7d5e843 100644
--- a/examples/treeview/treeview-2/treeview-2a.html
+++ b/examples/treeview/treeview-2/treeview-2a.html
@@ -4,9 +4,12 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>Navigation Treeview Example Using Computed Properties | WAI-ARIA Authoring Practices 1.1</title>
 
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
-    <script src="../../js/examples.js" type="text/javascript"></script>
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <link href="css/treeLinks.css" rel="stylesheet">
     <script type="text/javascript" src="js/treeLinks.js"></script>
@@ -17,12 +20,12 @@
     <main>
       <h1>Navigation Treeview Example Using Computed Properties</h1>
       <p>
-        Code is complete for this example. 
-        Feedback and progress on editorial work on this page are being tracked in 
+        Code is complete for this example.
+        Feedback and progress on editorial work on this page are being tracked in
         <a href="https://github.com/w3c/aria-practices/issues/225">issue 225.</a>
       </p>
   <p>
-    The below example demonstrates how the  
+    The below example demonstrates how the
     <a href="../../../#TreeView">Treeview Design Pattern</a>
     can be used to build a navigation tree for a set of hierarchically organized web pages.
     In this example, the user can browse a set of pages about foods that is organized into categories.
@@ -32,10 +35,10 @@ <h1>Navigation Treeview Example Using Computed Properties</h1>
     Since a tree item is the only kind of interactive element that can be contained in a tree, links to web pages in a navigation tree have the <code>treeitem</code> role.
   </p>
   <p>
-        This example relies on the browser to compute values for <code>aria-setsize</code>, <code>aria-posinset</code>, and <code>aria-level</code>.   
-        The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute their values. 
+        This example relies on the browser to compute values for <code>aria-setsize</code>, <code>aria-posinset</code>, and <code>aria-level</code>.
+        The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute their values.
         So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared.
-        If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a 
+        If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a
         <a href="../treeview-2/treeview-2b.html">Navigation Treeview using <em>declared</em> properties.</a>
        </p>
       <p>Similar examples include: </p>
@@ -339,25 +342,25 @@ <h3 id="tree1">Foods</h3>
       <section>
         <h2>Accessibility Features</h2>
         <p>
-          The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes.  
+          The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes.
           To do this, focus, blur, mouseover, and mouseout events trigger application of classes to the <code>span</code> element that contains the visible label of the <code>treeitem</code>.
         </p>
       </section>
-      
+
       <section>
         <h2>Terms Used to Describe Trees</h2>
         <p>
           A tree item that can be expanded to reveal child items is called a parrent node.
           It is a closed node when the children are hidden and an open node when it is expanded.
-          An end node does not have any children. 
-          For a complete list of terms and definitions, see the 
+          An end node does not have any children.
+          For a complete list of terms and definitions, see the
           <a href="../../../#TreeView">Treeview Design Pattern.</a>
         </p>
       </section>
 
       <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label">
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -444,10 +447,10 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </tbody>
         </table>
       </section>
-      
+
       <section>
         <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-        <table aria-labelledby="rps_label">
+        <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -466,8 +469,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>Identifies the <code>ul</code> element as a <code>tree</code> widget.</li>
                   <li>A <code>tree</code> is a container widget for focusable, interactive <code>treeitem</code> elements.</li>
                   <li>
-                    The <code>tree</code> is not made focusable with a <code>tabindex</code> value because a 
-                    <a href="../../../#kbd_roving_tabindex">roving tabindex</a> 
+                    The <code>tree</code> is not made focusable with a <code>tabindex</code> value because a
+                    <a href="../../../#kbd_roving_tabindex">roving tabindex</a>
                     is used to control which descendant <code>treeitem</code> receives focus.
                   </li>
                 </ul>
@@ -529,7 +532,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>Only one <code>treeitem</code> in the <code>tree</code> has <code>tabindex=&quot;0&quot;</code>.</li>
                   <li>In this implementation, the first <code>treeitem</code> in the <code>tree</code> is included in the tab sequence when the page loads.</li>
                   <li>
-                    When the user moves focus in the <code>tree</code>, the element included in the tab sequence changes to the element with focus as described in the section on 
+                    When the user moves focus in the <code>tree</code>, the element included in the tab sequence changes to the element with focus as described in the section on
                     <a href="../../../#kbd_roving_tabindex">roving tabindex.</a>
                   </li>
                  </ul>
@@ -590,7 +593,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
           </tbody>
         </table>
       </section>
-      
+
      <section>
         <h2>Javascript and CSS Source Code</h2>
         <ul>
@@ -616,7 +619,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
         <script>
diff --git a/examples/treeview/treeview-2/treeview-2b.html b/examples/treeview/treeview-2/treeview-2b.html
index 3dcbcb4dee..ec4b327f72 100644
--- a/examples/treeview/treeview-2/treeview-2b.html
+++ b/examples/treeview/treeview-2/treeview-2b.html
@@ -4,9 +4,12 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>Navigation Treeview Example Using Declared Properties | WAI-ARIA Authoring Practices 1.1<</title>
 
-    <link href="../../css/core.css" rel="stylesheet">
-    <link href="../../css/table.css" rel="stylesheet">
-    <script src="../../js/examples.js" type="text/javascript"></script>
+    <!--  Core js and css shared by all examples; do not modify when using this template. -->
+    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+    <link rel="stylesheet" href="../../css/core.css">
+    <script src="../../js/examples.js"></script>
+    <script src="../../js/highlight.pack.js"></script>
+    <script src="../../js/app.js"></script>
 
     <link href="css/treeLinks.css" rel="stylesheet">
     <script type="text/javascript" src="js/treeLinks.js"></script>
@@ -17,12 +20,12 @@
     <main>
       <h1>Navigation Treeview Example Using Declared Properties</h1>
       <p>
-        Code is complete for this example. 
-        Feedback and progress on editorial work on this page are being tracked in 
+        Code is complete for this example.
+        Feedback and progress on editorial work on this page are being tracked in
         <a href="https://github.com/w3c/aria-practices/issues/226">issue 226.</a>
       </p>
     <p>
-    The below example demonstrates how the  
+    The below example demonstrates how the
     <a href="../../../#TreeView">Treeview Design Pattern</a>
     can be used to build a navigation tree for a set of hierarchically organized web pages.
     In this example, the user can browse a set of pages about foods that is organized into categories.
@@ -467,29 +470,29 @@ <h3 id="tree1">Foods</h3>
         </div>
         <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
       </section>
-      
+
       <section>
         <h2>Accessibility Features</h2>
         <p>
-          The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes.  
+          The expandable nodes (parent items) in the tree have a custom focus and hover styling created using CSS focus and hover classes.
           To do this, focus, blur, mouseover, and mouseout events trigger application of classes to the <code>span</code> element that contains the visible label of the <code>treeitem</code>.
         </p>
       </section>
-      
+
       <section>
         <h2>Terms Used to Describe Trees</h2>
         <p>
           A tree item that can be expanded to reveal child items is called a parrent node.
           It is a closed node when the children are hidden and an open node when it is expanded.
-          An end node does not have any children. 
-          For a complete list of terms and definitions, see the 
+          An end node does not have any children.
+          For a complete list of terms and definitions, see the
           <a href="../../../#TreeView">Treeview Design Pattern.</a>
         </p>
       </section>
 
       <section>
         <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label">
+        <table aria-labelledby="kbd_label" class="def">
           <thead>
             <tr>
               <th>Key</th>
@@ -576,10 +579,10 @@ <h2 id="kbd_label">Keyboard Support</h2>
           </tbody>
         </table>
       </section>
-      
+
       <section>
         <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-        <table aria-labelledby="rps_label">
+        <table aria-labelledby="rps_label" class="data attributes">
           <thead>
             <tr>
               <th scope="col">Role</th>
@@ -598,8 +601,8 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>Identifies the <code>ul</code> element as a <code>tree</code> widget.</li>
                   <li>A <code>tree</code> is a container widget for focusable, interactive <code>treeitem</code> elements.</li>
                   <li>
-                    The <code>tree</code> is not made focusable with a <code>tabindex</code> value because a 
-                    <a href="../../../#kbd_roving_tabindex">roving tabindex</a> 
+                    The <code>tree</code> is not made focusable with a <code>tabindex</code> value because a
+                    <a href="../../../#kbd_roving_tabindex">roving tabindex</a>
                     is used to control which descendant <code>treeitem</code> receives focus.
                   </li>
                 </ul>
@@ -661,7 +664,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   <li>Only one <code>treeitem</code> in the <code>tree</code> has <code>tabindex=&quot;0&quot;</code>.</li>
                   <li>In this implementation, the first <code>treeitem</code> in the <code>tree</code> is included in the tab sequence when the page loads.</li>
                   <li>
-                    When the user moves focus in the <code>tree</code>, the element included in the tab sequence changes to the element with focus as described in the section on 
+                    When the user moves focus in the <code>tree</code>, the element included in the tab sequence changes to the element with focus as described in the section on
                     <a href="../../../#kbd_roving_tabindex">roving tabindex.</a>
                   </li>
                  </ul>
@@ -777,7 +780,7 @@ <h2>Javascript and CSS Source Code</h2>
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
         <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <div id="sc1"></div>
+        <pre><code id="sc1"></code></pre>
         <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
         <script>