Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Enhancement] Readjust few new tokens for HTML

See original GitHub issue

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

  1. Using Dracula theme, compare <!DOCTYPE html>, entirely highlighted as pink by the class token.doctype in Prismjs, but in VSCode, it is different:

    prismjs

    vscode

    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.

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

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

    prismjs

    vscode

    Solution:

    • Separate the ASCII codes (beginning with & and &# and ending with ;) from the entities and create the new class token.ascii.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
gusbemacbecommented, May 10, 2020

Hello @RunDevelopment

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

1reaction
RunDevelopmentcommented, May 10, 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;
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML Enhancement Options - Issuetrak Help Center
This section describes how to create a new custom CSS property that will be applied to an element of your choosing when Dark...
Read more >
16.1. Customization — privacyIDEA 3.7 documentation
Some tokens allow a special customization. The paper token allows you to add CSS for styling the printed output and add additional headers...
Read more >
Enhancing Web Application Security with Secure Hardware ...
At present, there is no common standard for web applications to communicate and use secure hardware tokens. The new W3C WebCrypto API does...
Read more >
Dashboard Studio: It's the Little Things - Splunk
Additional metadata support for search-based tokens; Ability to edit permissions while viewing a Studio dashboard; Enhanced security by ...
Read more >
Access & Refresh Tokens | Online Help - Zoho CRM
Generate Access Token and Refresh Token. OAuth2.0 requests are usually authenticated with an access token, which is passed as bearer token.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

unclean work with class names (adding unneeded spaces during DOM manipulations)

Next page

Autoloader plugin feature: Support callback