Рендеринг кода с подсветкой синтаксиса из CMS - PullRequest
Новая
       18

Рендеринг кода с подсветкой синтаксиса из CMS

0 голосов
/ 30 октября 2018

Я использую безголовый CMS (Strapi) и React на внешнем интерфейсе. Я хотел бы визуализировать блоки кода с подсветкой, используя PrismJS (или что-нибудь).

В моем рендере (): 

<div>
 <pre>
  <code className="language-css">{`p { color: red }`}

{this.state.title}

Код, обернутый тегами <pre>, служит примером того, что я пытаюсь сделать.

First is the pre tag example, below is what's rendered from innerHTML

Проблема в том, что, поскольку я использую CMS Strapi, кодовый блок не распознается PrismJS. Вот как это отображается:

enter image description here

Верхняя часть - это код, непосредственно написанный в моем компоненте, а нижняя часть возвращается из CMS. В WYSIWYG CMS у меня есть следующее <pre><code class="language-css">p { color: red }

Есть ли способ, которым я могу писать контент с текстом и кодом и правильно выделять код?

Это похоже на похожую проблему: Реагирует: Визуализация синтаксиса с выделенным блоком кода

1 Ответ

0 голосов
/ 31 октября 2018

Это решило мою проблему: https://github.com/akiran/react-highlight

Обязательно установите свой CSS в index.html, и я добавил следующее в свой проект: 

<Highlight language="javascript" innerHTML={true}>
 {content}
</Highlight>

Работает отлично! Надеюсь, это кому-нибудь поможет.

...