Code blocks render extra stuff

[CialUnity]

Some code blocks add the line: <p data-line="45" class="sync-line" style="margin:0;"></p> https://imgur.com/a/LwRTuLV

for some reason, it only appears in the MPE Preview, its not there when I render to PDF

Code:

`# Onboard: Activate a Country #

Opal Subscriber Sync Service

Run SQL CSD Scripts

Folder Path for scripts:

\Subscriber\

Before running the script the first line must be edited in each script:

USE [SGPCSD]

Change SGPCSD to country being added

Add Variables to Octopus

Variable to be added:

Regions[SGP].OSSS

SGP is to be changed to the region being added and scope/value as follows:

Opal Billing for Onboard Service

Run SQL SUB Scripts

Folder Path for scripts:

\Billing\

Before running the script the first line must be edited to the country being activated:

USE [MEXSUB]

Change MEXSUB TO country being added

Add Variables to Octopus Opal Billing for Onboard Service Prohect

Variable to be added:

Regions[SGP].OBOS

SGP is to be changed to the region being added and scope/value as follows: `

[ThirtySomething]

Got the same issue here. In a larger document I've got a line of Javascript code. I'm using the triple backticks extended with the hint for Javascript:

#### Paragraph here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

```Javascript document.title = window.location.hostname + ' ' + document.title; ```

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

This results in the preview pane with the additional line:

<p data-line="201" class="sync-line" style="margin:0;"></p>

The complete rendering result is then:

Paragraph here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

document.title = window.location.hostname + ' ' + document.title;


<p data-line="201" class="sync-line" style="margin:0;"></p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

As @CialUnity mentioned, this happens only in preview. The PDF export is as expected.

[bert2]

Same issue here.

[jcvtieck]

same here. any pointers on how to solve this?

[bert2]

Ok, I did a little digging and found some kind of a work-around until this gets fixed (if ever).

The problem is actually in mume, a package used by this extension from the same author.

The "extra stuff" we are seeing are used as markers to sync the editor with the preview while scrolling. End of May 2018 a PR got merged that fixed a problem there, but made the logic which already is quite complicated even more complicated. My very uninformed guess is that the fix causes this issue.

Anyway, as a work-around we can change the code of the installed extension for ourselves:

1. Go to C:\Users\bert\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.10\node_modules\@shd101wyy\mume\out\src\transformer.js.
2. Remove or comment line 228:

if (!inCodeBlock && forPreview) {
    // outputString += createAnchor(lineNo);
}

3. Restart VSCode.

I expect there to be some problems with the sync while scrolling now, but that should still be less annoying than the extra stuff.

[bert2]

@shd101wyy I also noticed that the extra stuff was only rendered in later code blocks but not all of them. Since the value of inCodeBlock depends on mutable state, my guess is that the code-fence detector get's confused in very long documents. Maybe there is some edge case that was overlooked. But once it is wrong it will propagate that error to all later code fences.

[bert2]

Oh sheesh, I just found the real cause. It was a superfluous space before a code fence.

If you have a code fence that looks like this...

 ```
test (notice the extra space above, before the first backtick)
```

...it will confuse the code fence detector and cause the current and all subsequent code blocks to have that p.sync-line tag.

[ytrsk]

The mume tranformer have some problem with inCodeBlock state, which caused that it could't distinguish the code fence.

Go to C:\Users\ytrsk\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.10\node_modules@shd101wyy\mume\out\src\transformer.js.

replace line 226 with

const inCodeBlock = !!currentCodeBlockFence;

and remove the space before ~~~

[sigveio]

When using the 3 x backtick style (```) code fence, I'm getting the same problem without any extra spaces being involved.

In my case it appears to happen when there is another code block before it (perhaps incorrectly) using the triple backtick code fence as an inline code style.

So;

```code block 1```

```
code block 2
```

Will render...

code block 1

code block 2


<p data-line="X" class="sync-line" style="margin:0;"></p>

Where X is the line number of the last line in code block 2.

While...

```
code block 1
```

```
code block 2
```

Renders like it should with two cleanly formatted blocks.

If I correct the first block and instead introduce a space in front of the fence (just to test what others described above), they suddenly both get mangled with the .sync-line element. So it would seem like the problem generally relates to formatting issues in previous paragraphs

(VSCode 1.56.2 and plugin v0.5.18.)

[nicolasff]

This happens when there is a space right before the closing triple backticks too.

I had something like this:

```
some code here
↓↓↓ note how these closing backticks start with a space
 ```

and while the "invalid" block was rendered correctly, every single code block after it had an extra HTML line like

<p data-line="12" class="sync-line" style="margin:0;"></p>

(Visual Studio Code version 1.64.2, Markdown Preview Enhanced version 0.6.1)

[WangZhiqiang-academia]

When you type: ```anything here```maybe some other thing in the middle

```cpp {.line-numbers}

```

the preview window shows something like this: <p data-line="4" class="sync-line" style="margin:0;">

To deal with this issue, please use: `anything here`maybe some other thing in the middle

```cpp {.line-numbers}

```

[Jcampbell30]

I was using ~~~cpp when I should have been using ```cpp

That fixed the issue.