hagenburger/pimd

Convert <html> and other special HTML tags to <div> in preview

Opened this issue · 0 comments

hagenburger commented

If a code block contains <html>, the preview must convert it into a <div> (or other HTML tag) as otherwise the browser will ignore it.

Two options:

  1. Convert <html> into <div>
  2. Convert <html> into Custom Element-style <x-html> or <pimd-html> or <html-tag>

Tags to convert:

  • <html>
  • <head>
  • <body>

Example use case

An example use case could be the lang property:

```html +preview
<html lang="fr">
  <body>
    <h1><q>Hello world</q></h1>
  </body>
</html>
```

When used with this CSS:

q {
  quotes: "“" "”";
}

q:lang(fr) {
  quotes: "«" "»";
}

Current result

The browser ignores <html> and <body>:

bildschirmfoto 2018-10-03 um 16 15 59

So the result (in the browser’s DOM, not in the source code of the page) looks like:

<div class="pimd-example">
  <div class="pimd-preview">
    <!-- missing <html lang="fr"> -->
      <!-- missing <body> -->
        <h1><q>Hello world</q></h1>
      <!-- missing </body> -->
    <!-- missing </html> -->
  </div>
  <div class="pimd-code"><pre><code class="lang-html">...</code></pre></div>
</div>

As the <html lang="fr"> tag is missing, the english quotations marks apply.

Expected result

<div class="pimd-example">
  <div class="pimd-preview">
    <x-html lang="fr">
      <x-body>
        <h1><q>Hello world</q></h1>
      </x-body>
    </x-html>
  </div>
  <div class="pimd-code"><pre><code class="lang-html">...</code></pre></div>
</div>