Better code preview: Different background and improve multi-line code support

[Ativerc]

Here are the current problems with code in Markdown Preview in Brackets:

1. The background of code doesn't change. Just the font changes. This makes it harder to skim for code snippets.

2. Multi-line code preview is erratic. (Please look at the screenshot attached. The same <p> has different preview output.) The ``` doesn't disappear.

3. Sometimes the whitespace isn't preserved in multi-line code snippet.

Can the people who are developing this just conform to one Markdown standard so that I don't have to change my writing style just so the preview looks nice? Some people have advised me to remember the markdown format and not to depend on the preview. But I need the preview/final-render of markdown, while i look over my notes sometimes.

P.S.: CommonMark.

[Ativerc]

In this screenshot, you see that the code snippets are different but they are presented without any indication of that.

[khatastroffik]

The Markdown Preview plugin is based on the marked project.
The plugin allow to choose between "Standard Markdown" and "Github-Flavored (GFM)".

• "Standard Markdown" correspond to Markdown
• "Github-Flavored (GFM)" correspond to GitHub Flavored Markdown
  as mentioned in this Markdown Flavors list.

The "Standard Markdown" doesn't define/implement the fenced code blocks, though the "Github-Flavored (GFM)" does.

In your code sample:

```
   <p>Hi</p>
```
```
<p>Hi</p>
```

is interpreted differently:

• Standard:
  • all fences are ignored
  • the first block is indented and will be formated as <code>
  • the second block isn't idented and will be interpreted as HTML markup and rendered!
• GFM:
  • the fences are recognized
  • the content between the fences is interpreted as code block (independent from the indentation of the block content)

Hence: the behavior of the plugin is correct, afaics.

---

Note:
there's a new version of the "marked" library available.

• update the marked.js file from https://github.com/chjj/marked/blob/master/lib/marked.js

[khatastroffik]

@Ativerc:
as for your issue No 2: the color of the code background within the preview panel depends on the theme chosen. Hence, some themes enforce a background color for the <pre><code>... elements and some other themes don't.
workaround in your case: edit and adapt the theme file of your choice...