Proportional fonts in Syntax Highlighter Code
-
I noticed that as of recently, when using a SyntaxHighlighter Code block on WordPress.com, the font used while editing is proportional instead of mono spaced. This makes it extremely annoying to use, it becomes very hard to line up text.
Published pages still have monospaced fonts.
-
Hi there,
After taking a closer look, it seems the theme you are using (Libre 2) uses the “Libre Baskerville” font as the preview font in the page editor. To clarify, the Libre 2 theme is an older theme we offer, and one that was released before we had a block editor, so it does not have full compatibility with all blocks.
I have reported this issue to our theme team, but because this is an older theme (which we will likely retire at some point in the future) I do not have a timeline for when it will be fixed.
With this in mind you may want to consider switching themes. I tried several other themes, and they all use monospace fonts (for the syntax highlighter block) while you are editing. It just happens to be the case you are using the one theme I can find that is not using a monospace font for this block.
Hope that helps. Please let us know if you have any more questions.
-
Thanks for your reply.
But something must have changed. I’ve been using the theme ever since I signed up for WordPress, and I’ve written a few dozen posts without having this problem (all my posts have used the SyntaxHighlighter Code block); it wasn’t until today that this issue surfaced. (I tried different browsers, and switched between a laptop and a desktop, but the problem remained).
For now, I’ve deselected the “use theme styles” option, which fixes the issue.
I don’t mind switching themes, but how do I know whether another theme I pick isn’t also older and may have problems, or is scheduled to retire?
-
Hi there,
As I mentioned I have asked our developers to take a look, so it is possible this will be updated, but if you have turned off the ‘use theme styles’ option that will work as well, and mean that you do not have to switch themes.
I don’t mind switching themes, but how do I know whether another theme I pick isn’t also older and may have problems, or is scheduled to retire?
Generally speaking, our newest themes have 100% compatibility with blocks. They are the ones listed here initially. https://wordpress.com/themes
Our legacy themes are listed only if you click the “Show all themes” button, and those are themes that pre-date the launch of our block editor. They are compatible with blocks, but may not support some settings (such as wide block alignments) but generally work well with the new editor. With that said, there are some edge cases, such as the editor styles not respecting the monospace font of the code blocks.
I did test quite a few legacy themes (we have over a hundred, I tested about 10 at random) and none of them had this font issue. With that in mind I suspect that the Libre 2 theme is the only one with this issue.
You are welcome to use any theme with your site, we do plan to retire the legacy themes at some point but you can continue to use it even after it is retired so I would not worry about that. But if you want to future-proof your site as much as possible, I recommend the newer block-native themes instead of the legacy themes listed under the “Show all themes” button.
Hope that provides some more insight!
-
Turning off ‘use theme styles’ has worked for three weeks.
Today, even with theme styles turned off, I’m getting a proportional font in the Syntax Highlighter Code block.
Since the problems with converting characters into entities still haven’t been resolved, it because really hard to use WordPress for a programming blog.
-
Hi there,
Today, even with theme styles turned off, I’m getting a proportional font in the Syntax Highlighter Code block.
I have reported the original issue to our theme team, but they have not addressed it yet and may not be able to for some time due to other priorities. In this case you may need to switch themes in order to see a monospace font used in the Syntax Highlighter block in the editor view. There is not a workaround I can employ to address that and it would need to be fixed in the theme source code itself.
Since the problems with converting characters into entities still haven’t been resolved, it because really hard to use WordPress for a programming blog.
That seems to affect only reusable blocks. That is your issue as well? or you have this issue when using a block for the first time (i.e. not a block that is already saved as reusable) and if so can you walk us through the steps you are taking that cause the issue so we can take a closer look?
-
I just don’t understand what the purpose of deselecting “use theme styles” is, if one still is dependent on the themes installed font.
I also don’t understand why when I first reported this issue in February, deselecting “use theme styles” fixes the issue (that is, with it deselecting this gives me a monospaced font in the editor), but as of last week, I no longer get a monospaced font.
(It’s also not that the theme doesn’t have monospaced fonts — editing a Markdown block, or a Custom HTML block *gives* me a monospaced font, both when “use theme styles” is selected or deselected).
As for the issue with converting characters, I’m not use reusable blocks. An example where it goes wrong:
- Create a new page.
- Open a Markdown block.
- Type something with a less then sign, for instance “if a < b”.
- Save the draft.
- Close the page; go to the list of drafts, and open the just created draft.
- You will now see that the less then sign is replaced by its HTML entity.
- Previewing shows the HTML entity, not the less then sign.
This is the same issue as what was discussed in https://wordpress.com/forums/topic/editing-posts-with-markdown-markup/, and in which you participated (https://wordpress.com/forums/topic/editing-posts-with-markdown-markup/#post-3580521, https://wordpress.com/forums/topic/editing-posts-with-markdown-markup/#post-3580542).
The GitHub bug report (https://github.com/WordPress/gutenberg/issues/24282) also repeated states the issue isn’t restricted to reusable blocks.
- The topic ‘Proportional fonts in Syntax Highlighter Code’ is closed to new replies.
WordPress.com Forums 