Показать фрагмент кода с подсветкой синтаксиса с использованием prismjs внутри веб-компонента

Я пытаюсь показать фрагмент кода, используя Prismjs для выделения синтаксиса.

Немного информации о проекте:

Я использую lit-element, и у меня есть фрагмент кода, сохраненный в виде строки, которую я хочу показать на странице с красивой подсветкой синтаксиса (используя для этого prismjs).

Вот как выглядит фрагмент в магазине (просто строка):

значение фрагмента в магазине

Затем внутри компонента я могу без проблем отобразить его как строку, но я не могу заставить работать подсветку синтаксиса.

Я импортирую стили, а также импортирую prismjs в верхней части компонента следующим образом: import Prism from 'prismjs';

Для проверки я визуализирую фрагмент двумя разными способами: первым, как он сохраняется в магазине, и вторым, используя функцию prism.highlight().

Вот как они выглядят в интерфейсе:

Оба способа визуализации во внешнем интерфейсе

и вот как я их визуализирую в своем компоненте:

<pre>
   <code class="stage__code language-css">${this._selectedSnippet.code}</code>
   <code class="stage__code language-css">${this._highlightedCode}</code>
</pre>

this._selectedSnippet.code получает значение, сохраненное в магазине.

this._highlightedCode получают значение от этого геттера:

get _highlightedCode() {
   return Prism.highlight(this._selectedSnippet.code, Prism.languages.css, 'css')
}

На первом я вижу правильный фрагмент кода, но призма его не выделяет. На втором я вижу, что Prism добавила классы, необходимые для выделения кода, но затем он отображается как строка (с новой разметкой, добавленной призмой).

Есть идеи, как я могу это исправить? Спасибо!


javascript html prismjs lit-element syntax-highlighting
person LuisBento    schedule 03.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Буквально через несколько секунд после того, как я написал этот вопрос, я кое-что вспомнил, что позволило мне решить эту проблему.

Я пишу это здесь, на случай, если у кого-то такая же проблема.

lit-html имеет директиву unsafeHTML (здесь документация) что позволяет нам отображать как HTML вместо строки. Конечно, это следует использовать осторожно, так как это может привести к проблемам с безопасностью.

В итоге я импортировал эту директиву вот так:

import { unsafeHTML } from 'lit-html/directives/unsafe-html';

а затем рендеринг блока кода следующим образом:

<code class="stage__code language-css" id="codeContainer">
   ${unsafeHTML(this._highlightedCode)}
</code>
person LuisBento    schedule 03.10.2020