All I want to do is highlight "hello"

Lezer
1

Is there anyone here that can give me a simple example of how to highlight for example the word “hello” in a specific color?

2

Something like this

1 Like
3

Thanks for the reply!
However, I have failed to give enough information about my current setup to solve my actual issue.
Apologies for that.

I am trying to create a CodeMirror Language Package for a language for which there currently does not exist one.

My current project is a clone from the template CodeMirror 6 language package template, which can be found [here](https://CodeMirror 6 language package template).

I have a collection of strings, e.g. “Alice”, “Bob”, “Charlie” that I want to highlight.
Ideally, I would be able to control the color of what my collection of strings is highlighted as.

I was trying to use the @lezer/highlight package, creating a custom tag I thought I could just attribute a color to, as well as attribute my collection above to it, but am still struggling a bit to understand how everything relates to each other.

The following are the main relevant files, located in the src folder:

File 1: syntax.grammar

@top Program { expression* }

@skip { space | LineComment }

expression {
  Identifier |
  String |
  Boolean |
  Application { "(" expression* ")" }
}

@tokens {
  Identifier { $[a-zA-Z_\-0-9]+ }

  String { '"' (!["\\] | "\\" _)* '"' }

  Boolean { "#t" | "#f" }

  LineComment { ";" ![\n]* }

  space { $[ \t\n\r]+ }

  "(" ")"
}

@detectDelim

File 2: index.ts

import {parser} from "./syntax.grammar"
import {LRLanguage, LanguageSupport, indentNodeProp, foldNodeProp, foldInside, delimitedIndent} from "@codemirror/language"
import {styleTags, tags as t} from "@lezer/highlight"

export const coqLanguage = LRLanguage.define({
  parser: parser.configure({
    props: [
      indentNodeProp.add({
        Application: delimitedIndent({closing: ")", align: false})
      }),
      foldNodeProp.add({
        Application: foldInside
      }),
      styleTags({
        Identifier: t.variableName,
        Boolean: t.bool,
        String: t.string,
        LineComment: t.lineComment,
        "( )": t.paren
      })
    ]
  }),
  languageData: {
    commentTokens: {line: ";"}
  }
})

export function coq() {
  return new LanguageSupport(coqLanguage)
}
4

Style tags are assigned to syntax node types, so you’ll need to differentiate these words in your grammar. Probably through @specialize or an external specializer. Then a highlighter (or HighlightStyle) can assign a color to the tag.

5

Nice example, thanks! Can MatchDecorator support multi-line regexes (eg /""".*?"""/sg), or does that require proper lezer parsing?

If it does require a proper lezer parser, is there an extremely minimal example of the above (or similar)?

6

That is an question that a quick look at the docs could answer for you.

7

Thanks, I was pretty sure that was the case, and even tested it in the playground, but was interested in what the simplest alternative would be. :smile:

Not sure where I can find simple lezer parser examples. I did search a bit without luck.