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

Lazy loading less common languages for syntax highlighting #2388

Merged
merged 5 commits into from Mar 14, 2024

Conversation

matc-pub
Copy link
Contributor

Description

Adds a plugin to highlight.js to detect when code should be highlighted using a language that is not yet loaded. A wrapped call to md.render provides a callback that will be called after a language had to be loaded, this allows components to forceUpdate.

Before

All available languages (listed here: https://highlightjs.org/download) are enabled and can be auto-detected.

After

Only the "common" set of 35 languages can be auto-detected, the remaining languages will be loaded individually on demand when explicitly specified by the author.

Uncommon languages, when auto-detected, are highlighted using the best fitting language of the common set.

client.js size shrinks by about 240kB (compressed)

Reduces client.js size by about 250kB (800kB uncompressed)

Common languages:
bash, c, cpp, csharp, css, diff, go, graphql, ini, java, javascript,
json, kotlin, less, lua, makefile, markdown, objectivec, perl,
php-template, php, plaintext, python-repl, python, r, ruby, rust, scss,
shell, sql, swift, typescript, vbnet, wasm, xml, yaml

Additionally enabled languages:
dockerfile, pgsql
Allows to individually enable languages.
Allows to enable additional languages that will not be autodetected.
Copy link
Member

@dessalines dessalines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works also, thx!

readonly pending: Set<string>;
};

"before:highlight"(context: { language: string }) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can name class methods with string literals?

Comment on lines 7 to 8
const { bundledSyntaxHighlighters } = require("./src/shared/build-config");
const { lazySyntaxHighlighters } = require("./src/shared/build-config");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I'm not mistaken, this can be shortened to:

Suggested change
const { bundledSyntaxHighlighters } = require("./src/shared/build-config");
const { lazySyntaxHighlighters } = require("./src/shared/build-config");
const { bundledSyntaxHighlighters, lazySyntaxHighlighters } = require("./src/shared/build-config");

@SleeplessOne1917 SleeplessOne1917 merged commit 201e5fc into LemmyNet:main Mar 14, 2024
1 check passed
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

Successfully merging this pull request may close these issues.

None yet

3 participants