Some small issues with writing code & using highlight.js

[exklamationmark]

Hi Stephen,

Thanks for the great plugin. It boost my writing speed up a lot :)

I often write code in the blog as well, and use highlight.js to color it. Highlight.js requires me to have a class for the <code> tag for language detection. Thus, I am using this workaround with WP-Markdown:

original content (before save)

tests test test test test

<div class="wp-markdown-escape"><pre><code class="cpp">
// friend functions
#include <iostream>
using namespace std;

class Rectangle {
    int width, height;
  public:
    Rectangle() {}
    Rectangle (int x, int y) : width(x), height(y) {}
    int area() {return width * height;}
    friend Rectangle duplicate (const Rectangle&);
};
</code></pre></div>

tests test test test testtests test test test testtests test test test testtests test test test testtests test test test test

After the first save, it was stored as this HTML

<p>tests test test test test</p>

<div class="wp-markdown-escape"><pre><code class="cpp">
// friend functions
#include <iostream>
using namespace std;

class Rectangle {
    int width, height;
  public:
    Rectangle() {}
    Rectangle (int x, int y) : width(x), height(y) {}
    int area() {return width * height;}
    friend Rectangle duplicate (const Rectangle&);
};
</code></pre></div>

<p>tests test test test testtests test test test testtests test test test testtests test test test testtests test test test test</p>

It seems the < character was not escaped, and thus it disappear when showing on the page. Furthermore, when the HTML is converted back to editing, it shows up in the escaped form

On edit

<div class="wp-markdown-escape">
  <pre><code class="cpp">
// friend functions
#include &lt;iostream>
using namespace std;

class Rectangle {
    int width, height;
  public:
    Rectangle() {}
    Rectangle (int x, int y) : width(x), height(y) {}
    int area() {return width * height;}
    friend Rectangle duplicate (const Rectangle&);
};
</code></pre>
</div>

I think it should be escaped in the HTML and converted back during edit.

What do you think?

[stephenharris]

Hi @exklamationmark

That appears to be correct markdown behaviour. Anything in <div> blocks (unless it has the attribute markdown="1") is ignored and treated as HTML. When writing code in HTML you have to add in the necessary escaping as <code> and <pre> tags only provide styling.

Obviously that's inconvenient and goes against the whole purpose of markdown - but you can have highlight.js without adding the necessary <div> and <code> tags. There is this plug-in: https://github.com/mczenko/wp-markdown-code-highlighting-options

[exklamationmark]

I see, that works really well. thanks Stephen :)