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:

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

• javascript
• quill

Share Improve this question Follow edited Feb 29, 2020 at 15:49 Fifi 3,61533 gold badges3131 silver badges6262 bronze badges asked Mar 9, 2019 at 18:09 marcos souzamarcos souza 76111 gold badge1010 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./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