There is a «Code blocks» demo example in the documentation: https://ckeditor.com/docs/ckeditor5/latest/features/code-blocks.html
This is what the code looks like when pasted into html:
—GOOD—
<pre><code class="language-html"><div id="editor">
<p>Here goes the initial content of the editor.</p>
</div></code></pre><pre><code class="language-javascript">ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );</code></pre><pre><code class="language-plaintext"> ________________
/
| How about moo? | ^__^
________________/ (oo)_______
(__) )/
||----w |
|| ||</code></pre>And this is what the same code looks like in my CKEditor:
—BAD—
<pre><code class="language-html"><div id="editor"> <p>Here goes the initial content of the editor.</p></div></code></pre>
<pre><code class="language-javascript">ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } );</code></pre>
<pre><code class="language-plaintext"> ________________/ | How about moo? | ^__^________________/ (oo)_______ (__) )/ ||----w | || ||</code></pre>Please tell me why this is happening? How can I fix this?
Maybe this problem is related to my CSS?
Has anyone detected such a problem?
Thanks!
1