question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to style specific nested tokens?

See original GitHub issue

Is your feature request related to a problem? Please describe.

The built-in styles include nested token styles like this:

https://github.com/conorhastings/react-syntax-highlighter/blob/master/src/styles/prism/ghcolors.js#L163

However as far as I can tell they don’t actually seem to work.

Describe the solution you’d like

It would be great if there was some way to target nested tokens like you can when writing a CSS theme for Prism/Highlight.

Describe alternatives you’ve considered

Tried a bunch of syntaxes to see if anything worked:

<SyntaxHighlighter
  style={{
    '.token.atrule .token.rule': { background: 'pink' }
    'atrule rule': { background: 'pink' }
    'atrule.rule': { background: 'pink' }
  }}
  {/* ... */}
/>

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
karlhorkycommented, Oct 4, 2020

@adamwathan a solution from #305 has now been merged and is available in react-syntax-highlighter@15.0.1!

If it works for you, maybe this issue can be closed 😃

0reactions
karlhorkycommented, Aug 24, 2020

Opened a PR with this approach at https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/305 - of course open for feedback and changing the approach!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to manage your Design Tokens with Style Dictionary
Recently I have come across a tool, called Style Dictionary, developed by Danny Banks at Amazon, that allows you to manage design tokens...
Read more >
how to add styles inside nested routes react router
1 Answer 1 ... Create a layout route that renders the div element and style and an Outlet component for the nested Route...
Read more >
Multiple Nested Styles In InDesign - YouTube
This video shows you how to save time by applying multiple Nested Styles to listings In InDesign.
Read more >
css simple selector - style nested elements - CodePen
Insecure Resource. The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https....
Read more >
Can I use a drop cap/nested style up to a specific digit. - Reddit
Yes, you can use nested style for that. Just assign the character style to bold, through 1 ":". There is no option for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found