Finer grained theme type selectors

[tim-soft]

Let's say I have three different punctuation tokens: span.token.tag.spread.punctuation, span.token.tag.script.punctuation and span.token.tag.punctuation.

To get closer to a vscode dark+ theme, the first two tags are actually a different color than the last.

As far as I can tell, the theme type only allows for styling all three as the same color

{
  types: ['punctuation'],
  style: {
    color: 'rgb(212, 212, 212)'
  }
}

Is there currently a way to select all three types individually in the theme?

edit: doesn't seem likely at the moment https://github.com/FormidableLabs/prism-react-renderer/blob/64f879aa396107457770a117f4b6178078b11000/src/components/Highlight.js#L94

an extra check if the token's entire classname list matches a type in the theme could get around this, so the theme would look like

{
  types: ['tag script punctuation',  'tag spread punctuation'],
  style: {
    color: 'rgb(212, 212, 212)'
  }
},
{
  types: ['tag punctuation'],
  style: {
    color: 'rgb(212, 212, 212)'
  }
}

[roydukkey]

Additionally, for this example:

const prismIncludeLanguages = (Prism) => {
  // ...

  additionalLanguages.forEach((lang) => {
    require(`prismjs/components/prism-${lang}`); // eslint-disable-line
  });

  require('/path/to/your/prism-language-definition');

  // ...
};

1. { on line 1 gets:

   <span class="token punctuation">{</span>
   

2. ${ on line 5 gets:

   <span class="token template-string interpolation interpolation-punctuation punctuation">${</span>
   

How would you determine the precedence of punctuation and interpolation-punctuation?

{
  styles: [
    {
      types: ['punctuation'],
      style: {
        color: '#DEE0E3'
      }
    },
    {
      types: ['interpolation-punctuation'],
      style: {
        color: '#F3AFE6'
      }
    }
  ]
}

I would have figured the last one defined in the styles property would take precedence, but that not the way things current work. But, even swapping the order doesn't change anything either.

[karlhorky]

@kitten I guess there's no way to achieve this currently, right?

I'm improving the VS Code Dark theme with my changes from the react-syntax-highlighter theme, but there are some things that prism-react-renderer doesn't seem to be able to represent...

[karlhorky]

FWIW I implemented something similar in react-syntax-highlighter last year, and it wasn't a crazy big change:

https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/305

[karlhorky]

@carbonrobot is this really completed? Where can we see the documentation of this feature?

[carbonrobot]

We don't have any plans to support this at this time.

[karlhorky]

Ok, thanks for the reply. I guess the close reason is "Not Planned" then - I was confused by the "Completed" reason selected above.

[carbonrobot]

Sorry about that, our script is a little overzealous as we go through and try to clean up issues in our open source that is several years old.