语法高亮模块

Syntax 模块通过自动检测和应用语法高亮增强了代码块格式。优秀的 highlight.js 库用作依赖，用于解析和标记代码块。

¥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.

通常，你可以根据需要使用 configure 的 highlights.js。但是，如果你使用的是 hightlight.js < v11，Quill 期望并要求 useBR 选项为 false。

¥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 支持 hightlight.js v9.12.0 及更高版本。

¥Quill supports highlight.js v9.12.0 and later.

用法

¥Usage

<!-- Include your favorite highlight.js stylesheet -->
<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/styles/atom-one-dark.min.css" rel="stylesheet">

<!-- Include the highlight.js library -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js"></script>

<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/quill/2.0.0-dev.4/quill.snow.css" rel="stylesheet" />
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/quill/2.0.0-dev.4/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>

使用 npm 包

¥Use npm Package

如果你将 highlights.js 安装为 npm 包，但不想将其暴露给 window，则需要将其作为选项传递给语法模块：

¥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 },
  },
});