Open hagenburger opened 5 years ago
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.
<html>
<div>
Two options:
<x-html>
<pimd-html>
<html-tag>
Tags to convert:
<head>
<body>
An example use case could be the lang property:
lang
```html +preview <html lang="fr"> <body> <h1><q>Hello world</q></h1> </body> </html>
When used with this CSS: ```css q { quotes: "“" "”"; } q:lang(fr) { quotes: "«" "»"; }
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.
<html lang="fr">
<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>
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:
<html>
into<div>
<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: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:
As the
<html lang="fr">
tag is missing, the english quotations marks apply.Expected result