[Bug] Blank lines in code when I convert Markdown to HTML

[Kristinita]

Summary

I want correct convert <code> of Markdown to HTML. Now I need manually remove or add blank lines each time.

Expected behavior 1 — one-line code

<p>If you Litecoin client not supported Litecoin schema URI, my Litecoin address:</p>
<pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP</code></pre>

Actual behavior 1 — one-line code

<p>If you Litecoin client not supported Litecoin schema URI, my Litecoin address:</p>
<pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP
</code></pre>

Expected behavior 2 — multi-line code

<p><kbd>Alt+N</kbd> → <code>Settings - User</code> → add in open file 2 lines:</p>
<pre><code>
&quot;color_scheme&quot;: &quot;Packages/SashaSublime/SashaSublime.tmTheme&quot;,
&quot;theme&quot;: &quot;SashaSublime.sublime-theme&quot;,
</code></pre>

Actual behavior 2 — multi-line code

<p><kbd>Alt+N</kbd> → <code>Settings - User</code> → add in open file 2 lines:</p>
<pre><code>&quot;color_scheme&quot;: &quot;Packages/SashaSublime/SashaSublime.tmTheme&quot;,
&quot;theme&quot;: &quot;SashaSublime.sublime-theme&quot;,
</code></pre>

Screenshot

For highlight, I use rainbow library.

My code: https://github.com/Kristinita/Kristinita.github.io/blob/master/technical_texts/markdown_preview_rainbow.html

Steps to reproduce

My User\MarkdownPreview.sublime-settings file:

{
    "html_simple": true,
}

I have Markdown file:

If you Litecoin client not supported Litecoin schema URI, my Litecoin address:

    LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP

---

---

<kbd>Alt+N</kbd> → `Settings - User` → add in open file 2 lines:

    "color_scheme": "Packages/SashaSublime/SashaSublime.tmTheme",
    "theme": "SashaSublime.sublime-theme",

