Как сделать кастомную подсветку теста в js?

Question

Библиотеки типа codemirror подсвечивают текст для определённых языков, но там нет возможности указать свои кастомные правила подсветки, хочу подсвечивать незакрытые скобки в математических выражениях.

Answer 1

Попробуйте Prism.JS.

Свежее решение насущных проблем. В базовой версии всего 2кб кода. Работает без единой зависимости. Поддержка 275 языков.

Расширяется плагинами.

Плагин соответствия скобок также имеется.

const plain = document.documentElement.outerHTML;
code.innerHTML = plain.replace(/</g,'&lt;').replace(/>/g,'&gt;');

[contenteditable] {
  outline: 0px solid transparent;
}
.brace-hover { transform: scale(2); 
               transition: all 0.5s; 
               position:relative; 
               display: inline-block; }

* { font-size: 0.85rem; }

<!-- CSS PRISM -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css"/>

<!-- CSS MATCH BRACES -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/match-braces/prism-match-braces.min.css"/>

<!-- JS PRISM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>

<!-- JS MATCH BRACES -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/match-braces/prism-match-braces.min.js"></script>

<!-- CODE BLOCK -->
<pre>
<code id="code" 
      contenteditable="true" 
      class="lang-html match-braces rainbow-braces">

</code>
</pre>

БЛОГ НА HUSL

Как сделать кастомную подсветку теста в js?

Ответы (1 шт):