Syntax Highlighting for React StructuredText

samrobbinsgb · February 28, 2021, 10:26am

Is there a way to integrate syntax highlighting into the StructuredText component for React, ideally using Prism.js. I think this might be possible using the customRules prop, but I can’t find any documentation on how to use it.

s.verna · March 3, 2021, 8:06am

Hi! Take a look at our website code! We’re using Prism.js ourselves!

github.com

datocms/new-website/blob/master/components/PostContent/index.js#L193-L203


renderRule(isCode, ({ node, key }) => {
  return (
    <Prism
      key={key}
      code={node.code}
      language={node.language || 'unknown'}
      highlightLines={node.highlight}
      showLineNumbers={node.code.split(/\n/).length > 10}
    />
  );
}),

samrobbinsgb · March 3, 2021, 11:54am

Oh brilliant, thanks so much!!