Code syntax highlighting not working in v2.0.0-dev.4

[artknight]

According to the docs loading highlight.js and setting syntax: true should be enough to get the code formatted correctly. As it stands atm none of that happens and the code remains unformatted!

Current config

new Quill($note_body[0], {
	modules: {
		syntax: true,
		toolbar: {
			container: [
				['bold', 'italic', 'underline', 'strike'],
				[{ 'color': [] }, { 'background': [] }],
				[{ 'header': 1 }, { 'header': 2 }],
				[{ 'header': [1, 2, 3, 4, 5, false] }],
				['blockquote', 'code-block'],
				[{ 'list': 'ordered'}, { 'list': 'bullet' }],
				[{ 'align': [] }],
				['link','image','video'],
				['clean']
			],
			handlers: {
				image: this._onUploadFilesControlClicked.bind(this)
			}
		}
	},
	placeholder: 'Start typing...',
	theme: 'bubble',
	bounds: $note_body[0]
});

I am using straight up vanillaJS complication of quill.js in my page.

[artknight]

I also noticed that the code is not wrapped in <pre> and <code> tags. That is not standard and should be corrected!

Here is the html that is currently being generated by the editor.

<div class="ql-code-block-container" spellcheck="false">
   <select class="ql-ui" contenteditable="false">
      <option value="undefined"></option>
   </select>
   <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">function getUser(){</span></div>
   <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">let user = await fetch();</span></div>
   <div class="ql-code-block" data-language="javascript"><br></div>
   <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">return user;</span></div> 
   <div class="ql-code-block" data-language="javascript"><br></div>
   <div class="ql-code-block" data-language="javascript">}</div>
</div>

And it should be

<pre>
	<code class="ql-code-block-container hljs" spellcheck="false">
	   <select class="ql-ui" contenteditable="false">
	      <option value="undefined"></option>
	   </select>
	   <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">function getUser(){</span></div>
	   <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">let user = await fetch();</span></div>
	   <div class="ql-code-block" data-language="javascript"><br></div>
	   <div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">return user;</span></div> 
	   <div class="ql-code-block" data-language="javascript"><br></div>
	   <div class="ql-code-block" data-language="javascript">}</div>
	</code>
</pre>

[Zuckjet]

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.

try to import highlight.js

[artknight]

@Zuckjet so highlight.js is already available and is loaded before quill.js. I was able to make it work by overriding the highlightBlot method in syntax.js and also updating the code.ts to use the pre tags. Here are the changes made.

https://github.com/quilljs/quill/compare/develop...artknight:quill:develop

It works now perfectly with highlight.js 👍

I am hoping you can port those changes over!!

Also, as mentioned previously, for code syntax pre and code should be used and NOT divs

[benbro]

Duplicate https://github.com/quilljs/quill/issues/3981