Code blocks render "!=" as "≠"

[terminalmage]

Search first

• I searched and no similar issues were found

What Happened?

When using code blocks, the characters != are rendered as ≠. The underlying text is still != and copy-and-paste from the code block will produce the expected code, but a code block should not be rendering the value differently from what was pasted in.

Reproduce the Bug

1. Start a code block using triple-backticks
2. Add the text foo != bar to the code block
3. Leave the block to allow Logseq to render the code block

Expected Behavior

The code block should show:

foo != bar

However, the code block instead shows:

foo ≠ bar

Screenshots

No response

Desktop or Mobile Platform Information

No response

Additional Context

No response

Are you willing to submit a PR? If you know how to fix the bug.

• I'm willing to submit a PR (Thank you!)

[kawadumax]

I tested it in my environment, and it displayed correctly as is on version 10.9. Could it be that you're applying a font that includes ligatures (like FiraCode) through custom CSS, or perhaps using a theme that includes such a font

[terminalmage]

I'm also on 0.10.9.

I'm using the default dark theme, and the only custom CSS I am using enables wrapping of code blocks. Here's my entire custom.css:

pre {
    white-space: pre-wrap !important;
}

I removed that custom CSS, restarted Logseq, no change.

I have 3 plugins enabled (Bullet Threading, PDF Export Plugin, Vim Shortcuts). Disabling all of them and restarting Logseq did not fix the problem.

[terminalmage]

Some further info: I have the same graph synced to two Linux laptops (one Arch Linux, one Ubuntu 22.04), and an Android phone. The != looks correct on Android but does not on both Linux laptops.

[ctrlaltf2]

Whether you know it or not, you likely have a font installed on your Linux system that supports code ligatures, whether that's Fira Code (Logseq's default first font choice) or whatever your system-wide "monospace" font is set to. This isn't an issue with Logseq- it's just doing what the font is telling the font renderer to do. To solve this, you can install a font that doesn't use ligatures to your system(s), then in your custom.css, override the font in code blocks to your choice of font with:

.CodeMirror {
  font-family: 'Your Font Name Here';
}

[terminalmage]

The .CodeMirror CSS was what I needed. Could've done without the condescension, but happy to have a solution.

[ctrlaltf2]

Sorry, I should've just gotten to the point, I didn't mean it that way.