Unescaped markup plugin

[LeaVerou]

As discussed in #887 .

I just pushed 07d77e5 but it’s still hidden (i.e. not in components.js)
URL: http://prismjs.com/plugins/unescaped-markup/
I didn’t do a PR so that it has a public URL and it’s hidden anyway if I don’t add it to components.js (and because I was being a bit lazy).
Does it look good to everyone? Would “raw markup” be a better name? Unescaped markup is kinda long, albeit descriptive.

ping @zeitgeist87 @Golmote

[zeitgeist87]

Hi @LeaVerou,

Great plugin! Here are my thoughts on it. First of all there seem to be a few minor whitespace issues in the before-highlight hook, where you mixed tabs and spaces a bit inconsistently. Secondly, Is there any reason to limit the plugin to the markup language? Lastly, the title of index.html is still Keep Markup.

[zeitgeist87]

What do you think about #893. I know it is wrong to abuse HTML-comments like this, but it works very well.

[zeitgeist87]

innerHTML seems to work with <template>-tags. No need for cloning.

[LeaVerou]

Huh, you’re right! How did I miss that? innerHTML does indeed work! I feel so silly now.
We should still provide the other options (script and the comment method), since template only works in modern browsers.

[LeaVerou]

What syntax would you suggest for <template>? We cannot be processing every template tag on the page, but also, we don't want people to have to add a language class to every template they use for this.
What about <template> inside <pre>? But that is kinda verbose. Alternatively, template with either a language class or a code class?

[zeitgeist87]

What syntax would you suggest for <template>?

Puh, I don't know.

What about <template> inside <pre>? But that is kinda verbose. Alternatively, template with either a language class or a code class?

We could allow both...

[Golmote]

I agree that this should not be limited to the Markup component.

[am0wa]

Hi, guys restriction of the plugin to markup language only is not enough for me as well.
So i just use plugin script with edited language check statement in the following way and it works for me:

Prism.hooks.add('before-sanity-check', function (env) {
        if (!env.language == "markup" && !env.element.className.includes("unescaped")) {
            return;
        }
                ....

So the code embedded code block in html looks like

<pre><code class="language-typescript unescaped"><!--
 import { Component } from '@angular/core';

    @Component({
      selector: 'app-banana',
      template: `<h1 class="banana-title">Hello Banana!</h1>`
      styles: ['.banana-title {color: yellow}']
    }) 
    export class BananaComponent { }
--></pre></code>

Or just

<pre><code class="language-markup"><!--
<h1 class="banana-title">Hello Banana!</h1>
--></pre></code>

[LeaVerou]

Interesting. Indeed, it seems there are use cases for other languages too, and we should not restrict it to markup. I don't like the opt-in though. Perhaps an opt out would be best.

[Haprog]

This is also useful for any language in systems that might remove line breaks and whitespace, but which do preserve comments or scripts as is.

[Golmote]

I think this issue can be closed now.