Add highlight toggle for block/text highlight

tdx-enhanced.js

@@ -686,6 +686,7 @@
     }
 
     function handleHighlight(type, txt, element) {
+        let behavior = settings('get','highlightBehavior')
 
         var re
         var style = null
@@ -745,11 +746,19 @@
             //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) {
+                    element = link
+                    //reset regex
+                    re.lastIndex = 0
+                }
             }
 
             for (const [attr,val] of Object.entries(style)) {
@@ -1060,6 +1069,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>
@@ -1190,6 +1206,7 @@
             data = {
                 colorMode: getColorMode(),
                 linkBehavior: "tabs",
+                highlightBehavior: "block",
                 customHighlights: [],
             }
         }