search

gregorias / anki-code-highlighter

Anki plugin for code syntax highlighting.
GNU Affero General Public License v3.0
54 stars 3 forks source link

Text alignment issue with Pygments Block formatting #56

Closed jesmarti closed 1 year ago

jesmarti commented 1 year ago

Description:

When formatting code using Pygments > Block, the text is not properly aligned to the left.

Reproduction steps:

Download the addon Add card Choose Basic card type Format code -> Pygments -> Block -> C

Expected behavior:

Text should be aligned to the left side of the block.

Screenshots:

image image

How I manually fixed it:

Opened the _ch-pygments-solarized.css file and added text-align: left; under .pygments>pre

Affected field's HTML code:

<div class="pygments" style="display:flex; justify-content:center;">
<pre><code class="nohighlight"><span class="cp">#include</span><span class="w"> </span><span class="cpf">&lt;stdio.h&gt;</span><span class="cp"></span>
<span class="cp">#include</span><span class="w"> </span><span class="cpf">&lt;string.h&gt;</span><span class="cp"></span>

<span class="kt">void</span><span class="w"> </span><span class="nf">invertWord</span><span class="p">(</span><span class="kt">char</span><span class="w"> </span><span class="o">*</span><span class="n">word</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kt">int</span><span class="w"> </span><span class="n">length</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">strlen</span><span class="p">(</span><span class="n">word</span><span class="p">);</span>
<span class="w">    </span>
<span class="w">    </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kt">int</span><span class="w"> </span><span class="n">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span><span class="w"> </span><span class="n">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="n">length</span><span class="w"> </span><span class="o">/</span><span class="w"> </span><span class="mi">2</span><span class="p">;</span><span class="w"> </span><span class="n">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w">        </span><span class="kt">char</span><span class="w"> </span><span class="n">temp</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">word</span><span class="p">[</span><span class="n">i</span><span class="p">];</span>
<span class="w">        </span><span class="n">word</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">word</span><span class="p">[</span><span class="n">length</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="n">i</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mi">1</span><span class="p">];</span>
<span class="w">        </span><span class="n">word</span><span class="p">[</span><span class="n">length</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="n">i</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="mi">1</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">temp</span><span class="p">;</span>
<span class="w">    </span><span class="p">}</span>
<span class="p">}</span>

<span class="kt">int</span><span class="w"> </span><span class="nf">main</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="kt">char</span><span class="w"> </span><span class="n">word</span><span class="p">[</span><span class="mi">100</span><span class="p">];</span>
<span class="w">    </span>
<span class="w">    </span><span class="n">printf</span><span class="p">(</span><span class="s">"Enter a word: "</span><span class="p">);</span>
<span class="w">    </span><span class="n">scanf</span><span class="p">(</span><span class="s">"%s"</span><span class="p">,</span><span class="w"> </span><span class="n">word</span><span class="p">);</span>
<span class="w">    </span>
<span class="w">    </span><span class="n">invertWord</span><span class="p">(</span><span class="n">word</span><span class="p">);</span>
<span class="w">    </span>
<span class="w">    </span><span class="n">printf</span><span class="p">(</span><span class="s">"Inverted word: %s</span><span class="se">\n</span><span class="s">"</span><span class="p">,</span><span class="w"> </span><span class="n">word</span><span class="p">);</span>
<span class="w">    </span>
<span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
</code></pre>
</div>

Card template

Front Template:

{{Front}}

<!-- Anki Code Highlighter (Addon 112228974) BEGIN -->
<link rel="stylesheet" href="_ch-pygments-solarized.css" class="anki-code-highlighter">
<link rel="stylesheet" href="_ch-hljs-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

{{FrontSide}}

<hr id=answer>

{{Back}}

<!-- Anki Code Highlighter (Addon 112228974) BEGIN -->
<link rel="stylesheet" href="_ch-pygments-solarized.css" class="anki-code-highlighter">
<link rel="stylesheet" href="_ch-hljs-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;
}

OS Version:

Windows 10

Anki version:

Version ⁨2.1.63 (f356f177)⁩ Python 3.9.15 Qt 6.4.3 PyQt 6.4.0

jesmarti commented 1 year ago

Also, when navigating to the addon's Config page and selecting the 'Restore Defaults' option, the CSS file (_ch-pygments-solarized.css) is reset. This removes the text-align: left;, causing the original alignment problem to reappear.

gregorias commented 1 year ago

Hi @jesmarti,

Thank you for your detailed ticket.

Your card template has text-align: center; that's interfering with formatting. Remove it, and your note should work just fine.
Alternatively, you may add text-align: left; to the block-style config parameter.

Please let me know if that doesn't solve your issue.

jesmarti commented 1 year ago

Hello @gregorias,

Thanks for your prompt guidance.

Adding text-align: left; to the block-style config resolved the alignment issue without needing to alter Anki's default center alignment in the Styling section. Your solution is highly effective.

Thanks again for your assistance.

Best regards.