-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Block code displays centered instead of aligned to the left and well indented #45
Comments
Could you provide the field's HTML code and the card template code as instructed in the template? |
Sorry. I updated the comment including the needed information. |
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:
Use fenced code blocks for pasting code with newlines. You could also just try removing I suspect this |
I used your instructions to use custom styles. I'm using the Dracula theme, hence the different colors.
Before applying syntax highlighting: After applying syntax highlighting (highlight.js):
I copied this from VSCode:
That indeed aligns the block to the left but the indenting is missing (just like your screenshot).
Well, I used to copy from VSCode and paste (Ctrl + Shift + V) to Anki and it rendered ok, ie, with the |
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... |
You are right about the pygments thing. I'll take a look. |
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:
Ctrl
+'
highlight.js
and clockOK
.HTML
(in my case) and clickOK
.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"><head> <meta charset="utf-8"> <title>Styles Conference</title> <link rel="stylesheet" href="assets/stylesheets/main.css"> </head></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
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).
The text was updated successfully, but these errors were encountered: