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.

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

PrismJS AviSynth Support #384

Closed
Zinfidel opened this issue Sep 3, 2021 · 13 comments
Closed

PrismJS AviSynth Support #384

Zinfidel opened this issue Sep 3, 2021 · 13 comments
Milestone

Comments

@Zinfidel
Copy link
Contributor

Zinfidel commented Sep 3, 2021

Preview of the highlighter in action: https://zinfidel.github.io/

Unfortunately, getting this support on the site might pose maintainability problems. I'll try to outline them with solutions on this issue so they can be discussed. The files you customize and download from https://prismjs.com/download.html are not the files that are created when building the node project locally. To get the files needed for the site, you have to build prismjs, then actually run the website locally (the repo you download is actually their entire website/app) and customize your prismjs with your new stuff, and download.

Actual build steps:

  1. Have node.js and npm installed
  2. Clone zinfidel/prismjs
  3. npm ci
  4. npm run build
  5. npm run start // starts a local http server hosting the website
  6. Customize and download files (prism.js and prism.css)

The primary maintainability problem

I could just hand over the customized prism.js and prism.css files for the site, but I will be customizing that file based on our current desires for languages/themes. In the future if we want to add new language/themes or update prismjs, the avisynth customization is lost. If I'm around and willing to help with new additions, great, otherwise someone needs to be willing to do the above process. There is actually only one new file (prism-avisynth.js) that creates the language, and a modification to one file (components.js) to add it to the customization list.

Possible other solutions

  1. The end result of clicking that download button is that the whole avisynth thing gets minified and somehow inserted into prism.js. It might be a simple and controllable enough addition that a simple script in a build step copies the minified avisynth into prism.js. Then there's no maintenance.
  2. Someone with the repo could modify the build process to automatically produce the end-user files somehow and make that part of the site build. This is way outside of my skillset though.
  3. I perfect the lang definition, write tests and a wiki, submit an official PR, it gets accepted by the prismjs team, and avisynth support is added to their website, thus eliminating all maintenance problems. This however kills the birb.

Theme/Style-Related Stuff

  1. The special last variable is currently set as a token.variable which gives a kind of color vomit problem with the default theme. @vadosnaprimer suggested a more pleasant navy blue, but this requires modifying the theme to achieve. If I change token.variable to navy there, all languages are affected. If I add a new category for the color, then only that theme supports it. What's worth doing here?
  2. What do we think of themes in general? The default is meh IMO.
  3. I made built-in functions and filters categorized one way, and user/external functions get another color. Does this make sense? avisynth is really weird and I'm not sure which distinctions make sense.
@Zinfidel
Copy link
Contributor Author

Zinfidel commented Sep 3, 2021

Requesting input from @TiKevin83 and @vadosnaprimer (even if just for posterity)

@vadosnaprimer
Copy link
Collaborator

vadosnaprimer commented Sep 3, 2021

From what we've tried so far, this highlighter in general is insanely limited. It assigns the same color to PILES of unrelated things, like internal function names and strings. Are there any worthy alternatives to prismjs, like something github uses maybe?

Until then, this PR is a good addition.

@Zinfidel
Copy link
Contributor Author

Zinfidel commented Sep 3, 2021

On the topic of prismjs themes: theres a web interface for making entirely new ones here if that's something people would like to try: http://k88hudson.github.io/syntax-highlighting-theme-generator/www/

Also here's a bunch more premade ones that may be better: https://github.com/PrismJS/prism-themes

@nattthebear
Copy link
Collaborator

From what we've tried so far, this highlighter in general is insanely limited. It assigns the same color to PILES of unrelated things, like internal function names and strings.

Please report this, including examples.

@vadosnaprimer
Copy link
Collaborator

Please report this, including examples.

Nevermind, it looks like with good themes, there will be no problems.

@Zinfidel
Copy link
Contributor Author

Zinfidel commented Sep 4, 2021

I've learned via a short discussion that there isn't an "oficially" supported way to automate the building of PrismJS, but that the author of the program did write a CLI bundler in an unmerged PR.

@nattthebear
Copy link
Collaborator

@Zinfidel Any chance of getting avs support merged into upstream?

@Zinfidel
Copy link
Contributor Author

Zinfidel commented Sep 7, 2021

@nattthebear Because the other options are not great, I've started working on a full PR. So, there's a chance it will get an upstream merge, though it might end up drastically simplified due to performance problems.

I'll keep this issue updated.

@Zinfidel
Copy link
Contributor Author

Here goes nothing: PrismJS/prism#3071

@adelikat adelikat added this to the Future milestone Sep 12, 2021
@Zinfidel
Copy link
Contributor Author

🎉
image

@vadosnaprimer
Copy link
Collaborator

WOW YOU ROCK

@TiKevin83
Copy link
Collaborator

@Zinfidel is this fixed now by #432 ?

@Zinfidel
Copy link
Contributor Author

@TiKevin83 Yes it is!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants