How much raw html is too much in Markdown?

Until recently, MarkUpDown had allowed you to paste copied HTML snippets into Markdown with all of the html styling retained using the not-so-discoverable shortcuts alt-v and, with quote, alt-shift-v).

This pasted those snippets into your Markdown with all of the HTML's CSS, making for the potentially neat situation where your quote was visibly very different from the rest of your page, preserving the look & feel of the page which provided your quote.

I quickly found that preserving colors could make for ugly pastes, and wrote some code to remove those styles, but otherwise, quotes would appear to be very similar to the original.

So not exact, but you can see the resemblance with the original:

But the code was also very ugly. There was so much CSS it started to ruin the whole "shorthand" nature of Markdown.

<p style="word-spacing: 0.05em; line-height: 1.6em; position: relative; z-index: 1; font-family: ‘Source Sans Pro’, ‘Helvetica Neue’, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration- ">Vue (pronounced /vjuː/, like<span>&nbsp;</span><strong style="font-weight: 600; ">view</strong>) is a<span>&nbsp;</span><strong style="font-weight: 600; ">progressive framework</strong><span>&nbsp;</span>for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with<span>&nbsp;</span><a href="https://vuejs.org/v2/guide/single-file-components.html" style="text-decoration: none; font-weight: 600;">modern tooling</a><span>&nbsp;</span>and<span>&nbsp;</span><a href="https://github.com/vuejs/awesome-vue#components–libraries" target="_blank" rel="noopener" style="text-decoration: none; font-weight: 600;">supporting libraries</a>.</p>

This html code was provided by Microsoft’s HTML Clipboard Format. The CSS dump above is, honestly, essentially exactly what I get from the clipboard’s garbled mess. Browsers seem to translate many classes into inline styles, and the clipboard format doesn’t do anything to normalize it.

(To the HTML Clipboard Format’s credit, however, you also get the original link, so that "From VueJS.org" link preceeding the quote is a "free" part of the "paste html as quote" action in MarkUpDown.)

Here’s the first p tag from that html again with some linebreaks…

<p
 style="word-spacing: 0.05em; line-height: 1.6em; position: relative; z-index: 1;

 font-family: ‘Source Sans Pro’, ‘Helvetica Neue’, Arial, sans-serif; font-size: 15px;
 font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal;
 font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px;
 text-transform: none; white-space: normal; widows: 2; -webkit-text-stroke-width: 0px;

 text-decoration-style: initial; text-decoration- ">

Good grief, right? You don’t want all that trash in your otherwise pretty clean Markdown, do you?

The first thing I tried was to pull all the styling out into classes that I’d put just north of the blockquote, making something like this…

<style>.q233941–321 {word-spacing: 0.05em; line-height: 1.6em; position: relative; z-index: 1; font-family: ‘Source Sans Pro’, ‘Helvetica Neue’, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial;}

</style> > <p class="q233941–321">Vue (pronounced /vjuː/, like …

I also started trying to normalize the classes and pull out shared settings when they overlapped so there wouldn’t be as much text before the blockquote. That was fun.

The classes route is better, at least once you get to the blockquote, but that’s still a lot of markup to inject into a markup shorthand. I didn’t like it.

So for now I’ve removed inline styles and classes from pastes, which I’m about to release. I don’t feel great about, but you do retain the markup, most importantly bold, italics, links, even images, which is a heck of a lot better than treating HTML as plain text. But it isn’t nearly as pretty to look at now.

I’m planning on bringing styles back under the "opt-in" settings under the "Beta Features" section of settings, but it’s hard to justify the overhead I’ve already spent on it. The Markdown stays cleaner now. That’s ultimately an improvement for a Markdown editor.

Oh well. Thus is the life of a utility author.