Code block is not centering properly.

[sslater11]

The code block should be centered, but instead the text inside it is centered. Tested with both the current ankiweb release and the current github build using aab. I'm using Linux and Anki v23.12.1

The old plugin made a table inside the center tag. Was it removed for some reason? The formatting looks very different from the syntax highlighting that I used before.

Potential solution

The plugin generates this code:

<center><div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span style="color: #66d9ef">val</span><span style="color: #f8f8f2"> testing </span><span style="color: #ff4689">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">"a test"</span>
<span style="color: #66d9ef">val</span><span style="color: #f8f8f2"> another_string </span><span style="color: #ff4689">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">"yaaayyyyyy"</span>
</pre></div></center>

We can fix it with table tags

The old plugin added a table, so I've added it to the code above. I've split the code so you can see the table tags at the start and end, the rest of the code in the middle is the same. I used this code to generate the screenshot above :).

<center><table><tbody><tr><td>

<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span style="color: #66d9ef">val</span><span style="color: #f8f8f2"> testing </span><span style="color: #ff4689">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">"a test"</span>
<span style="color: #66d9ef">val</span><span style="color: #f8f8f2"> another_string </span><span style="color: #ff4689">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">"yaaayyyyyy"</span>
</pre></div>

</td></tr></tbody></table></center>

[cav71]

Thanks for your help! I updated the code to wrap the highlight div:

<div class="highlight...
</div>

into:

<div class="syntax-highlighting-ng">
  <div class="highlight...
  </div>
</div>

It should make easier to change the css later. On the build page there is a new build for the plugin for you to test (if you could help, of course) plugin.

[joakie]

@sslater11 If you are using "CSS classes" (which I recommend) try adding this to your style .css-file as a quick work-around:

.highlight { display: inline-block; }

You can place it above the .highlight pre { ... }

The code is still centered in the edit field, but looks identical to <table><tbody><tr><td> ... </td></tr></tbody></table> when previewing/reviewing your cards. Tested on Anki desktop and iOS.

[joakie]

@sslater11 It turns out that the display property does nothing on AnkiDroid, so instead I went on and modified (locally on my machine) the main.py of the plugin.

Replace (or uncomment) this code (at line 412 when this is written) :

if linenos:
    if centerfragments:
        pretty_code = "".join(["<center>", processed, "</center><br>"])
    else:
        pretty_code = "".join([processed, "<br>"])
# TODO: understand why this is neccessary
else:
    if centerfragments:
        pretty_code = "".join(["<center>", processed, "</center><br>"])
    else:
        pretty_code = "".join([processed, "<br>"])

with this:

if centerfragments:
    pretty_code = "".join(["<center><table><tbody><tr><td>", processed, "</td></tr></tbody></table></center>"])
else:
    pretty_code = "".join(["<table><tbody><tr><td>", processed, "</td></tr></tbody></table>"])

I took the liberty to remove that annoying ending <br>. I suggest making it an option, just like centering and line numbering are options. Btw I don't understand what centering has to do with line numbering, so I simply changed the logic. I don't use line numbering on my code cards so it may be that my change completely breaks cards that use it.

I haven't scrutinized the code for the original plugin, so I don't know where it adds the <table>.... I assume it's there to allow for line numbering...? But anyway, I suggest @cav71 for a solution where the code is aligned not only on the rendered cards but also in the edit field (and of course that it works on all platforms, I'm willing to test).

[cav71]

I've created a pull request with changes. Please let me know if this fixes the issues. @joakie

Btw I don't understand what centering has to do with line numbering I've ported almost the identical code over, minus the py3 cleanups.

Let me see if in the forum they have an idea to speedup code testing, as restarting anki to check changes is impractical. Thanks for the tip!

[joakie]

@cav71 Awesome! I think you can merge that one.

Your version of this very neat plugin fixes the "Anki version clash" that haunted the original one, the reason why I switched.