How vue-quill-editor combine with the syntax highlighter module of highlight.js

[goforward01]

As the document of quill said, I add the highlight.js in my page.Well, no matter where I put the library in my html file, it always run out with the issue: Error: Syntax module requires highlight.js. Please include the library on the page before Quill., I searched a lot, but with no luck. Sorry, I know here isn't the place to ask question like that, but I really couldn't figure out how to solve this. So if anyone knows solutions about that, any suggestion will be appreciated, Thx.

[surmon-china]

Can you show me your code? Mainly part of your entry file, the introduction of highlight.js part and the introduction of components of the part.

[goforward01]

Thanks for so rapid answer. my html file looks like:
** <link href="static/monokai-sublime.min.css" rel="stylesheet"> <script type="text/javascript" href="static/highlight.min.js"></script> **
And I used the vue-quill-editor for my SPA pro, for now the component just like the demo you give in the main page of this pro.
I put the code above in my head flag or after the body flag, neither way work. And the link of quill about the syntax highlight is: https://quilljs.com/docs/modules/syntax/.Thanks very much for your time, I'm new in Vue.js, maybe I lost something about the lifecycle of Vue component.

[surmon-china]

Is it a vue webpack project?

[surmon-china]

Try this code.

  // in your main.js
  import 'highlight.js'
  import 'highlight.js/styles/monokai-sublime.min.css'
  import VueQuillEditor from 'vue-quill-editor'
  // ...

or

<template>
  <quill-editor v-model="content" :options="editorOption"></quill-editor>
</template>

<script>
  import 'highlight.js/styles/monokai-sublime.min.css'
  import 'highlight.js'
  import Quill from 'quill'
  
  export default {
    // something...
  }
</script>

[goforward01]

It's a vue webpack project. I gave a shot about the suggestions above, well, it still report the same error as before. I'm not sure if the order of import will be loaded in run time. I would try again and make some experiments about the load order of lib file. thanks surmon-china, could you give me some advise about these~

[surmon-china]

• https://github.com/quilljs/quill/blob/develop/docs/docs/modules/syntax.md
• https://github.com/quilljs/quill/blob/develop/modules/syntax.js#L68
• https://github.com/quilljs/quill/blob/develop/modules/syntax.js#L41

[surmon-china]

In fact, this is because quill internal self-closure caused by the problem, the solution is as follows: modules.syntax from true to replace a function:

editorOption: {
  modules: {
    syntax: {
      highlight: text => window.hljs.highlightAuto(text).value
      // or
      /*
      highlight(text) {
        const result = window.hljs.highlightAuto(text)
        return result.value
      }
      */
    }
  },
  theme: 'snow'
}

Other parts remain the same, highlight.js still need to be introduced before the introduction of quill.

import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

Enjoy your work!

[goforward01]

Wow, Thanks a lot, your save me tons of time. @surmon-china

[visualjerk]

If anyone wants to use this in NUXT:

• add the CSS to your nuxt.config.js:

module.exports = {

  ...

  css: [
    'highlight.js/styles/atom-one-light.css'
  ],

  ...

}

• import highlight.js in your component and add it to editorOptions like so:

import hljs from 'highlight.js'

...

editorOption: {
  theme: 'snow',
  modules: {
    syntax: {
      highlight: text => hljs.highlightAuto(text).value
    }
  }
}

Thanks @surmon-china for pointing out the need for a function call!

[macnie]

In fact, this is because quill internal self-closure caused by the problem, the solution is as follows: modules.syntax from true to replace a function:

editorOption: {
  modules: {
    syntax: {
      highlight: text => window.hljs.highlightAuto(text).value
      // or
      /*
      highlight(text) {
        const result = window.hljs.highlightAuto(text)
        return result.value
      }
      */
    }
  },
  theme: 'snow'
}

Other parts remain the same, highlight.js still need to be introduced before the introduction of quill.

import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

Enjoy your work!

index.vue?0dbc:150 Uncaught TypeError: Cannot read property 'highlightAuto' of undefined

[gywgithub]

@macnie add hightlight config, like this

...
<script>
import hljs from 'highlightjs'
hljs.configure({
  languages: ['javascript', 'python']
})
import 'highlightjs/styles/monokai-sublime.css'
import 'quill/dist/quill.snow.css'
import * as Quill from 'quill'
export default {
  data () {
    return {
      quill: null
    }
  },
  mounted () {
    this.quill = new Quill('#editor', {
      modules: {
        syntax: {
          highlight: text => hljs.highlightAuto(text).value
        },
        toolbar: '#toolbar-container'
      },
      placeholder: 'Compose an epic...',
      theme: 'snow'
    })
  },

...

[TengFeiHao]

In NUXT project, highlight.js asynchronous change 'content'. In 'onEditorChange(){}' , 'this.content' repeated assignment. So dead cycle. The code and error are as follows：

[Vue warn]: You may have an infinite update loop in a component render function.

found in

---> <QuillEditor> at components/common/quillEditor.vue
       <Pages/detail/Index.vue> at pages/detail/_index.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root> commons.app.js:13282:7
    NuxtJS 7

data() {
            return {
                content: ""
                editorOption: {
                    modules: {
                        toolbar: [ ... ],
                        syntax: {
                            highlight: text => hljs.highlightAuto(text).value
                        }
                    },
                    theme:'snow'
                },
            }
        },
        methods: {
            onEditorChange({quill, html, text}) {
                this.content = html;
            },
        }
    }

[eserdinyo]

Try this code.

  // in your main.js
  import 'highlight.js'
  import 'highlight.js/styles/monokai-sublime.min.css'
  import VueQuillEditor from 'vue-quill-editor'
  // ...

or

<template>
  <quill-editor v-model="content" :options="editorOption"></quill-editor>
</template>

<script>
  import 'highlight.js/styles/monokai-sublime.min.css'
  import 'highlight.js'
  import Quill from 'quill'
  
  export default {
    // something...
  }
</script>

Hi. In the or part you are importing quill but you using quill-edior component. how this is happening? I don't understand.

[eserdinyo]

Ok. I guess i solved it finally.
I added this
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
in the index.html.

And it's done.

[babaiwan]

In fact, this is because quill internal self-closure caused by the problem, the solution is as follows: modules.syntax from true to replace a function:

editorOption: {
  modules: {
    syntax: {
      highlight: text => window.hljs.highlightAuto(text).value
      // or
      /*
      highlight(text) {
        const result = window.hljs.highlightAuto(text)
        return result.value
      }
      */
    }
  },
  theme: 'snow'
}

Other parts remain the same, highlight.js still need to be introduced before the introduction of quill.

import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

Enjoy your work!

In fact, this is because quill internal self-closure caused by the problem, the solution is as follows: modules.syntax from true to replace a function:

editorOption: {
  modules: {
    syntax: {
      highlight: text => window.hljs.highlightAuto(text).value
      // or
      /*
      highlight(text) {
        const result = window.hljs.highlightAuto(text)
        return result.value
      }
      */
    }
  },
  theme: 'snow'
}

Other parts remain the same, highlight.js still need to be introduced before the introduction of quill.

import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

Enjoy your work!

i think i may have the solution


what i need to do is to handle these message