diff --git a/build.js b/build.js
index bf5e415..fa54ead 100644
--- a/build.js
+++ b/build.js
@@ -2,6 +2,7 @@
const dedent = require("dedent");
const ejs = require("ejs");
const fs = require("fs");
+const hljs = require("highlight.js");
const mkdirp = require("mkdirp");
const postcss = require("postcss");
@@ -17,10 +18,8 @@ function example(code) {
const magicBrackets = /\[\[(.*)\]\]/g;
const dedented = dedent(code);
const inline = dedented.replace(magicBrackets, "$1");
- const escaped = dedented
- .replace(magicBrackets, "")
- .replace(//g, ">");
+ const escaped = hljs.highlight("html", dedented.replace(magicBrackets, ""))
+ .value;
return `
${inline}
diff --git a/build/98.css b/build/98.css
index d04e53c..ecacd23 100644
--- a/build/98.css
+++ b/build/98.css
@@ -511,10 +511,10 @@ pre {
inset 2px 2px #0a0a0a;
padding: 12px 8px;
margin: 0;
- font-family: monospace;
}
-code {
+code,
+code * {
font-family: monospace;
}
diff --git a/docs/98.css b/docs/98.css
index d04e53c..ecacd23 100644
--- a/docs/98.css
+++ b/docs/98.css
@@ -511,10 +511,10 @@ pre {
inset 2px 2px #0a0a0a;
padding: 12px 8px;
margin: 0;
- font-family: monospace;
}
-code {
+code,
+code * {
font-family: monospace;
}
diff --git a/docs/index.html b/docs/index.html
index a9490c3..cf11477 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,6 +5,7 @@
+
Show code
- <button>I am being pressed</button>
+ <button>I am being pressed</button>
@@ -125,7 +135,7 @@
Show code
- <button disabled>I cannot be clicked</button>
+ <button disabled>I cannot be clicked</button>
@@ -138,7 +148,7 @@
Show code
- <button>I am focused</button>
+ <button>I am focused</button>
@@ -170,8 +180,8 @@
Show code
- <input type="checkbox" id="example1">
-<label for="example1">This is a checkbox</label>
+ <input type="checkbox" id="example1">
+<label for="example1">This is a checkbox</label>
@@ -200,18 +210,18 @@
Show code
- <div class="field-row">
- <input checked type="checkbox" id="example2">
- <label for="example2">I am checked</label>
-</div>
-<div class="field-row">
- <input disabled type="checkbox" id="example3">
- <label for="example3">I am inactive</label>
-</div>
-<div class="field-row">
- <input checked disabled type="checkbox" id="example4">
- <label for="example4">I am inactive but still checked</label>
-</div>
+ <div class="field-row">
+ <input checked type="checkbox" id="example2">
+ <label for="example2">I am checked</label>
+</div>
+<div class="field-row">
+ <input disabled type="checkbox" id="example3">
+ <label for="example3">I am inactive</label>
+</div>
+<div class="field-row">
+ <input checked disabled type="checkbox" id="example4">
+ <label for="example4">I am inactive but still checked</label>
+</div>
@@ -245,14 +255,14 @@
Show code
- <div class="field-row">
- <input id="radio5" type="radio" name="first-example">
- <label for="radio5">Yes</label>
-</div>
-<div class="field-row">
- <input id="radio6" type="radio" name="first-example">
- <label for="radio6">No</label>
-</div>
+ <div class="field-row">
+ <input id="radio5" type="radio" name="first-example">
+ <label for="radio5">Yes</label>
+</div>
+<div class="field-row">
+ <input id="radio6" type="radio" name="first-example">
+ <label for="radio6">No</label>
+</div>
@@ -276,18 +286,18 @@
Show code
- <div class="field-row">
- <input id="radio7" type="radio" name="second-example">
- <label for="radio7">Peanut butter should be smooth</label>
-</div>
-<div class="field-row">
- <input checked disabled id="radio8" type="radio" name="second-example">
- <label for="radio8">I understand why people like crunchy peanut butter</label>
-</div>
-<div class="field-row">
- <input disabled id="radio9" type="radio" name="second-example">
- <label for="radio9">Crunchy peanut butter is good</label>
-</div>
+ <div class="field-row">
+ <input id="radio7" type="radio" name="second-example">
+ <label for="radio7">Peanut butter should be smooth</label>
+</div>
+<div class="field-row">
+ <input checked disabled id="radio8" type="radio" name="second-example">
+ <label for="radio8">I understand why people like crunchy peanut butter</label>
+</div>
+<div class="field-row">
+ <input disabled id="radio9" type="radio" name="second-example">
+ <label for="radio9">Crunchy peanut butter is good</label>
+</div>
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 90a2407..99c9914 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -5,6 +5,7 @@
+