Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
hagenburger opened this issue Oct 3, 2018 · 0 comments
Open

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

hagenburger opened this issue Oct 3, 2018 · 0 comments
Labels
enhancement New feature or request good first issue Good for newcomers plugin

Comments

@hagenburger
Copy link
Owner

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>
@hagenburger hagenburger added enhancement New feature or request good first issue Good for newcomers plugin labels Oct 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request good first issue Good for newcomers plugin
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@hagenburger