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

Run highlight.js in a web worker ? #10

Open
n-peugnet opened this issue Jun 8, 2023 · 0 comments
Open

Run highlight.js in a web worker ? #10

n-peugnet opened this issue Jun 8, 2023 · 0 comments
Labels
enhancement New feature or request question Further information is requested

Comments

@n-peugnet
Copy link
Member

This will prevent the UI from freezing when highlighting a very big code block.

As suggested in highlight.js usage examples:

You can run highlighting inside a web worker to avoid freezing the browser window while dealing with very big chunks of code.

In your main script:

addEventListener('load', () => {
  const code = document.querySelector('#code');
  const worker = new Worker('worker.js');
  worker.onmessage = (event) => { code.innerHTML = event.data; }
  worker.postMessage(code.textContent);
});

In worker.js:

onmessage = (event) => {
  importScripts('<path>/highlight.min.js');
  const result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
};
@n-peugnet n-peugnet changed the title Run highlight.js in a web worker Run highlight.js in a web worker ? Jun 9, 2023
@n-peugnet n-peugnet added enhancement New feature or request question Further information is requested labels Jun 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant