HighlightJS i unescaped code

0

Cześć,
używam sobie na stronie biblioteki highlightJs: https://highlightjs.org/
żeby ładnie wystylować kod.
Dokładnie chciałbym stylować kod TypeScriptowy.
Wstawiam więc taki blok ze swoim kodem:

<pre>
          <code class="language-typescript">
            enum ChangeDetectionStrategy {
              OnPush: 0
              Default: 1 
            }
          </code>
</pre>

wywołuję

hljs.highlightAll();

i kod ładnie się styluje. Czyli wszystko zadziałało.
Problem polega na tym, że w konsoli lecą Warningi:

One of your code blocks includes unescaped HTML. This is a potentially serious security risk.
https://github.com/highlightjs/highlight.js/wiki/security
The element with unescaped HTML:
<code class="language-typescript hljs">...</code>

Googlając wszędzie problem opisany jest w przypadku gdy kod w bloku code jest html'em. Wtedy trzeba go "escape'ować", to zrozumiałe.
Ale mój kod jest TypeScriptem. Na to nigdzie nie znalazłem rozwiązania.
Problem też wystąpi w kodzie innych języków (C#, C++, JAVA).
Może ktoś z Was używał highlightJS i wie jak sobie z tym poradzić?

1

kod w TS również może być mylący (np. generyki mają nawiasy trójkątne <coś tam> ).

One of your code blocks includes unescaped HTML.

może chodzi o inny blok kodu, niż wkleiłeś?

0

@LukeJL: to jest jedyny kod (jedyny pre code na stronie). I w treści warninga jest on wskazany: ...

2

Może ... oznacza pominięcie treści, a nie faktyczne trzy kropki?
No i może on łapie już <code class="language-typescript"> jako kod i stąd ten komunikat?

A weź spróbuj inaczej np.

 hljs.highlight('const foo: string = "<div>kotek</div>" ', {language:'ts'}).value

powinno dać ci:
<span class="hljs-keyword">const</span> foo: <span class="hljs-built_in">string</span> = <span class="hljs-string">&quot;&lt;div&gt;kotek&lt;/div&gt;&quot;</span>

czyli ładnie <> są eskejpowane i <div>kotek</div> zamienia się w &lt;div&gt;kotek&lt;/div&gt;

0

@LukeJL: No tak ale ja w swoim przykładzie nie mam żadnych znaczników HTML. Mam jedynie zwykłą deklarację enuma. I wali warningiem jak wyżej.
Jak dodam jakikolwiek inny kod, również w innym języku to też wali takim błędem. Ale żaden kod nie ma znaczników HTMLowych/XMLowych, które trzebaby escapeować

Chociaż w treści warningu wygląda to tak jakby on to co jest wewnątrz bloku code wystylował (czyli wywołał metodę highlightAll) co sprowadza sie do dodania znacznikwó HTMLowych np
span class="hljs-selector"
i dopiero wtedy walnął warningiem, że te znaczniki, które sam dodał są nieescapeowane

2

A jak dokładnie wywołujesz tą funkcje?

Bo zrobiłem sobie prosty przykład na CodePen i żeby odwzorować Twój błąd musiałem dwa razy wywołać funkcję hljs.highlightAll();

<pre>
  <code class="language-typescript">
    enum ChangeDetectionStrategy {
      OnPush: 0
      Default: 1 
    }
    
    class TypeScript {
      constructor(private name: string, private surname: string) {}
    }
  </code>
</pre>

<script>
  hljs.highlightAll();
  hljs.highlightAll();
</script>

Wątpię, żebyś miał coś takiego w kodzie, ale może Twój fragment odpala się kilkukrotnie i dlatego dostajesz ostrzeżenie?

1

@Xarviel:
W punkt. Aż się głupio przyznać...
Wywołałem highlightAll w angularowym hooku ngAfterViewChecked, co faktycznie wywoływało się dwa razy...

Głupi błąd.

@LukeJL, @Xarviel
Dzięki wielkie za pomoc!!!

1 użytkowników online, w tym zalogowanych: 0, gości: 1