How to get react-codemirror markdown different styling?

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%">
          markdown({ base: markdownLanguage, codeLanguages: languages }),
        onChange={(value, viewUpdate) => {

export default Editor

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…

Put something like this in your extension array:

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

// in extensions
    {tag: tags.heading1, fontSize: "150%"},
    {tag: tags.heading2, fontSize: "140%"},
    {tag: tags.heading3, fontSize: "130%"},
    // etc
1 Like

It worked, thanks for that!