Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text
For example:
<pre>
<code class="language-css hljs" contenteditable="true" id="css-code">
<span class="token selector"&bt;<span class="hljs-selector-class"&bt;.spacer-line</span&bt;</span&bt; <span class="token punctuation"&bt;{</span&bt;
<span class="token property"&bt;<span class="hljs-attribute"&bt;border-bottom-width</span&bt;</span&bt;<span class="token punctuation"&bt;:</span&bt; <span class="hljs-number"&bt;20px</span&bt;<span class="token punctuation"&bt;;</span&bt;
<span class="token property"&bt;<span class="hljs-attribute"&bt;width</span&bt;</span&bt;<span class="token punctuation"&bt;:</span&bt; <span class="hljs-number"&bt;50%</span&bt;<span class="token punctuation"&bt;;</span&bt;
<span class="token property"&bt;<span class="hljs-attribute"&bt;border-color</span&bt;</span&bt;<span class="token punctuation"&bt;:</span&bt; black<span class="token punctuation"&bt;;</span&bt;;
<span class="token punctuation"&bt;}</span&bt;
</code&bt;
</pre&bt;
The actual plain text is:
.spacer-line { border-bottom-width: 20px; width: 50%; border-color: black; }
I require the plain text. How can I achieve this?
UPDATE
If I use the following code for any reason:
let value = document.querySelector('pre');
console.log(value.textContent);
I am able to retrieve the pre and code tags without the span tags The resulting value is:
<pre class=" language-css"&bt;<code class="language-css hljs"&contenteditable=true&id="css-code"&bt;></code&bt;
</pre>
and an empty value for textContent