From 559b639c37ef818d984eacd7937e742548be64aa Mon Sep 17 00:00:00 2001
From: Samuel Williams <samuel.williams@shopify.com>
Date: Sun, 16 Aug 2026 13:12:27 +1200
Subject: [PATCH] Initialize syntax highlighting in all examples

---
 examples/_template.html | 14 +-------------
 examples/application.js |  3 +++
 examples/clang.html     | 11 +----------
 examples/diff.html      |  1 +
 examples/examples.css   |  6 ++++++
 examples/go.html        |  2 ++
 examples/haskell.html   |  1 +
 examples/io.html        |  3 ++-
 examples/lisp.html      |  3 ++-
 examples/lua.html       |  3 ++-
 examples/nginx.html     |  3 ++-
 examples/ocaml.html     |  3 ++-
 examples/pascal.html    |  3 ++-
 examples/scala.html     |  1 +
 examples/smalltalk.html |  3 ++-
 examples/sql.html       |  3 ++-
 examples/swift.html     |  3 ++-
 examples/xml.html       |  3 ++-
 test/Examples.js        | 26 ++++++++++++++++++++++++++
 19 files changed, 62 insertions(+), 33 deletions(-)
 create mode 100644 examples/application.js
 create mode 100644 test/Examples.js

diff --git a/examples/_template.html b/examples/_template.html
index 246d1c5..0f4db27 100644
--- a/examples/_template.html
+++ b/examples/_template.html
@@ -36,18 +36,6 @@ <h2>[Another Feature]</h2>
 		</syntax-code>
 	</div>
 	
-	<script type="module">
-		import Syntax from '../Syntax.js';
-		import register[Language] from '../Syntax/Language/[language].js';
-		
-		// Register the language (if needed - some are auto-registered)
-		register[Language](Syntax.default);
-		
-		// Initialize highlighting
-		await Syntax.highlight({
-			autoUpgrade: true,
-			syntax: Syntax.default
-		});
-	</script>
+	<script type="module" src="application.js"></script>
 </body>
 </html>
diff --git a/examples/application.js b/examples/application.js
new file mode 100644
index 0000000..0547784
--- /dev/null
+++ b/examples/application.js
@@ -0,0 +1,3 @@
+import Syntax from '../Syntax.js';
+
+await Syntax.highlight();
diff --git a/examples/clang.html b/examples/clang.html
index cca4321..429ff9a 100644
--- a/examples/clang.html
+++ b/examples/clang.html
@@ -188,15 +188,6 @@ <h2>Objective-C Example</h2>
 		</syntax-code>
 	</div>
 	
-	<script type="module">
-		import Syntax from '../Syntax.js';
-		import '../Syntax/CodeElement.js';
-		import clang from '../Syntax/Language/clang.js';
-		
-		const syntax = Syntax.default;
-		clang(syntax);
-		
-		console.log('Clang language registered with aliases:', ['c', 'cpp', 'c++', 'objective-c']);
-	</script>
+	<script type="module" src="application.js"></script>
 </body>
 </html>
diff --git a/examples/diff.html b/examples/diff.html
index 43cefcd..13960b0 100644
--- a/examples/diff.html
+++ b/examples/diff.html
@@ -138,5 +138,6 @@ <h2>Bug Fix</h2>
    return regex.test(email);
  }
 	</syntax-code>
+	<script type="module" src="application.js"></script>
 </body>
 </html>
diff --git a/examples/examples.css b/examples/examples.css
index 89ab161..19eb81b 100644
--- a/examples/examples.css
+++ b/examples/examples.css
@@ -89,9 +89,15 @@ pre {
 
 syntax-code {
 	display: block;
+	overflow-x: auto;
+	white-space: pre;
 	margin: 1rem 0;
 }
 
+syntax-code[wrap] {
+	white-space: pre-wrap;
+}
+
 /* Feature boxes (for index page) */
 .feature-list {
 	background: #f6f8fa;
diff --git a/examples/go.html b/examples/go.html
index c758dd7..fcccd5a 100644
--- a/examples/go.html
+++ b/examples/go.html
@@ -409,5 +409,7 @@ <h2>Constants and Iota</h2>
 	fmt.Println("Nil:", nil)
 }
 	</syntax-code>
+
+	<script type="module" src="application.js"></script>
 </body>
 </html>
diff --git a/examples/haskell.html b/examples/haskell.html
index 43e3195..3c8a053 100644
--- a/examples/haskell.html
+++ b/examples/haskell.html
@@ -369,5 +369,6 @@ <h2>Lazy Evaluation and Infinite Lists</h2>
 takeWhileLessThan :: Int -> [Int] -> [Int]
 takeWhileLessThan n = takeWhile (< n)
 	</syntax-code>
+	<script type="module" src="application.js"></script>
 </body>
 </html>
diff --git a/examples/io.html b/examples/io.html
index d05189a..f5d9279 100644
--- a/examples/io.html
+++ b/examples/io.html
@@ -548,5 +548,6 @@ <h2>Metaprogramming</h2>
 # Arguments: list(1, 2, 3)
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/lisp.html b/examples/lisp.html
index dc72f77..f9e14d7 100644
--- a/examples/lisp.html
+++ b/examples/lisp.html
@@ -472,5 +472,6 @@ <h2>Advanced Examples</h2>
  5)  ; => 120
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/lua.html b/examples/lua.html
index 6bb820b..96dbc73 100644
--- a/examples/lua.html
+++ b/examples/lua.html
@@ -733,5 +733,6 @@ <h2>Advanced Examples</h2>
 sum = reduce(numbers, function(a, b) return a + b end, 0)
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/nginx.html b/examples/nginx.html
index 8b8eec6..85fa489 100644
--- a/examples/nginx.html
+++ b/examples/nginx.html
@@ -550,5 +550,6 @@ <h2>Variables and Conditionals</h2>
 }
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/ocaml.html b/examples/ocaml.html
index dd4b503..5b61b19 100644
--- a/examples/ocaml.html
+++ b/examples/ocaml.html
@@ -592,5 +592,6 @@ <h2>Practical Examples</h2>
 let value = StringMap.find "two" map_with_data  (* 2 *)
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/pascal.html b/examples/pascal.html
index 80f553c..46c30cf 100644
--- a/examples/pascal.html
+++ b/examples/pascal.html
@@ -758,5 +758,6 @@ <h2>Enumerations</h2>
 end.
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/scala.html b/examples/scala.html
index 17da3a6..896e60b 100644
--- a/examples/scala.html
+++ b/examples/scala.html
@@ -37,5 +37,6 @@ <h1>Scala Example</h1>
   val value: MyType = MyType(42)
 }
     </syntax-code>
+	<script type="module" src="application.js"></script>
 </body>
 </html>
diff --git a/examples/smalltalk.html b/examples/smalltalk.html
index 6666ddd..64bb88f 100644
--- a/examples/smalltalk.html
+++ b/examples/smalltalk.html
@@ -432,5 +432,6 @@ <h2>Advanced Examples</h2>
 	observers do: [:each | each update: self].
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/sql.html b/examples/sql.html
index 381b1a0..786d80e 100644
--- a/examples/sql.html
+++ b/examples/sql.html
@@ -369,5 +369,6 @@ <h2>Views</h2>
 DROP VIEW IF EXISTS active_customers;
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/swift.html b/examples/swift.html
index 9021f61..36688a6 100644
--- a/examples/swift.html
+++ b/examples/swift.html
@@ -172,5 +172,6 @@ <h1>Swift Code Example</h1>
 let `class` = "This is a keyword used as identifier"
 let `protocol` = "Another keyword"
 		</syntax-code>
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/examples/xml.html b/examples/xml.html
index 127d96f..e65634c 100644
--- a/examples/xml.html
+++ b/examples/xml.html
@@ -108,5 +108,6 @@ <h1>XML Code Example</h1>
 	
 &lt;/library&gt;
 		</syntax-code>
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>
diff --git a/test/Examples.js b/test/Examples.js
new file mode 100644
index 0000000..17f59e7
--- /dev/null
+++ b/test/Examples.js
@@ -0,0 +1,26 @@
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {readdir, readFile} from 'node:fs/promises';
+
+const examplesDirectory = new URL('../examples/', import.meta.url);
+
+test('code examples initialize syntax highlighting', async () => {
+	const entries = await readdir(examplesDirectory);
+
+	for (const entry of entries) {
+		if (!entry.endsWith('.html')) continue;
+
+		const source = await readFile(new URL(entry, examplesDirectory), 'utf8');
+		const containsCode =
+			source.includes('<syntax-code') ||
+			source.includes('class="language-');
+
+		if (containsCode) {
+			assert.match(
+				source,
+				/Syntax\.highlight|src="application\.js"/,
+				`${entry} should initialize syntax highlighting`
+			);
+		}
+	}
+});