Syntax highlight- finer control of styles

[dlewand691]

I'm trying to figure out how to have finer control of the individual spans of highlighted syntax so each part of a tag can be styled.

For example, the current HTML/CSS styling looks like:

But I'd like it to look like:

I noticed that issue #62 references specimen language selecting, but don't see it available in the documentation.

I found this info on the PrismJS site: http://prismjs.com/faq.html#how-do-i-know-which-tokens-i-can-style-for

Are these styles something that could be set in the configuration? Something like:

codeStyles: {
        tag: {
            color: '#FF5555',
            punctuation: {
                color: '#0000ff'
            }
            
        }

Thank you!

[jstcki]

You should be able to pass any PrismJS styles to the theme configuration (see default theme).

E.g.

<Catalog theme={{ codeStyles:{ /* Prism styles here */ } }} />

[dlewand691]

When looking at the Prism CSS class names, the ones with dashes in the name don't work:

.token.class-name {
	color: #DD4A68;
}

Tried several variations of this ('class-name', class, className, without the token, with [], etc) but none worked:

codeStyles: {
        token: {
            className: {
                color: 'purple'
            }
        },
...

codeStyles: {
        token: [{
            className: {
                color: 'purple'
            }
        }],
...

[ryanaltvater]

Any updates to this? I'm experiencing (and desiring) the same thing, greater control. The provided "default theme" example gives me the same output as the original poster's example image which is why I'm here in the first place. :) I'd like better syntax highlighting like you'd find on here and the editors we use everyday, if possible.