7

I followed the documentation of Quill, but the syntax highlighting is not working. By the way, even the example on the Quill playground webpage is not working, while the example on the Quill home page is working. Here is my code and a link to CodePen.

HTML

<div id="editor-container"><pre>for(int i=0;i<10;i++)
  printf ("Hello");</pre>
</div>

JS

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

Here is a CodePen showing the issue: https://codepen.io/imabot2/pen/mdJwdZy

1 Answer 1

6
+50

You need to include the Syntax Highlighter Module

Include HighLightJs;

<!-- Local file -->
<script href="highlight.js"></script>

<!-- CloudFare CDN -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

Enable module;

var quill = new Quill('#editor-container', {
    modules: {
        syntax: true,                          # <-- Enable module
        toolbar: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline'],
            ['image', 'code-block']
        ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'  // or 'bubble'
});

Updated codePen; https://codepen.io/0stone0/pen/poJwBzw

2
  • Does not work. Colors are not applied Sep 29, 2021 at 16:54
  • What browser are you using @SergeyOrlov? The pen is colorized in recent Chrome...
    – duhaime
    Jan 16, 2022 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.