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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.