how to change the hightlighting style in my theme file

[sytpb]

my next.js project with react .

babelrc setup

"plugins": [
  [
    "prismjs",
    {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"],
      "theme": "twilight",
      "css": true
    }
  ]
]

I want some token be changed with my customization style , such as font-size 18px , color: my color .

i changed the file node_modules\prismjs\themes\prism-twilight.css

but it doesn't work for me .

[RunDevelopment]

To modify a theme, just copy the CSS file into your project directory and call it something like custom-theme.css, make your modifications to custom-theme.css, and then import it.

[sytpb]

 .token.tag,
 .token.boolean,
 .token.number,
 .token.deleted {
     color: white; /* #CF6A4C #f472b6*/
     font-size: 24px;
 }

[RunDevelopment]

This might be because of the order in which you import the types. Be sure to import your CSS file after Prism's. Otherwise, Prism's theme will override your styles. Here's a good article explaining it in full.

[sytpb]

and i render two code snippet , html works , javascript not work .

const wrapper = () => {
  return (
    <div>
      <Code code={htmlCode} language="html" />
      <Code code={JSCode} language="javascript" />
    </div>
  )
};

[RunDevelopment]

I'm sorry, but I don't think that I can help you with that. This isn't an issue with Prism itself, but with your styles/project setup. I've never worked with Next.JS before, so I can't even make guesses as to what the problem might be.

[sytpb]

Yeah , this isn't an issue for prism . Nice for you , you really help me a lot . thanks a again .