How to highlight the editor in markdown mode?

v6
1

In markdown mode, I want to implement syntax highlighting, such as code block, title, list, etc. But I didn’t find the relevant documents

2

did you happen to figure this out?

3

You need to use the markdown language extension, and you need to supply a list of compatible code languages. Here’s an example of my implementation. Happy to answer any questions you have.

4

@marijn do you know how to get this working? I tried:


const MARKDOWN_LANGUAGES = [
  () => wastLanguage,
  () => StreamLanguage.define(yaml),
  () => cssLanguage,
  () => jsxLanguage,
  () => tsxLanguage,
  () => cppLanguage,
  () => htmlLanguage,
  () => javaLanguage,
  () => markdownLanguage,
  () => phpLanguage,
  () => pythonLanguage,
  () => rustLanguage,
  () => StandardSQL.language,
  () => xmlLanguage,
  () => lessLanguage,
  () => sassLanguage,
  () => clojureLanguage,
  () => csharpLanguage,
  () => jsonLanguage,
  () => brainfuckLanguage,
  () => StreamLanguage.define(stex),
  () => StreamLanguage.define(lua),
  () => StreamLanguage.define(ruby),
  () => StreamLanguage.define(cmake),
  () => StreamLanguage.define(cobol),
  () => StreamLanguage.define(coffeeScript),
  () => StreamLanguage.define(commonLisp),
  () => StreamLanguage.define(crystal),
  () => StreamLanguage.define(dockerFile),
  () => StreamLanguage.define(elm),
  () => StreamLanguage.define(erlang),
  () => StreamLanguage.define(fortran),
  () => StreamLanguage.define(gherkin),
  () => StreamLanguage.define(go),
  () => StreamLanguage.define(haskell),
  () => StreamLanguage.define(haxe),
  () => StreamLanguage.define(http),
  () => StreamLanguage.define(julia),
  () => StreamLanguage.define(mathematica),
  () => StreamLanguage.define(nginx),
  () => StreamLanguage.define(pascal),
  () => StreamLanguage.define(pegjs),
  () => StreamLanguage.define(perl),
  () => StreamLanguage.define(pig),
  () => StreamLanguage.define(powerShell),
  () => StreamLanguage.define(protobuf),
  () => StreamLanguage.define(puppet),
  () => StreamLanguage.define(r),
  () => StreamLanguage.define(scheme),
  () => StreamLanguage.define(shell),
  () => StreamLanguage.define(smalltalk),
  () => StreamLanguage.define(sparql),
  () => StreamLanguage.define(swift),
  () => StreamLanguage.define(textile),
  () => StreamLanguage.define(toml),
  () => StreamLanguage.define(vb),
  () => StreamLanguage.define(vbScript),
  () => StreamLanguage.define(verilog),
]

Using with:

import { markdown, markdownLanguage } from '@codemirror/lang-markdown'

markdown({
    base: markdownLanguage,
    codeLanguages: MARKDOWN_LANGUAGES,
  })

But it says:

Type '((() => LRLanguage) | (() => Language))[]' is not assignable to type 'readonly LanguageDescription[] | ((info: string) => Language | LanguageDescription | null) | undefined'.
  Type '((() => LRLanguage) | (() => Language))[]' is not assignable to type 'readonly LanguageDescription[]'.
    Type '(() => LRLanguage) | (() => Language)' is not assignable to type 'LanguageDescription'.
      Type '() => LRLanguage' is not assignable to type 'LanguageDescription'.ts(2322)

So how do I get this working with all languages highlighted in code blocks?

Ideally we could do GFM github flavored markdown.

5