时间戳

首页 > 解决方案 > 代码荧光笔在羽毛笔编辑器中不起作用

javascript - 代码荧光笔在羽毛笔编辑器中不起作用

问题描述

我遵循了 Quill 的文档，但是语法突出显示不起作用。顺便说一句，即使是Quill 游乐场网页上的示例也不起作用，而Quill 主页上的示例正在运行。这是我的代码和 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'
});

这是显示问题的 CodePen： https ://codepen.io/imabot2/pen/mdJwdZy

标签： javascriptquill

解决方案

您需要包括语法荧光笔模块

包括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>

启用模块；

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'
});

更新了代码笔； https://codepen.io/0stone0/pen/poJwBzw

推荐阅读