evilstreak / markdown-js

A Markdown parser for javascript
7.69k stars 863 forks source link

preserve HTML code #288

Open Pomax opened 7 years ago

Pomax commented 7 years ago

This library converts HTML code inside a markdown file into "escaped" HTML code, which is pretty problematic. I don't see anything in the README that says "leave stuff of which the syntax is unknown alone" so that something like this:

...
<div className="note">
## As an aside
here is *some* text
</div>
...

converts to

...
<div className="note">
<h2>As an aside</h2>
<p>here is <em>some</em>text</p>
</div>
...

Instead it ends up doing weird stuff like <p>&lt;div className=&quot;note&quot;&gt;</p><h2> which is pretty bad. How does one prevent this from happening?

Ratstail91 commented 7 years ago

I'm having the same issue. I'd like to embed class attributes into divs (to control what is displayed with Semantic UI), but this won't work with the implementation as it is.

dchevell commented 7 years ago

This issue effectively means this implementation of markdown is broken, as markdown is meant to allow inline HTML by design. From the man himself:

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

Ratstail91 commented 7 years ago

It seems as though this module os no longer supported. I've switched to markdown-it, which is fantastic, and even has a plugin to resolve this very issue.

dchevell commented 7 years ago

@Ratstail91 thanks for the tip, that lib allows you to enable inline html (again, strange that this isn't on by default considering the spec). Unfortunately the lib is over 5x the size (100kb minified) but I guess them's the breaks 😁

Edit: chjj/marker also preserves inline HTML by default, and is 20kb minified

Pomax commented 7 years ago

I use marked, plus code that preprocesses my markdown specifically to what I need it to do. I guess I could refactor that code into something pretty tiny that can be configured with a few terse option objects, and throw that up on npm, as it's mostly a bunch of functions that all either look for <sometag .... /> or <sometag>....</sometag> and mark those regions as convert: false except for divs that I know contain more markdown due to the class the div uses.

Not quite the same as "preserving all HTML" but since you typically only have very specific HTML inside markdown (markdown already covers most of the syntax) being explicit about what should be preserved is perhaps not such a crazy idea.