Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Code highlighter not working in the quill editor

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

like image 838
marcos souza Avatar asked Mar 09 '19 18:03

marcos souza


People also ask

What is quill rich editor?

Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.


1 Answers

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

like image 116
0stone0 Avatar answered Sep 28 '22 04:09

0stone0