React-quill: Code highlighting

[hannadrehman]

Not an issue but i want to use code highlighting feature of the quill in my react app. it requires highlightjs library. how to integrate that with react-quill ?

[alexkrolick]

Hi,

Please check out the official Quill docs and the RQ integration docs for guidance on this:

• https://quilljs.com/docs/modules/
• https://github.com/zenoamaro/react-quill#custom-formats
• https://github.com/quilljs/quill

[hannadrehman]

@alexkrolick i want to know how to integrate using ES6 import module syntax.
if i enable syntax = true in modules. then it requies hightlightJS library, if i add it as a script tag it works.
i want to import it usin "import" if ES6 syntax. its nowhere mentioned how to use sytax highlighting in "react-quill".

[ChuckIrvine]

I'm not able to get this working by either an import or script tag. @alexkrolick could you open this back up and provide a bit more detail? The three URLs you reference above didn't help me. If I enable "syntax: true", I get the exception:

modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:111226 Uncaught Error: Syntax 
module requires highlight.js. Please include the library on the page before Quill.
    at new Syntax (modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:111226)
    at SnowTheme.addModule (modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:105607)
    at SnowTheme.addModule (modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:106857)
    at modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:105599
    at Array.forEach (<anonymous>)
    at SnowTheme.init (modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:105597)
    at new Quill (modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:101354)
    at Object.createEditor (modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:2755)
    at Object.componentDidMount (modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:2516)
    at Object.chainedFunction [as componentDidMount] (modules.js?hash=4ea2b45111bf8afdb7cf758c96d1859a40b2b315:8557)

The exception says to include the library on the page before quill, but I don't how to do this. Could you help?

Thanks

[khalidM3]

i have the exact same issue

[alexkrolick]

Depends on your bundle setup, if any. You could try importing Highlight before RQ, adding it from a CDN with a script tag, etc.

The linked Quill docs should apply here as well.

[Flyr1Q]

@ChuckIrvine @khalidM3 @hannadrehman
If you build app with Webpack, you can just use ProvidePlugin and expose global variable. For example, that's how I was able to run both formula & syntax modules:

// terminal
npm i katex highlight.js --save

// webpack config
plugins: [
  new webpack.ProvidePlugin({
    "window.hljs": "highlight.js",
    "window.katex": "katex"
  }),
  ...
]

// component where you import "react-quill"
import "katex/dist/katex.css";
import "highlight.js/styles/atom-one-light.css";

After this you can safely enable formula & syntax modules & everything will work like a charm.

[thinq4yourself]

@Flyr1Q - CC: @ChuckIrvine @khalidM3 @hannadrehman

I have done this by...

$ yarn add highlight.js

Then added to our bundle:

require('highlight.js')

And then adding to our webpack config:

plugins.push(
  new webpack.ProvidePlugin({
    'window.hljs': 'highlight.js',
  })
)

As with other modules in our bundle.

---

I then added the module with something like this:

const defaultModules = {
  toolbar: {
    container: '#toolbar',
    handlers: {
      image: openPicker,
    },
  },
  syntax: true,
}

Using it like so:

```

````

But I still receive the error about adding highlight.js to the previous page... is there an import I need to do?

🙏 Thank you

[ycjcl868]

same question

[tantv]

I have done this by...

Add these links to the head on index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

Then add the syntax: true to the modules

modules = () => {
    return {
      syntax: true,
      toolbar: {
        container: '#toolbar'
      }
    }
  }

Render

<ReactQuill 
   modules={this.modules()}
 />

Hope this help someone.

[ccostel]

Add these links to the head on index.html

Thanks! This helped me understand the issue. While I guess this is not the perfect solution it'll do the job for my project. Cheers 🍻

[dio-dot]

I have done this by...

Add these links to the head on index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

Then add the syntax: true to the modules

modules = () => {
    return {
      syntax: true,
      toolbar: {
        container: '#toolbar'
      }
    }
  }

Render

<ReactQuill 
   modules={this.modules()}
 />

Hope this help someone.

Thanks bro