#javascript #html #reactjs

Вопрос:

 Operators - > = *                      // "brown color"
Number =>                             //red color
string(inside double/single quotes) => green color 
string(without double/single quotes) => black color 
 

 <div contentEditable="true"  onInput={(e) => this.inputValue(e)}></div>

inputValue(e){ console.log(event.target.value) }
 

Комментарии:

1. Вы хотите выполнить подсветку синтаксиса?

2. Чтобы было ясно, это довольно масштабная задача. Это включает в себя разбор строки на ее элементы, обертывание отдельных частей в промежутки, чтобы иметь возможность их раскрасить, и применение ее в качестве innerHTML к div.

3. Да, это своего рода подсветка синтаксиса. В основном пользователь вводит формулу в виде строки, и нам нужно выделить ее. Не могли бы вы, пожалуйста, помочь решить эту проблему.

4. Существуют библиотеки, которые уже делают это за вас, так что нет необходимости изобретать велосипед заново. На каком языке вы пытаетесь выделить синтаксис?

Ответ №1:

 const html = hljs.highlightAuto('isNaN("Name")/2 * if(5>3, "true","false") === Date').value;

document.getElementById("code").innerHTML = html;


console.log(html); 

 <link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>

<div id="code"></div> 

Комментарии:

1. Спасибо, но я все еще не понимаю, как предоставить пользовательский цвет на основе вышеуказанных условий.

2. Вы можете проверить этот документ, highlightjs.readthedocs.io/en/latest/api.html#configure . Если вы проверите этот результат кода, вы увидите некоторые общие классы, такие как built_in, строка, число, которые вы можете переопределить этими классами.