diff --git a/plugins/README.md b/plugins/README.md index 52bc746..67debcb 100644 --- a/plugins/README.md +++ b/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) diff --git a/plugins/special-chars.css b/plugins/special-chars.css index 5222d8b..5f14eb1 100644 --- a/plugins/special-chars.css +++ b/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); -} \ No newline at end of file +} diff --git a/plugins/special-chars.js b/plugins/special-chars.js index 95db1e5..ccc9d8e 100644 --- a/plugins/special-chars.js +++ b/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; } -} \ No newline at end of file +}