Is there a chance of the syntax module being updated to use Prism instead of highlight.js?

[aMadReason]

Prism seems to be more actively maintained and has better documentation in general (and is easier to use with es6).

I've managed to get katex working fine importing both Quill and katex via es6 imports.

I've tried:

• importing from the npm module
• importing from a built lib with common languages downloaded from highlight.js website
• bypassing highlightjs index.js file and importing highlight.js and manually registering the language files

Even if I make sure to import it prior to Quill I always get the error message stating that highlight.js needs to me included on the page prior to Quill (I need to be able to package it up so script tags on the page are a no go for me in this case or else I'd just do that)

It seems unnecessarily complex when Quill itself works so well with es6 imports and maybe a different syntax library would work better? Ideally it'd be really cool to pass the syntax engine into the syntax module rather than relying on global scope but thats just my opinion.

Naturally I may just be doing something wrong, though, so if anyone wants to give me a hand that would be amazing.

Just a thought more than anything and my reasons for.

[kotAPI]

Looking for the same use case here too, wish there was a support for this.

[osbre]

me too need Prism, please

[zmwangx]

In case this helps anyone: the syntax module requires window.hljs, and something like

import hljs from 'highlight.js';
window.hljs = hljs;
import Quill from 'quill';

doesn't work because imports are asynchronous and happen before the script (and hence the window.hljs line) is even executed. However, if we use synchronous require then there's no problem:

window.hljs = require('highlight.js');
const Quill = require('quill');

(Of course, using hljs with a bundler is still a pain since AFAIK we have to manually register all the languages we might need, or get a ~1MB bundle with all languages...)

[samypr100]

You can easily integrate highlight js with a bundler (e.g. webpack). If you look at Syntax's module source code you'll notice it's possible. This isn't documented properly, but it's the closest correct solution I've found.

Example:

  import hljs from 'highlight.js/lib/highlight';
  import xyz from 'highlight.js/lib/languages/xyz';
  import Quill from 'quill';
  ...
  const Syntax = Quill.import('modules/syntax'); // get the module
  Syntax.DEFAULTS = {
    // change (and reference your webpack import here)
    // the default implementation of this looks for window.hljs
    highlight: function (text) {
      const result = hljs.highlight('xyz', text);
      return result.value;
    },
    interval: 500 // change interval if desired
  };
  ...

You can edit syntax.js (make a new module) to integrate prism as well if needed.

Here's an example of a lazy way to integrate prism (w/o many changes).

   import Prism from 'prismjs';
   // don't forget to load the languages
   ...
   // load plugin
   import 'prismjs/plugins/custom-class/prism-custom-class';
   Prism.plugins.customClass.prefix('hljs-'); // this is the trick, it will pass the validation of the existing syntax js module (by parchment)... if you're using a prism theme, you'll have to change the css and prefix everything with "hljs-"
   ...   
   // Have your Syntax.DEFAULTS point to prism now...
   Syntax.DEFAULTS = {
     highlight: function (text) {
       return Prism.highlight(text, Prism.languages.xyz, 'xyz');
     },
     interval: 500 // change interval if desired
   };

[sachinrekhi]

Anyone else seeing performance issues with highlight.js? I'm seeing CPU spike to >50% in the Google Chrome Helper process when I load a document in Quill with a few long code blocks and have highlight.js enabled. CPU immediately drops after I reload with a different document without any code blocks.

[imabot2]

@samypr100 Awesome solution. I love and implemented it, but prefixing all the css file is quite fastidious. Is there a better (and nicer) solution to avoid having the tags removing from the highlighted code?

[KeithGillette]

Any updates for Quill 2? @samypr100 work-around was effective for lazy-loading Highlight.JS in Quill 1. Is something similar possible in Quill 2?

[luin]

@KeithGillette I believe @samypr100's approach has been documented now: https://v2.quilljs.com/docs/modules/syntax

[KeithGillette]

Thank you for the pointer, @luin. I'm using Quill 2 in an Angular 2 project through the ngx-quill wrapper and there was a typings mismatch in that latter package that prevented use of that syntax, but ngx-quill@25.0.3 resolved that bug and I confirm that explicit import and passing of hljs works, eliminating the need to expose it on window.