Initialize syntax highlighting in all examples

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>

examples/application.js

@@ -0,0 +1,3 @@
+import Syntax from '../Syntax.js';
+
+await Syntax.highlight();

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>

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>

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;

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>

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>

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>

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>

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>

examples/nginx.html

@@ -550,5 +550,6 @@ <h2>Variables and Conditionals</h2>
 }
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>

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>

examples/pascal.html

@@ -758,5 +758,6 @@ <h2>Enumerations</h2>
 end.
 </code></pre>
 
-	</body>
+	<script type="module" src="application.js"></script>
+</body>
 </html>

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>

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>

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>

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>

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>

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`
+			);
+		}
+	}
+});