Quill使用highlightjs做代码块高亮失效问题

末蓝、 2022-01-21 09:55 300阅读 0赞

先给出官方实例

<link href="highlight.js/monokai-sublime.min.css" rel="stylesheet">
    
    
    <script href="highlight.js"></script>
    
    <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'
    });
    </script>

按照官方实例没有任何高亮效果，测试结果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI4MzE1OQ_size_16_color_FFFFFF_t_70]  
根据Highlightjs的官方文档显示 Highlightjs

1.  默认情况下高亮 `<pre><code>` 标签内容
2.  需要调用highlightBlock函数重新渲染`<pre><code>` 标签内容

document.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
      });
    });

Quill使用highlightjs做代码块高亮失效的原因

*  **问题一**  
    Highlightjs自身不提供实时渲染，需要根据需求调用highlightBlock手动渲染。我添加了`<button class="draw">draw</button>` 监听点击事件调用highlightBlock渲染Quill的代码块；  
    当然你也可以使用其他的监听方式…
 *  **问题二**  
    Quill的代码块外层标签只有`<pre>`没有`<code>`，所以需要要更改渲染的标签对象；`document.querySelectorAll('pre code')`改为`document.querySelectorAll('pre')`

修改后的测试结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI4MzE1OQ_size_16_color_FFFFFF_t_70 1]  
完整测试代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    	<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
    </head>
    <body>	
    <div id="editor"></div>
    <button class="draw">draw</button>
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js"></script>
    <script>
    	hljs.configure({
    		languages: ['javascript', 'java', 'python']
    	});
    	document.getElementsByClassName('draw')[0].onclick=function(){
    		document.querySelectorAll('pre').forEach((block) => {
    			hljs.highlightBlock(block);
    		})
    	}
    	var quill = new Quill('#editor', {
    		theme: 'snow',
    		modules: {
          		toolbar: [['code-block']]
        	}
    	});
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI4MzE1OQ_size_16_color_FFFFFF_t_70]: /images/20220121/d5fa3699ab22408a865dbf07f0d43d72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODI4MzE1OQ_size_16_color_FFFFFF_t_70 1]: /images/20220121/655c053c7d92474fa9d8ea085612b502.png