PrismJS.com download page doesn't include Git language CSS

[ccoley]

The download page on the website doesn't add the CSS rules for the Git language. Is this a bug or am I supposed to go get the proper CSS from @lgiraudel manually?

[LeaVerou]

No, you shouldn’t be required to get it manually. @lgiraudel ?

[ccoley]

You can see on your test page. If you add the CSS from @lgiraudel's repo the syntax highlighting for the commit SHA is better.

Before adding the CSS:

After adding the CSS via inspector:

[apfelbox]

The CSS is included, but the token commit_sha1 is currently unstyled in every theme.

[lgiraudel]

I didn't had any git-specific token in the themes like commit_sha1, command (even if it's also relevant in Bash language) or coord.
Should I create a separate Git CSS ? Or the themes should contain all tokens of all languages ?

[apfelbox]

As a matter of principal every theme should contain all styled tokens - so that you only have to download one theme file and be done.

In reality, the number of different tokens would explode. That's why you can alias your custom token to an existing one and take the styling from it ("alias" in the docs). That's what I would do in this case.

[lgiraudel]

I understood the principle of aliases but it sounds weird to me to use an alias just for a matter of color. I'm fine with aliasing "git comment" by "comment" but what should be the alias of "git sha1" or "git diff coordinates" ?

[apfelbox]

The alias is in fact just for the styling, for nothing else (or at least that's the main use case). 😉

[lgiraudel]

Ok, then I'll add an alias for each token.

Is this ok to update example.html to add some examples for each language (git in my case) ?

[LeaVerou]

I’m not comfortable with the idea of aliasing tokens to completely irrelevant tokens just for styling. I thought aliasing was for metadata or subcategories, or tokens that could be considered similar. If there’s NO existing token that could fit, please just add a new one (to one of the existing colors).

[lgiraudel]

Maybe we should have a common stylesheet for each theme and a language-specific stylesheet (for each theme too). It's the JS approach, it seems relevant to have the same thing for CSS.

A negative point is the obligation to repeat colors in the language-specific CSS. A CSS pre-processor should avoid that but it's heavy for color variables.

[LeaVerou]

There’s definitely the need to solve this in a generic way. It’s troubling me since the beginning, but until now others hadn’t noticed the problem :P

[mAAdhaTTah]

The effective use of a CSS preprocessor could solve this. You could just create one partial that implements all the of the styling on all of the classes, and each theme would just become a list of variables for the particular color/layout scheme. Then, when you need to add a new token, you add the class to the partial with a default color variable, and now all of the themes will have it without any extra work.

Each theme would be able to override the defaults if they wanted as well, but it would give you a single place to add new tokens.

I'd be willing to contribute if this is something you're interested in. Just let me know which preprocessor you prefer.

@lgiraudel Not sure what you mean by "heavy for color-variables" - the pre-processor gets compiled to CSS, so I don't think there's any additional "heaviness."

[lgiraudel]

By "heavy" I mean that a Prism user shouldn't have to install a Less or Sass environment to generate code highlighting CSS : the CSS should be contained in Prism sources.

[mAAdhaTTah]

Yeah, we'll have to include the compiled CSS in the repo.

[joshgoebel]

I understood the principle of aliases but it sounds weird to me to use an alias just for a matter of color. I'm fine with aliasing "git comment" by "comment" but what should be the alias of "git sha1" or "git diff coordinates" ?

You're not aliasing colors. You're aliasing semantics.

• Your language might call them "annotations", you'd alias that to "comment".
• Your language might call them "slots", perhaps you'd alias to "variable"
• You have "sha_commit", perhaps your alias that to "tag" or "important"

It is a difficult problem when nothing that exists seems to be a good match, but that's a hard problem to solve - since you can't just have 1000 different CSS attributes in every theme - at some point you have to agree on comment elements with semantic meaning.