Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adapt theme to the official spec #11

Open
zenorocha opened this issue Apr 28, 2020 · 6 comments
Open

Adapt theme to the official spec #11

zenorocha opened this issue Apr 28, 2020 · 6 comments
Assignees
@gusbemacbe

Comments

@zenorocha
Copy link
Contributor

Hey @gusbemacbe, I was looking at the screenshot today, and I think we have to review the colors that are being applied to each symbol. You can take a look at the VSCode theme and the spec for more information.
@gusbemacbe
Copy link
Collaborator

gusbemacbe commented Apr 28, 2020 •
edited
Loading

Hello @zenorocha !

I will work on it.

Not just the screenshot, you can check the old https://github.com/dracula/prism/blob/master/index.html (or the direct link https://dracula.github.io/prism/) to check the preview of each development language, using Prismjs.

I will move something from this index.html to the header Basic in the file INSTALL.md. What do you think about?

@gusbemacbe gusbemacbe self-assigned this Apr 28, 2020
@gusbemacbe
Copy link
Collaborator

@zenorocha

I followed the specific documentation, but the syntax highlighting got horrible. I imitated the HTML syntax highlighting viewed in VSCode.

Syntax-highlightng the ASCII codes, declared by the class .token.entity by Prismjs, while HtmlTags declares the colour as pink, but at the HTML file viewed in VSCode, it is declared as purple.

There is another disadvantage: <!DOCTYPE html> is entirely declared by the class token.doctype as pink in Prismjs, but at the HTML file viewed in VSCode like:

image

You can test with the new file test.html: https://dracula.github.io/prism/test.html

I am still working on it, to improve the CSS and JavaScript embedded in HTML, syntax-highlighted by Prismjs.

@zenorocha
Copy link
Contributor Author

Got it! Yeah, it's very hard to be 100% accurate, since each syntax highlighter works differently, but the closer we can get it's better.

@gusbemacbe gusbemacbe mentioned this issue Apr 29, 2020
Closed
@gusbemacbe
Copy link
Collaborator

Hello @zenorocha

I open an issue at Prismjs repository, suggesting a new enhancement of few new tokens there. If they decide not to enhance, we will leave this Prismjs' CSS the same way.

@gusbemacbe gusbemacbe mentioned this issue Jun 25, 2020
Open
@gusbemacbe
Copy link
Collaborator

Hello @zenorocha !

Sorry for my longer absence. I had light COVID-19 symptoms and had to stay at bed for a month. Fortunately I survived.

I have just implemented the HTML syntax highlighting as the Prismjs member has merged. I am implementing the CSS syntax highlighting, but it did not get good, because some VSCode-based Dracula and Prismjs CSS syntax highlightings are different in some cases.

@bigpick
Copy link

bigpick commented Nov 20, 2020 •
edited
Loading

Adding on to what @zenorocha said:

another example (at least I think) is the .token.variable coloring. An example:

Screen Shot 2020-11-20 at 2 44 50 PM

So it seems like the rendered text is overly "comment" colored (whereas the spec says Variable: (Foreground)), so shouldn't that be --foreground?

That then looks like (Not changing anything else)
Screen Shot 2020-11-20 at 2 48 36 PM

(I'd also point at that the one at this prism-themes repo is not any better)

Also, what's the reasoning on using the rgba()s for those few, versus using the vars?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@gusbemacbe gusbemacbe

Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@zenorocha @gusbemacbe @bigpick