Be attentive, [correctly place](http://ru.stackoverflow.com/a/238934/199934) commas, quotes, brackets and colons.

Ctrl+Shift+P → Markdown Preview: Export HTML In Sublime Text → markdown → I get results for actual behavior, not for expected behavior.

Environment

Operating system and version: Windows 10.0.14393 Sublime Text: Build 3126

Thanks.

[facelessuser]

I'm not sure this is a problem. Is this introducing something undesirable? The visual rendering is the same whether there is a new line at the end or not. And to be honest, this is probably due to the the Python Markdown parser underneath, not directly Markdown Preview.

[facelessuser]

Let me explain further.

I entered this; notice I am doing one code block the supposed "bug" way, and the other forcing the "right" way:

If you Litecoin client not supported Litecoin schema URI, my Litecoin address:

    LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP

<pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP</code></pre>

---

---

<kbd>Alt+N</kbd> → `Settings - User` → add in open file 2 lines:

    "color_scheme": "Packages/SashaSublime/SashaSublime.tmTheme",
    "theme": "SashaSublime.sublime-theme",

Be attentive, [correctly place](http://ru.stackoverflow.com/a/238934/199934) commas, quotes, brackets and colons.

Here is my visual results. Notice there are no differences:

I imagine your visual issues are due to your CSS, not because of the trailing newline.

[Kristinita]

@facelessuser , I remove all CSS into https://github.com/Kristinita/Kristinita.github.io/blob/master/technical_texts/markdown_preview_rainbow.html files. Results for actual and extended behavior still are different:

Thanks.

[facelessuser]

After playing with this a bit more, I think html_simple might be faulty. If you turn off html_simple, I think the issue clears up.

So there might actually be a bug in the html_simple adjustments. I will have to look at this when I have more time.

[Kristinita]

All right, I disable html_simple. Now my MarkdownPreview.sublime-settings file is:

{
    "html_simple": false,
    "embed_css_for_sublime_output": false,
}

But I get same conversion results as actual behavior. How I can get expected behavior?

Thanks.

[facelessuser]

This won't help: "embed_css_for_sublime_output": false,.

Visually, I have no issues when html_simple is disabled. The actual output is this

<pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP
</code></pre>

This is fine and is expected for Python Markdown and should not not give you any visual issues.

What I thought I was seeing at the time was thathtml_simple caused extra white space (notice the indentation):

<pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP
    </code></pre>

But now that I am trying to reproduce it, I cannot. Maybe it was an issue on my part. The new line is not a bug.

Look here. It shows the output of many Markdown parsers, and a lot do the same thing, only a few do not: http://johnmacfarlane.net/babelmark2/?text=++++LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP.

[Kristinita]

All right, it's no bug. What I need to make to obtain expected behavior, not actual behavior? The reasons I wrote in previous comments.

Thanks.

[facelessuser]

I think the issue has nothing to do with Markdown preview. I think you are doing something to the HTML after it is processed. I looked at your HTML at this link https://github.com/Kristinita/Kristinita.github.io/blob/master/technical_texts/markdown_preview_rainbow.html. Markdown Preview does not ident elements like that. I feel like you are prettifying your HTML, and because you are, it is introducing an extra blank line:

This:

<pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP
</code></pre>

Is very different from this:

    <pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP
    </code></pre>

Notice the second example introduces white space (not just a new line, but indentation) at the end of code. Markdown Preview does not ident pre and code tags like this. Markdown Preview may not pretty output the HTML, but it is valid, but if things are prettified incorrectly, it can introduce a difference in output.

So my question is, what else are you doing to the HTML after it outputs it?

[Kristinita]

All right, I'm not prettify my code. I only make DOCTYPE — I print ! and press Tab — and insert conversion result between <body> tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>If you Litecoin client not supported Litecoin schema URI, my Litecoin address:</p>
    <pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP
    </code></pre>
    <hr />
    <hr />
    <p><kbd>Alt+N</kbd> → <code>Settings - User</code> → add in open file 2 lines:</p>
    <pre><code>"color_scheme": "Packages/SashaSublime/SashaSublime.tmTheme",
    "theme": "SashaSublime.sublime-theme",
    </code></pre>
    <p>Be attentive, <a href="http://ru.stackoverflow.com/a/238934/199934">correctly place</a> commas, quotes, brackets and colons.</p>
</body>
</html>

I no get expected behavior:

Question

How I can get expected behavior?

Thanks.

[facelessuser]

You are still doing something to the output afterwards. This is the output with "html_simple": true:

<p>If you Litecoin client not supported Litecoin schema URI, my Litecoin address:</p>
<pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP
</code></pre>
<hr />
<hr />
<p><kbd>Alt+N</kbd> → <code>Settings - User</code> → add in open file 2 lines:</p>
<pre><code>"color_scheme": "Packages/SashaSublime/SashaSublime.tmTheme",
"theme": "SashaSublime.sublime-theme",
</code></pre>
<p>Be attentive, <a href="http://ru.stackoverflow.com/a/238934/199934">correctly place</a> commas, quotes, brackets and colons.</p>

Notice that the content is not indented. When you insert the content into your HTML, you need to insert it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<p>If you Litecoin client not supported Litecoin schema URI, my Litecoin address:</p>
<pre><code>LLVvhNKGMLGHa8QmeRrBsjZUBjSpQMjUkP
</code></pre>
<hr />
<hr />
<p><kbd>Alt+N</kbd> → <code>Settings - User</code> → add in open file 2 lines:</p>
<pre><code>"color_scheme": "Packages/SashaSublime/SashaSublime.tmTheme",
"theme": "SashaSublime.sublime-theme",
</code></pre>
<p>Be attentive, <a href="http://ru.stackoverflow.com/a/238934/199934">correctly place</a> commas, quotes, brackets and colons.</p>
</body>
</html>

You can't insert indentation like that as it affects the content of some of the HTML tags.

[Kristinita]

@facelessuser , thanks, I understood.

But I should not use my beautifier? I need beautifier.

[facelessuser]

But I should not use my beautifier? I need beautifier.

It's not an easy answer. I know this, the way Python Markdown outputs pre, code blocks is sensitive to indentation. If you wish to generate HTML with Python Markdown, but use a beautifier that does not recognize when indentation can mess up the content, then I would suggest to not use that beautifier. If you have a beautifier that can handle situations like this proper, then it would be okay.

Ideally, you would have a system that generates your HTML content from markdown and you never have to look at the HTML source making the need for pretty HTML obsolete. When I work with Markdown, I am using tools where I rarely have to look at my HTML, so I don't care how pretty it looks. I rarely pretty print because I don't care how it looks, just that it is formatted proper.

If you generally trust the output tool, then you rarely have to look at the actual output. On rare occasions when debugging an output you might want to run the content through a reliable pretty print tool to debug an issue, but other than that, you shouldn't really need to pretty print your content.

I'm not sure what beautifier you are using, but I would argue that maybe it is the tool with a bug as it does physically alter the content in your pre, code blocks and adds undesired whitespace.

[Kristinita]

I'm not sure what beautifier you are using, but I would argue that maybe it is the tool with a bug as it does physically alter the content in your pre, code blocks and adds undesired whitespace.

I use HTML-CSS-JS Prettify, its recommended on Stack Overflow. HTML-CSS-JS Prettify prettify good code blocks, but I use paste and indent. I understood, I don't need paste_and_indent for code blocks.

When I work with Markdown, I am using tools where I rarely have to look at my HTML, so I don't care how pretty it looks.

I wrote text in Markdown, but I designed text in HTML. I can not have live preview my design changes in Markdown. If I further make editions, I edit HTML, not Markdown. Therefore, I need beautifier. Thanks.

[facelessuser]

I wrote text in Markdown, but I designed text in HTML. I can not have live preview my design changes in Markdown. If I further make editions, I edit HTML, not Markdown. Therefore, I need beautifier. Thanks.

There are probably ways to make this work, but it would probably require work upfront. More importantly, you have to find a workflow that works best for you, so I understand.