Question

我遵循了两者的文档，但是突出显示了语法。我已经添加了python和javascript代码，但它们都没有语法样式。

我的代码：

<head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">    
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>    
<body>
    <!-- Create the editor container -->
    <div id="editor">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br></p>
    </div>    
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>    
    <!-- Initialize Quill editor -->
    <script>
        var toolbarOptions = [
          ...
        var quill = new Quill('#editor', options);
    </script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>
</body>

Answer 1

您需要包括Syntax Highlighter Module

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

突出显示在主轴编辑器中不起作用

1 个答案: