Add special characters inside their generated spans so find and replace counts them

plugins/README.md

@@ -61,6 +61,8 @@ Files: [prism-line-numbers.css](./prism-line-numbers.css) (NO JS FILE)
 Render special characters and control characters as a symbol
 with their hex code.
 
+**Please note: This plugin is known to contain bugs, especially when used with highlight.js and/or other plugins. Please bear this in mind and look at the Issues if you want more details; fixes for the bugs are planned but not prioritised as much as those used in more common plugins or the core library.**
+
 Files: [special-chars.js](./special-chars.js) / [special-chars.css](./special-chars.css)
 
 [🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/jOeYJbm)

plugins/special-chars.css

@@ -37,6 +37,10 @@
     vertical-align: middle;
     outline: 0.1px solid currentColor;
 
+    /* Contain character for use by other plugins, but hide it */
+    color: transparent;
+    font-size: 0;
+
     --hex-0: var(
     --code-input_special-chars_0);
     --hex-1: var(
@@ -91,4 +95,4 @@
     height: 1.5em;
     bottom: -1em;
     content: attr(data-hex3);
-}
+}

plugins/special-chars.js

@@ -100,6 +100,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
 
         // Create element with hex code
         let result = document.createElement("span");
+        result.textContent = matchChar;
         result.classList.add("code-input_special-char");
         result.style.setProperty("--hex-0",  "var(--code-input_special-chars_" + hexCode[0] + ")");
         result.style.setProperty("--hex-1",  "var(--code-input_special-chars_" + hexCode[1] + ")");
@@ -189,4 +190,4 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
 
         return width;
     }
-}
+}