Documentation: Modules / Syntax Edit on Github

Syntax Highlighter Module

The Syntax Module enhances the Code Block format by automatically detecting and applying syntax highlighting. The excellent highlight.js library is used as a dependency to parse and tokenize code blocks.

In general, you may configure highlight.js as needed. However, Quill expects and requires the useBR option to be false.


<!-- Include your favorite highlight.js stylesheet -->
<link href="highlight.js/monokai-sublime.min.css" rel="stylesheet">

<!-- Include the highlight.js library -->
<script href="highlight.js"></script>

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

var quill = new Quill('#editor', {
  modules: {
    syntax: true,              // Include syntax module
    toolbar: [['code-block']]  // Include button in toolbar
  theme: 'snow'

An Open Source Project

Quill is developed and maintained by Slab. It is permissively licensed under BSD. Use it freely in personal or commercial projects!
Star 8,000