joplin icon indicating copy to clipboard operation
joplin copied to clipboard

Desktop: Space characters before backticks should use a monospaced font

Open KaneGreen opened this issue 2 years ago • 1 comments

Environment

Joplin version: Joplin 2.8.8 (prod, win32) Platform: Windows (But I think this problem may be related to all platforms) OS specifics: Windows 10 64bit 21H2 (19044.1806)

Steps to reproduce

Consider the following Markdown:

* hello world
    ```python
    print("Hello, world")
    ```

Please note: lines 2~4, there are four spaces before ``` and print.

On the left half of Joplin's CodeMirror it is rendered like this: image Apparently, the space at the beginning of the second line is not using a monospaced font. image The developer tools also state this.

Describe what you expected to happen

I think, the first &nbsp; &nbsp; should also be wrapped inside <span class="cm-null cm-jn-monospace"></span>. Visually, the four spaces should use the same monospaced font.

HTML in Developer tools

<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-2">* hello world</span></span></pre>
<div class="" style="position: relative;"><div class=" cm-jn-code-block-background  CodeMirror-linebackground"></div><pre class=" cm-jn-code-block CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-comment cm-variable-2 cm-jn-monospace">```python</span></span></pre></div>
<div class="" style="position: relative;"><div class=" cm-jn-code-block-background  CodeMirror-linebackground"></div><pre class=" cm-jn-code-block CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-null cm-jn-monospace"> &nbsp; &nbsp;</span><span class="cm-builtin cm-jn-monospace">print</span><span class="cm-null cm-jn-monospace">(</span><span class="cm-string cm-jn-monospace">"Hello, world"</span><span class="cm-null cm-jn-monospace">)</span></span></pre></div>
<div class="" style="position: relative;"><div class=" cm-jn-code-block-background  CodeMirror-linebackground"></div><pre class=" cm-jn-code-block CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-null cm-jn-monospace"> &nbsp; &nbsp;</span><span class="cm-comment cm-variable-2 cm-jn-monospace">```</span></span></pre></div>

KaneGreen avatar Jul 04 '22 05:07 KaneGreen

This seems to be fixed in the beta CodeMirror 6 editor, but still an issue in the CodeMirror 5 editor: screenshot: CodeMirror 6 monospaces text before codeblocks