Injecting highlight.js to work with vue2-editor (Quill)

Question

I have a trouble connecting vue2-editor (based on quill) with highlight.js

No matter what I do, I get an error saying:

Syntax module requires highlight.js. Please include the library on the page before Quill.

I'm using nuxt if it changes anything.

I've tried adding this line at the beginning of script tag:

import hljs from'highlightjs';

So it looks like:

<script>
import hljs from'highlightjs';

export default {
  middleware: 'hasPermissions',
  permissions: [ 'createPosts' ],
  ...
}
</script>

My plugin where I require vue2-editor:

import Vue from'vue';
import VueEditor from'vue2-editor';

Vue.use(VueEditor);

VueEditor component in my page:

<VueEditor
  class="my-4"
  v-model="content"
  :editor-options="{ modules: { syntax: true } }"
  placeholder="Post content" />

EDIT: I've tried creating my own component and it shows the same error:

<template>
  <v-layout
    row
    wrap>
    <v-flex xs12>
      <div ref="editor" />
    </v-flex>
  </v-layout>
</template>

<script>
import Quill from'quill';

export default {
  data() {
    return {
      editor: null
    };
  },

  mounted() {
    window.hljs = require('highlight.js');
    this.editor = new Quill(this.$refs.editor, {
      modules: {
        toolbar: [
          [{ header: [ 1, 2, 3, 4, false ]}],
          [ 'bold', 'italic', 'underline' ]
        ],
        syntax: true
      },
      theme: 'snow',
      formats: [ 'bold', 'underline', 'header', 'italic' ]
    });

    this.editor.root.innerHTML = this.value;
  }
};
</script>

I can successfully print hljs in console in development tools in my browser. What's wrong?

Answer 1

I struggled with this for a long time too and this answer worked for me!

    // highlight.js  component
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
let Highlight = {}
Highlight.install = function (Vue, options) {
  Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      Hljs.highlightBlock(block)
    })
  })
}
export default Highlight

// in main.js

import Highlight from 'path/to/Highlight.js'
Vue.use(Highlight)

I changed import 'highlight.js/styles/googlecode.css' to import 'highlight.js/styles/monokai-sublime.css' seems to be a more popular and pleasing style. you could also probably add a

hljs.configure({   // optionally configure hljs
  languages: ['javascript', 'ruby', 'python']
});

to select certain languages, but I haven't tried.

Although I still haven't figured out how to change the background color. it shows up white in other places and black background in the quill window.

Answer 2

This one should be a better solution, works for me. https://github.com/surmon-china/vue-quill-editor/issues/39

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:

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

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