uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.69k stars 135 forks source link

How do I apply color styling to backticks? #562

Closed brgndyy closed 1 year ago

brgndyy commented 1 year ago

Hello, I am currently creating a custom theme. "``` typescript" I also want to add a different color to the part where I enter the backtick. What is this part called? Currently, specifying quote, comment or other tags does not apply.

const myTheme = createTheme({
  theme: "dark",
  settings: {
    background: "#171717",
    foreground: "#ffffff",
    caret: "#8a7878",
    selection: "#212121",
    selectionMatch: "#212121",
    lineHighlight: "#8a91991a",
    gutterBackground: "#9e7575",
    gutterForeground: "#8a919966",
  },
  styles: [
    { tag: t.comment, color: "#5c6370;" },
    { tag: t.variableName, color: "#0080ff" },
    { tag: [t.string, t.special(t.brace)], color: "#5c6166" },
    { tag: t.number, color: "#5c6166" },
    { tag: t.bool, color: "#5c6166" },
    { tag: t.null, color: "#5c6166" },
    { tag: t.keyword, color: "#5c6166" },
    { tag: t.operator, color: "#5c6166" },
    { tag: t.className, color: "#5c6166" },
    { tag: t.definition(t.typeName), color: "#5c6166" },
    { tag: t.typeName, color: "#5c6166" },
    { tag: t.angleBracket, color: "#5c6166" },
    { tag: t.tagName, color: "#5c6166" },
    { tag: t.attributeName, color: "#5c6166" },
    { tag: t.heading1, fontWeight: "bold", fontSize: "2.5rem" },
    { tag: t.heading2, fontWeight: "bold", fontSize: "2rem" },
    { tag: t.heading3, fontWeight: "bold", fontSize: "1.17em" },
    { tag: t.heading4, fontWeight: "bold", fontSize: "1em" },
    { tag: t.heading5, fontWeight: "bold", fontSize: ".83em" },
    { tag: t.heading6, fontWeight: "bold", fontSize: ".67em" },
    { tag: t.strong, fontWeight: "bold" },
    { tag: t.typeName, color: "#5c6370" },
    { tag: t.quote, color: "#5c6370" },
    { tag: t.blockComment, color: "#5c6370" },
    { tag: t.bracket, color: "#5c6370" },
  ],
});