+ This website
+
+
+ Although I also know my way around frontend development and design as well, I'm far less skilled at it.
+ As such this website is trying to impress in a different way:
+
+
+ It implements parts of the HTML parser spec
+ to tokenize and highlight it's own source code.
+
+
+
+
+
+
+
+
diff --git a/public/style/index.css b/public/style/index.css
new file mode 100644
index 0000000..8c4efb2
--- /dev/null
+++ b/public/style/index.css
@@ -0,0 +1,33 @@
+body {
+ background: #292D3E;
+
+ font-family: monospace;
+}
+
+pre {
+ margin: 0;
+}
+
+body > pre > span {
+ cursor: default;
+}
+
+a {
+ color: white;
+}
+
+body {
+ color: white;
+ font-size: 1vmax;
+}
+
+#inspector {
+ position: fixed;
+ pointer-events: none;
+
+ background: inherit;
+ color: white;
+ border: 1px #424864 solid;
+
+ padding: .5vw;
+}
diff --git a/html.ts b/src/html.ts
similarity index 68%
rename from html.ts
rename to src/html.ts
index 6a0b347..53c8032 100644
--- a/html.ts
+++ b/src/html.ts
@@ -1,7 +1,7 @@
-import { Highlighter } from "./html/highlighter.js";
-import { Node } from "./html/highlighter/node.js";
-import { Tokenizer } from "./html/tokenizer.js";
-import { Token, Type } from "./html/tokenizer/token.js";
+import { Highlighter } from './html/highlighter.js';
+import { Span } from './html/highlighter/span.js';
+import { Tokenizer } from './html/tokenizer.js';
+import { Token, Type } from './html/tokenizer/token.js';
export function normalizeNewlines(input: string): string {
return input.replaceAll('\u000D\u000A', '\u000A').replaceAll('\u000D', '\u000A');
@@ -20,7 +20,7 @@ export function tokenize(input: string): Array