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

最新推荐文章于 2024-08-21 09:20:55 发布

__师寇__

最新推荐文章于 2024-08-21 09:20:55 发布

阅读量3.9k

点赞数

分类专栏： javascript 文章标签： Quilljs highlightjs

本文链接：https://blog.csdn.net/weixin_38283159/article/details/91355209

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先给出官方实例

<!-- Include your favorite highlight.js stylesheet -->
<link href="highlight.js/monokai-sublime.min.css" rel="stylesheet">

<!-- Include the highlight.js library -->
<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>

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

默认情况下高亮 <pre><code> 标签内容
需要调用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')

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

<!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>