Code-block(syntax) is not displayed correctly when saved and redisplayed.

[ryor1986]

Code-block(syntax) is not displayed correctly when saved and redisplayed.

Issues

1. Unnecessary characters (language text) appear above the code block.
2. Indentation and spaces in the code is deleted.
3. Correct formatting color of code is not applied.

Steps for Reproduction

1. Prepare editor page like this.

   
   <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

Save to DB

3. Enter the code in the Code-block and select language.
<img width="801" alt="image" src="https://github.com/slab/quill/assets/15992866/45274840-8115-433c-bad5-54e816d19aca">

4. Save the HTML entered in editor to DB.
5. Re-display the HTML saved from the DB.
```html
<div id="editor">
    <!-- Get tag from DB and show ↓ -->
    <div class="ql-code-block-container" spellcheck="false"><select class="ql-ui" contenteditable="false"><option value="plain">Plain</option><option value="bash">Bash</option><option value="cpp">C++</option><option value="cs">C#</option><option value="css">CSS</option><option value="diff">Diff</option><option value="xml">HTML/XML</option><option value="java">Java</option><option value="javascript">JavaScript</option><option value="markdown">Markdown</option><option value="php">PHP</option><option value="python">Python</option><option value="ruby">Ruby</option><option value="sql">SQL</option></select><div class="ql-code-block" data-language="java"><span class="ql-token hljs-keyword">public</span> <span class="ql-token hljs-keyword">class</span> <span class="ql-token hljs-title">SampleJava</span> {</div><div class="ql-code-block" data-language="java"><br></div><div class="ql-code-block" data-language="java">  <span class="ql-token hljs-keyword">public</span> <span class="ql-token hljs-keyword">static</span> <span class="ql-token hljs-keyword">void</span> <span class="ql-token hljs-title">main(String[] args)</span> {</div><div class="ql-code-block" data-language="java">    System.out.println(<span class="ql-token hljs-string">"Hello World!"</span>);</div><div class="ql-code-block" data-language="java">  }</div><div class="ql-code-block" data-language="java"><br></div><div class="ql-code-block" data-language="java">}</div></div>
</div>
<button>Save to DB</button>

Expected behavior:

Actual behavior:

1. Unnecessary characters (language text) appear above the code block.
2. Indentation and spaces in the code is deleted.
3. Correct formatting color of code is not applied.

Platforms:

1. PHP
2. Laravel
3. MySQL

Version:

• v2.0.2
• This does not occur in version 1.3.7.

[AZCodingAccount]

same question