Codeblocks are not showing Tabs or 4 Spaces properly

[toileto]

Hi, thanks for this awesome theme, it's really beautiful!

Unfortunately, I found some bugs.

As python are sensitive regarding indentation, this theme is not showing the indentation properly. For example, below is the markdown.

But when rendered, tabs are missing. I tried with both Tab and 4 spaces but they produced the same result no matter what.

Overall, it's a beautiful theme and I really like it. I hope you can help to fix this bug to improve how tabs inside code blocks are rendered.

Thank you!

[hfactor]

Hi, I get the problem. I will check if there is some available solution.

[jwonyLee]

Hello, this comment can be a bit awkward using a translator. ;( I think this problem is probably related to some styles in style.css. Among them, it was confirmed that indentation occurs when the lower part is commented out. But I don't know which code specifically is causing the problem.

code {
    font-family: Consolas, 'Courier New', Courier, monospace;
    display: inline-block;
    overflow: auto !important;
    white-space: pre-line !important;       
    word-wrap: break-word !important;       
    padding: 2px 2px  2px 2px;
    vertical-align:middle;
    padding: 2px 2px 2px 2px;
    border: 1px solid var(--secondary-border-color);
    border-radius: 4px;
}

.regular-sans code {
    padding: 20px;
    background-color: var(--bg-sub);
    border-radius: 5px;
    border: none;
}

.serif code {
    padding: 20px;
    background-color: var(--bg-sub);
    border-radius: 5px;
    border: none;
}

pre code {
    font-family: Consolas, 'Courier New', Courier, monospace;
    display: inline-block;
    overflow: auto !important;
    white-space: pre-line !important;       
    word-wrap: break-word !important;       
    padding: 15px 15px  15px 15px;
    vertical-align:middle;
    width: 90%;
    background-color: var(--bg-sub);
    border: 1px solid var(--secondary-border-color);
    border-radius: 5px;
    color: var(--text-main);
}

Hope this comment helps you fix the issue.

[LucaGaspa]

It seems that no HTML space character is generated.

I have a small use case and the following workaround solved my problem, but I DO NOT RECOMMEND THIS APPROACH.

I managed to generate the missing spaces using the U+00a0 UTF-8 space character (opt + space in MacOS). In JSON code blocks it works fine, while in other code blocks it generates error spans as follows:

<span class="err">&nbsp;&nbsp;</span>

then in highligh.css you can find .highlight .err class and comment out the background-color attribute so you don't see the red background on indents.

[gnuanu]

Hello, this comment can be a bit awkward using a translator. ;( I think this problem is probably related to some styles in style.css. Among them, it was confirmed that indentation occurs when the lower part is commented out. But I don't know which code specifically is causing the problem.

Good catch @jwonyLee

I played with it a bit and figured removing white-space: pre-line !important; from both code and pre code fixes the issue.

[gnuanu]

Another minor issue that bothered me was the color scheme used for the code blocks, which is not going well with dark mode. I fixed it by using the monokai color schme scss from here and replaced highligh.css with it.

The only caveat is, you'll end up with a dark color scheme for code blocks on both light and dark modes. But I can live with that. :)

[oliwang]

Hello, this comment can be a bit awkward using a translator. ;( I think this problem is probably related to some styles in style.css. Among them, it was confirmed that indentation occurs when the lower part is commented out. But I don't know which code specifically is causing the problem.

Good catch @jwonyLee

I played with it a bit and figured removing white-space: pre-line !important; from both code and pre code fixes the issue.

Had the same issue. Commented out these two lines and the indentations are back. Thanks.

[hfactor]

@oliwang Yes. It worked. I have corrected this on the new version (check https://github.com/hfactor/hfactor.github.io). Will be updating upstream soon.