Prism: [Enhancement] Readjust few new tokens for HTML
Hello @Golmote, @RunDevelopment, @mAAdhaTTah and @zeitgeist87!
Description
In reference to https://github.com/dracula/prism/issues/11, I followed the Dracula's specific documentation. Imitating and mimicking the HTML syntax highlighting in VSCode, there are small differences between Prism's HTML and VSCode's HTML syntax highlightings. See the alternatives with solutions:
Alternatives
Using Dracula theme, compare
<!DOCTYPE html>, entirely highlighted as pink by the classtoken.doctypein Prismjs, but in VSCode, it is different:
Solution:
- You should maintain the class
token.doctype, which will regex the whole<!DOCTYPE html>, but; - You should create the new class
token.doctype-namewhich will regexDOCTYPEordoctype; - You should create the new class
token.doctype-htmlwhich will regexhtml.
- You should maintain the class
Observe the same images, you can see the different colour of
=(equal symbol) and of quotation marks, which belong to the classtoken.punctuation, of which brackets and parentheses also make part. But to get the same result, you should separate the equal symbol and the quotation marks from thetoken.punctuationonly if you addlanguage-html,language-markupandlanguage-php.Solution:
- Create the new class
language-xxx(html,markupandphp)token.punctuation-equalfor equal symbol; - Create the new class
language-xxx(html,markupandphp)token.punctuation-quotesfor quotation marks.
- Create the new class
Using the Dracula theme ASCII codes are highlighted as pink, and declared by the class
.token.entityby Prismjs, while Dracula's specific documentation鈥檚HtmlTagsdeclares the colour as purple, as we see in VSCode. If I change the colour to purple, all the entities also will become purple, the ASCII codes should be separated from the classes, the entities and the functions.
Solution:
- Separate the ASCII codes (beginning with
&and&#and ending with;) from the entities and create the new classtoken.ascii.
- Separate the ASCII codes (beginning with
gusbemacbe
All 15 comments
I implemented most of your suggestions and you should now be able to implement the theme.
Some notes:
- I called
DOCTYPE.doctype-tagto be more consistent with other tags.htmlis called.namebecause it's really just a name and nothing special. See the XML spec on doctype for more info. - I only implemented
.punctuation-equalbut as.attr-equalto be more consistent with.attr-nameand.attr-value. Since you can now properly distinguish=for other punctuation, you can still implement special highlighting for quotes, so I hope that's alright. - I added an alias for named entities (
.named-entity) because I think that's more descriptive than.ascii. I also went for an alias because it is compatible with the entity plugin markup has (when you hover over an.entitytoken, the encoded character will be displayed).
I hope it still works for even with the changes I made.
RunDevelopment
on 30 Apr 2020
Great, @RunDevelopment! I'll clone, compile and test it.
gusbemacbe
on 1 May 2020
@RunDevelopment
I cloned your repository RunDevelopment/prism. For days, I tried to merge and compile, but your different three branches merged into one branch never worked and always gave errors.
gusbemacbe
on 3 May 2020
Yes, merging them won't work. prism-markup.min.js will cause conflicts. It's easy to resolve because all .min.js files are generated, so the conflict is resolved by regenerating them using our build system.
Well, it's easy once you know about the build system and which files you can basically ignore during a merge conflict. Maybe I should add that to the readme.
Here's a branch which has the changes of all 3.
RunDevelopment
on 3 May 2020
Hello @RunDevelopment !
Thank you for creating the branch and merging all the branches. I git-pulled the upstream.
I copied the latest prism.js. I have just tested, but only named-entity does not work, because it does not appear in the compiled HTML file even if named-entity is already present in the file prism.js:
My CSS was:
.token.entity
{
color: var(--pink);
}
.token.entity.named-entity
{
color: var(--purple);
}
.language-html .token.entity
{
color: var(--pink);
}
.language-html .token.entity.named-entity
{
color: var(--purple);
}
That's because # doesn't have a name. & and < are examples of named entities.
RunDevelopment
on 7 May 2020
That's because
#doesn't have a name.&and<are examples of named entities.
Maybe we need to create a new alias?
gusbemacbe
on 9 May 2020
Why?
From what I see, there are two kinds of entities: named ones (e.g. &) and unnamed ones (e.g. A and A). You can differentiate them by the presence of the .named-entity alias. So why do we need a new alias?
RunDevelopment
on 9 May 2020
Why?
Because, to mimic the VSCode theme, and following Dracula's documentation, the unnamed entities have to be purple instead of pink.
gusbemacbe
on 10 May 2020
So like this?
(Sorry for the bad contrast)
RunDevelopment
on 10 May 2020
Hello @RunDevelopment !
Yes, it is. Both they have to be pink. Actually they have to be purple because, in Dracula-themed VSCode, both named and unnamed entities are purple.
I need to see if .token.entity, which I would set to Dracula's purple colour, also will affect the entities in other languages, which need to remain pink.
gusbemacbe
on 10 May 2020
So the normal color of all entities is pink and only the unnamed entities in markup are purple?
Like this:
.token.entity {
color: pink;
}
.language-markup .token.entity:not(.named-entity) {
color: purple;
}
Hello @RunDevelopment
You figured and got it. Thank you! I'm going to test it.
gusbemacbe
on 10 May 2020
Hello @RunDevelopment
With your pull request merged, the colours do not work anymore:
It seems that the site of Prismjs did not update the developer file.
gusbemacbe
on 25 Jun 2020
Sorry, it worked now, because you used markup instead of html.
gusbemacbe
on 25 Jun 2020
Related issues
sheljohn
路
4Comments
timgoeller
路
4Comments
RunDevelopment
路
5Comments
timehat
路
4Comments
brian-kephart
路
6Comments