Merge pull request #24 from ejunga/highlight-toggle

Highlight toggle

tdx-enhanced.js

@@ -1014,6 +1014,7 @@
     }
 
     function handleHighlight(type, txt, element) {
+        let behavior = settings('get','highlightBehavior')
 
         var re
         var style = null
@@ -1081,11 +1082,23 @@
             //console.log("Apply custom highlight:",txt)
 
             let link = element.querySelector("a")
-            if (re && link) {
-                let newTitle = re[1]
-                link.innerText = newTitle
-                //reset regex
-                re.lastIndex = 0
+            if (behavior==="block") {
+                if (re && link) {
+                    let newTitle = re[1]
+                    link.innerText = newTitle
+                    //reset regex
+                    re.lastIndex = 0
+                }
+            } else {
+                if (re && link) {
+                    let text = link.innerText
+                    link.innerText = ""
+                    element = link.appendChild(document.createElement("span"))
+                    element.innerText = text
+                    element.style.lineHeight = "1.4"
+                    //reset regex
+                    re.lastIndex = 0
+                }
             }
 
             for (const [attr,val] of Object.entries(style)) {
@@ -1398,6 +1411,13 @@
                     <input type="radio" id="linkBehavior-tabs" name="linkBehavior" value="tabs">
                     <label for="linkBehavior-tabs">Tabs</label>
                 </div>
+                <div>
+                    <h4>Highlight Behavior</h4>
+                    <input type="radio" id="highlightBehavior-block" name="highlightBehavior" value="block">
+                    <label for="highlightBehavior-block">Block</label><br>
+                    <input type="radio" id="highlightBehavior-text" name="highlightBehavior" value="text">
+                    <label for="highlightBehavior-block">Text</label><br>
+                </div>
             </form>
 
         </div>
@@ -1528,6 +1548,7 @@
             data = {
                 colorMode: getColorMode(),
                 linkBehavior: "tabs",
+                highlightBehavior: "block",
                 customHighlights: [],
             }
         }