How to get react-codemirror markdown different styling?

1

I am creating a Typescript-React app and using @uiw/react-codemirror package. I am not sure how to change stylings of different things in markdown editor… Currently, I am using this code (Please ignore the chakra UI code): -

import { Box } from '@chakra-ui/react'
import CodeMirror from '@uiw/react-codemirror'
import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
import { languages } from '@codemirror/language-data'

const code = `
# Heading level 1
## Heading level 2
### Heading level 3
`
const Editor = (): JSX.Element => {
  return (
    <Box w="100%" h="100%">
      <CodeMirror
        height="100vh"
        value={code}
        extensions={[
          markdown({ base: markdownLanguage, codeLanguages: languages }),
        ]}
        onChange={(value, viewUpdate) => {
          console.log(value)
          console.log(viewUpdate)
        }}
      />
    </Box>
  )
}

export default Editor

image
image763×552 59.5 KB

Basically I want headings to have different sizes. How can I accomplish that?
Some old answers said to add css but dont think it works like that anymore…

2

Put something like this in your extension array:

import {defaultHighlightStyle, syntaxHighlighting, HighlightStyle} from "@codemirror/language"
import {tags} from "@lezer/highlight"

// in extensions
  syntaxHighlighting(defaultHighlightStyle),
  syntaxHighlighting(HighlightStyle.define([
    {tag: tags.heading1, fontSize: "150%"},
    {tag: tags.heading2, fontSize: "140%"},
    {tag: tags.heading3, fontSize: "130%"},
    // etc
  ]))
1 Like
3

It worked, thanks for that!