Add a language indicator to code snippets

src/layouts/thpHighlighter.ts

@@ -23,9 +23,23 @@ export function highlightOnDom() {
         pre_parent.removeChild(el);
         pre_parent.appendChild(new_div);
 
+        // Create and append a language name indicator
+
         CodeJar(new_div, thp_highlighter, {
             tab: "    ",
         }).updateCode(code);
     }
+
+    const pre_elements = document.querySelectorAll("pre");
+    for (const pre_el of pre_elements) {
+        const language = pre_el.getAttribute("data-language");
+        if (language === null) { continue; }
+
+        // Create a visual indicador
+        const indicator = document.createElement("span");
+        indicator.className = "absolute top-2 right-2 inline-block text-sm select-none opacity-75";
+        indicator.innerText = language;
+        pre_el.appendChild(indicator);
+    }
 }
 

src/pages/api/index.md

@@ -17,24 +17,16 @@ objects or other modules.
 For example, to find if a string contains another, in PHP you'd do:
 
 ```php
+<?php
 if (str_contains("abc", "a")) {
     // ...
 }
 ```
 
-In THP there is no `str_contains` function. Instead, you'd use the
+In THP there is no `str_contains` function. Instead, you'd call the
-`contains` function inside `String`:
+`contains` method on the string:
 
 ```thp
-if String.contains("abc", "a")
-{
-    // ...
-}
-```
-
-Or even better, you'd use the function as a method:
-
-```thp data-thp
 if "abc".contains("a")
 {
     // ...