Block code displays centered instead of aligned to the left and well indented

[DallasBelt]

Bug description When formatting a block code with highlight.js, it displays centered instead of aligned to the left and well indented. If I use Pygments, the result is shown with symbols (see screenshots).

Reproduction steps Steps to reproduce the behavior:

1. Click on 'Add' in the main screen.
2. Write or paste the code in the field (if I paste from VSCode, I have to clean the HTML tags in the editor).
3. Select the text which I want to highlight.
4. Click on the addon icon or Ctrl + '
5. Select highlight.js and clock OK.
6. Select HTML (in my case) and click OK.
7. Click 'Add'.
8. Preview or review the card.

If applicable, provide the offending field's HTML code. For instructions how to get that code, see this Anki help page.

Expected behavior I expect that the block of code displays well indented and not centered.

Screenshots If applicable, add screenshots to help explain your problem. You may mesh screenshots with reproduction steps instead of providing them in this separate section.

With highlight.js:

With pygments:

Card template If applicable, provide the card template code from the card that exhibits the unwanted behaviour. For instructions how to get that code, see this Anki help page.

Example Card HTML: {{c1::Test}}<pre style="display:block; justify-content:center;"><code class="language-html">&lt;head&gt; &lt;meta&nbsp;charset="utf-8"&gt; &lt;title&gt;Styles Conference&lt;/title&gt; &lt;link&nbsp;rel="stylesheet"&nbsp;href="assets/stylesheets/main.css"&gt; &lt;/head&gt;</code></pre>

Front Template: {{cloze:Text}}

<!-- Anki Code Highlighter (Addon 112228974) BEGIN -->
<link rel="stylesheet" href="_ch-hljs-dracula.css" class="anki-code-highlighter">
<link rel="stylesheet" href="_ch-pygments-solarized.css" class="anki-code-highlighter">
<script src="_ch-my-highlight.js" class="anki-code-highlighter"></script>
<!-- Anki Code Highlighter (Addon 112228974) END -->

Back Template: {{cloze:Text}}<br>
{{Back Extra}}

<!-- Anki Code Highlighter (Addon 112228974) BEGIN -->
<link rel="stylesheet" href="_ch-hljs-dracula.css" class="anki-code-highlighter">
<link rel="stylesheet" href="_ch-pygments-solarized.css" class="anki-code-highlighter">
<script src="_ch-my-highlight.js" class="anki-code-highlighter"></script>
<!-- Anki Code Highlighter (Addon 112228974) END -->

Styling: .card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

.cloze {
 font-weight: bold;
 color: blue;
}
.nightMode .cloze {
 color: lightblue;
}

Additional information

• OS version: Windows 11

Additional context I haven't tuned the cards templates, but I'm using another addon that changes the interface a bit (Advanced Review Bottom Bar).

[gregorias]

Could you provide the field's HTML code and the card template code as instructed in the template?

[DallasBelt]

Sorry. I updated the comment including the needed information.

[gregorias]

This highlighting is not from this plugin, which uses solarized night. What is this a picture of?

Here's how the rendered card looks like on my PC using the settings you have provided:

Could you provide the following:

1. Screenshots of the editor window with the misbehaving card together with the HTML editor open.
2. Screenshots of the rendered card.
3. In reproduction steps, provide the text block you want me to copy to reproduce this.

Use fenced code blocks for pasting code with newlines.

You could also just try removing text-align: center; or changing it to text-align: left in your styling. Might help.

I suspect this text-align: center and not using unformatted pastes for copied HTML-trees from VS-code are the culprits.

[DallasBelt]

What is this a picture of?

I used your instructions to use custom styles. I'm using the Dracula theme, hence the different colors.

Could you provide the following:

1. Screenshots of the editor window with the misbehaving card together with the HTML editor open.

Before applying syntax highlighting:

After applying syntax highlighting (highlight.js):

2. Screenshots of the rendered card.

3. In reproduction steps, provide the text block you want me to copy to reproduce this.

I copied this from VSCode:

<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>

You could also just try removing text-align: center; or changing it to text-align: left in your styling. Might help.

That indeed aligns the block to the left but the indenting is missing (just like your screenshot).

I suspect this text-align: center and not using unformatted pastes for copied HTML-trees from VS-code are the culprits.

Well, I used to copy from VSCode and paste (Ctrl + Shift + V) to Anki and it rendered ok, ie, with the code tag. Now, if I paste, the style is inherited from the default card, I guess. That's why I wrote that I had to remove some tags in the editor. This message appears if I don't do that:

[gregorias]

That indeed aligns the block to the left but the indenting is missing (just like your screenshot).

That are no indents in the HTML code itself, so it's hard to expect indents in the render. Once you add indenting whitespace, you should get your expected result.

[DallasBelt]

I'm dumb! Yes, I had to manually add the spaces. Sorry, I thought that the addon did the formatting stuff. But if I use pygments it shows the HTML entities instead of the symbols...

[gregorias]

You are right about the pygments thing. I'll take a look.