使用 Highlight.js 突出显示符号和数字

Question

我想使用 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>
    )
  }
}

Answer 1

制定单独的规则，而不是使用 keywords。

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

等等

或者您可以尝试 keywords.$pattern = /\S+/，即关键字是任何不包含 space...

的连续字符列表

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

使用 Highlight.js 突出显示符号和数字

Highlight symbols and numbers with Highlight.js

javascript

highlight.js