No way to change font with inline styles

Browsers have the following default css:

code {
  font-family: monospace;
}

That means that currently there’s no way to change the font when using react-syntax-highlighter without a <style> element overriding that. If you add a fontFamily style to the <pre> element, it has no effect.

It seems like a good solution would be to add fontFamily: inherit to the <code> element, but that’d be a breaking change for some, probably.

[conorhastings]

@bmathews ended up implementing this as codeTagProps - just to satisfy other potential use cases (adding a className to the element etc…)

https://github.com/conorhastings/react-syntax-highlighter/commit/a79352ad63239d6809630e23ff540a11df2950aa

so for your use case you could do something like

<SyntaxHighlighter 
  codeTagProps={{style: {fontFamily: 'inherit'} }}
/>

Let me know if this works for you!

[bmathews]

That’s perfect! Thanks so much!