DocumentationSyntax Highlighter Module

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 if you are using highlight.js < v11.

Quill supports highlight.js v9.12.0 and later.

Usage

<!-- Include your favorite highlight.js stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">

<!-- Include the highlight.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

<div id="editor"></div>

<script>
const quill = new Quill('#editor', {
  modules: {
    syntax: true,              // Include syntax module
    toolbar: [['code-block']]  // Include button in toolbar
  },
  theme: 'snow'
});

const Delta = Quill.import('delta');
quill.setContents(
  new Delta()
    .insert('const language = "JavaScript";')
    .insert('\n', { 'code-block': 'javascript' })
    .insert('console.log("I love " + language + "!");')
    .insert('\n', { 'code-block': 'javascript' })
);
</script>

Use npm Package

If you install highlight.js as an npm package and don't want to expose it to window, you need to pass it to syntax module as an option:

import Quill from 'quill';
import hljs from 'highlight.js';
const quill = new Quill('#editor', {
modules: {
syntax: { hljs },
},
});

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!