Fix escape character

[Kevan-Y]

Issue This PR Addresses

Fixes #2457

Type of Change

• Modified our highlight syntax function
• Adjust test case

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

The current way of doing it causing some weird bug.
highlightAuto() seems to run an encode to change value to escape character. And when we have our data with preset syntax-highlight span. It is converting weirding.

For example:

<pre class="hljs language-bash"><code><span class="o">&amp;&amp;</span></code></pre>

Will convert to

<pre class="hljs language-bash xml"><code class="hljs language-bash"><span class="hljs-symbol">&amp;</span>amp;<span class="hljs-symbol">&amp;</span>amp;</code></pre>

I upgraded to the latest version, it kind of fixed itself but some didn't.
Finally solution was to change to use this https://highlightjs.readthedocs.io/en/latest/api.html#highlightelement
That will highlight the syntax+ add class (for language) in code tag instead of pre tag.

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[mkim219]

@Kevan-Y I have question for you. What if language has not been detected on the syntax-highlight.js?

[Kevan-Y]

@Kevan-Y I have question for you. What if language has not been detected on the syntax-highlight.js?

highlight.js library, have an auto-detect language. This is the [languages support] (https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md), but can also set what language to be used

[Kevan-Y]

Rebased to master.

[mkim219]

LGTM

[humphd]

Question: our front-end uses the CSS for this, do we need to do an update in src/web/* as well?

[humphd]

It looks like it's already updated,

telescope/src/web/package.json

Line 20 in 411543e

"highlight.js": "11.3.1",

. This should be good to go.