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

Highlight syntax on build, not in browser #17

Open
toastal opened this issue Dec 24, 2022 · 3 comments
Open

Highlight syntax on build, not in browser #17

toastal opened this issue Dec 24, 2022 · 3 comments

Comments

@toastal
Copy link

toastal commented Dec 24, 2022

Currently the syntax highlighting is done via a client-side highlighter downloaded from a CDN. There are problems with this approach:

  • <noscript> is not supported; text is black on black so it's not remotely readable with JavaScript disabled out of limitations or security/privacy--and if the goal is to deliver content accessibly to the most folks, then lowering requirements should be favored
  • Requires trust and giving up data to a third-party CDN; should users need trust this third party when this could be vendored to first-party? (this also applies to Bootstrap, but at a minimum, at least this script includes a subresource integrity check to verify that the file is correct from a third party)
  • Provided the CDN is trustworthy and delivering the same file, all users are downloading and executing the exact same highlighter code on the same code blocks which create wasteful processing on the device and also requires extra bandwidth to download and execute this

Moving syntax highlighting to the build phase would:

  • transformation from blank <pre> block to highlighted is only executed once (memoized at build) emitting code with the appropriate CSS classes on the HTML
  • Users do not need to trust or execute any third-party code
  • Users on browsers with JavaScript missing or disabled, can still have a rich experience
  • No additional data or CPU resources are used on client devices which is better for energy consumption and site responsiveness (no need to parse and then repaint)
@mimoo
Copy link
Contributor

mimoo commented Dec 28, 2022

Would you be up for a PR :)?

@toastal
Copy link
Author

toastal commented Dec 29, 2022

Maybe? I've used OCaml to do syntax highlighting using a custom Lambda Soup script, but I'm not sure what's the best way to handle in this sort of environment. If there was a flake.nix I could add a dependency, but I don't know what's the best here.

@mimoo
Copy link
Contributor

mimoo commented Jan 3, 2023

I'll try to find some time to nixify this

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

2 participants