[Enhancement] Readjust few new tokens for HTML #2338

gusbemacbe · 2020-04-29T02:15:59Z

Hello @Golmote, @RunDevelopment, @mAAdhaTTah and @zeitgeist87!

Description

In reference to dracula/prism#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 class token.doctype in 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-name which will regex DOCTYPE or doctype;
- You should create the new class token.doctype-html which will regex html.
Observe the same images, you can see the different colour of = (equal symbol) and of quotation marks, which belong to the class token.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 the token.punctuation only if you add language-html, language-markup and language-php.

Solution:
- Create the new class language-xxx (html, markup and php) token.punctuation-equal for equal symbol;
- Create the new class language-xxx (html, markup and php) token.punctuation-quotes for quotation marks.
Using the Dracula theme ASCII codes are highlighted as pink, and declared by the class .token.entity by Prismjs, while Dracula's specific documentation’s HtmlTags declares 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 class token.ascii.

The text was updated successfully, but these errors were encountered:

RunDevelopment · 2020-04-30T11:30:51Z

I implemented most of your suggestions and you should now be able to implement the theme.
Some notes:

I called DOCTYPE .doctype-tag to be more consistent with other tags. html is called .name because it's really just a name and nothing special. See the XML spec on doctype for more info.
I only implemented .punctuation-equal but as .attr-equal to be more consistent with .attr-name and .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 .entity token, the encoded character will be displayed).

I hope it still works for even with the changes I made.

gusbemacbe · 2020-05-01T04:45:01Z

Great, @RunDevelopment! I'll clone, compile and test it.

gusbemacbe · 2020-05-03T03:51:56Z

@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.

RunDevelopment · 2020-05-03T11:15:43Z

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.

gusbemacbe · 2020-05-07T03:34:24Z

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);
}

RunDevelopment · 2020-05-07T11:45:00Z

That's because # doesn't have a name. & and < are examples of named entities.

gusbemacbe · 2020-05-08T22:10:14Z

That's because # doesn't have a name. & and < are examples of named entities.

Maybe we need to create a new alias?

RunDevelopment · 2020-05-09T11:33:04Z

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?

gusbemacbe · 2020-05-10T06:25:54Z

Why?

Because, to mimic the VSCode theme, and following Dracula's documentation, the unnamed entities have to be purple instead of pink.

RunDevelopment · 2020-05-10T12:52:11Z

So like this?

(Sorry for the bad contrast)

gusbemacbe · 2020-05-10T13:26:34Z

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.

RunDevelopment · 2020-05-10T13:35:16Z

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;
}

gusbemacbe · 2020-05-10T15:23:37Z

Hello @RunDevelopment

You figured and got it. Thank you! I'm going to test it.

gusbemacbe · 2020-06-25T08:04:47Z

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 · 2020-06-25T08:16:33Z

Sorry, it worked now, because you used markup instead of html.

gusbemacbe added the enhancement label Apr 29, 2020

This was referenced Apr 30, 2020

Markup: Added tokens inside DOCTYPE #2349

Merged

Markup: Added attr-equals alias #2350

Merged

Markup: Added alias for named entities #2351

Merged

RunDevelopment closed this as completed May 19, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Enhancement] Readjust few new tokens for HTML #2338

[Enhancement] Readjust few new tokens for HTML #2338

gusbemacbe commented Apr 29, 2020

RunDevelopment commented Apr 30, 2020

gusbemacbe commented May 1, 2020

gusbemacbe commented May 3, 2020

RunDevelopment commented May 3, 2020 •

edited

Loading

gusbemacbe commented May 7, 2020

RunDevelopment commented May 7, 2020

gusbemacbe commented May 8, 2020

RunDevelopment commented May 9, 2020

gusbemacbe commented May 10, 2020

RunDevelopment commented May 10, 2020

gusbemacbe commented May 10, 2020

RunDevelopment commented May 10, 2020

gusbemacbe commented May 10, 2020

gusbemacbe commented Jun 25, 2020

gusbemacbe commented Jun 25, 2020

[Enhancement] Readjust few new tokens for HTML #2338

[Enhancement] Readjust few new tokens for HTML #2338

Comments

gusbemacbe commented Apr 29, 2020

Description

Alternatives

RunDevelopment commented Apr 30, 2020

gusbemacbe commented May 1, 2020

gusbemacbe commented May 3, 2020

RunDevelopment commented May 3, 2020 • edited Loading

gusbemacbe commented May 7, 2020

RunDevelopment commented May 7, 2020

gusbemacbe commented May 8, 2020

RunDevelopment commented May 9, 2020

gusbemacbe commented May 10, 2020

RunDevelopment commented May 10, 2020

gusbemacbe commented May 10, 2020

RunDevelopment commented May 10, 2020

gusbemacbe commented May 10, 2020

gusbemacbe commented Jun 25, 2020

gusbemacbe commented Jun 25, 2020

RunDevelopment commented May 3, 2020 •

edited

Loading