pimd
pimd copied to clipboard
Published
20 hours ago •
hagenburger
hagenburger
Convert <html> and other special HTML tags to <div> in preview
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:
- Convert
<html>into<div> - 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>:
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>
