From 4dc0b8524fab333cc94500f58fe48911bda08ccd Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Tue, 28 May 2024 16:35:24 -0500
Subject: [PATCH] Add a language indicator to code snippets

---
 src/layouts/thpHighlighter.ts | 14 ++++++++++++++
 src/pages/api/index.md        | 14 +++-----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/layouts/thpHighlighter.ts b/src/layouts/thpHighlighter.ts
index 79f853c..aad173c 100644
--- a/src/layouts/thpHighlighter.ts
+++ b/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);
+    }
 }
 
diff --git a/src/pages/api/index.md b/src/pages/api/index.md
index 635fbd3..22097ed 100644
--- a/src/pages/api/index.md
+++ b/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
-`contains` function inside `String`:
+In THP there is no `str_contains` function. Instead, you'd call the
+`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")
 {
     // ...