Я хочу использовать библиотеку highlight.js, и я не могу выделить символ и числа + (например, 1000). Есть ли способ это сделать?

import React, { Component } from 'react'
import hljs from 'highlight.js'

export default class App extends Component {
  constructor(){
    super();
    this.state = {
    }
  }

  componentDidMount(){
    hljs.registerLanguage("pl", function(hljs) {
      return {
        case_insensitive: false,
        keywords: {
        literal: '--',
        symbols: '+',
        keyword0: ' minus # plus   ++ $_  ',
       operator:' 1 2 3 4 /+ ',
       numbers: '/[0-9]+?/',
        keyword1: ' THEMENBEREICH ZEIT AUS BIS GIB HAT IST MAX MIN MIT TYP VAR VON'
        
        },
      contains: [
          {
            className: 'string',
            begin: "'",
          end: "'",
         // contains: [hljs.BACKSLASH_ESCAPE]
          },
          
      hljs.COMMENT(
            '"', // begin
            '"'  // end
      )
        ]
    };
    })

  }

  updateCodeSyntaxHighlighting = () => {
    document.querySelectorAll("pre code").forEach(block => {
      hljs.highlightBlock(block);
    });
  };
  
handle(event){
    this.setState({
        data:event.target.value
  })
}

  render() {
    let eingabe = this.state.data
     return (
      <div>
        <textarea cols="30" rows="5" type="text"  onChange={this.handle.bind(this)}/>
        <br/>
        <button   onClick={this.updateCodeSyntaxHighlighting.bind(this)}>   clik   </button>
        <pre><code class="pl"> 
       
        {this.state.data} 
        </code></pre>
          
      </div>
    )
  }
}
0
alaa zetouny 18 Ноя 2020 в 16:38

1 ответ

Лучший ответ

Создайте отдельные правила вместо использования keywords.

contains: 
[
  { 
    className: "number",
    begin: /\d+/
  },
  {
    className: "symbol",
    begin: /+/
  }
]

И т.п.

Или вы можете попробовать keywords.$pattern = /\S+/, т.е. ключевое слово - это любой список последовательных символов, не содержащий пробелов ...

https://highlightjs.readthedocs.io/en/latest/language-guide.html#keywords

0
Josh Goebel 14 Дек 2020 в 06:01