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.

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

Rendering markdown from variable results in escaped HTML #190

Open
agarzola opened this issue Aug 9, 2023 · 1 comment
Open

Rendering markdown from variable results in escaped HTML #190

agarzola opened this issue Aug 9, 2023 · 1 comment

Comments

@agarzola
Copy link

agarzola commented Aug 9, 2023

I want to pass markdown to a WebC component via an attribute. Here’s how I’m trying to do it:

<!-- some-page.webc -->
<my-component text='This is text with [a link](/some-path) and **strong text**.'></my-component>
<!-- my-component.webc -->
<div class="we-love-divs">
  <x webc:nokeep @html="`<y webc:type='11ty' 11ty:type='md'>${text}</y>`"></x>
</div>

The resulting HTML looks like this:

<div class="we-love-divs">
  &lt;p&gt;This is text with &lt;a href="/some-path"&gt;a link&lt;/a&gt; and &lt;strong&gt;strong text&lt;/strong&gt;.&lt;/p&gt;
</div>

I expected to get this:

<div class="we-love-divs">
  <p>This is text with <a href="/some-path">a link</a> and <strong>strong text<strong>.</p>
</div>

So I have two questions:

  1. Is escaped HTML the expected output of my sample code above?
  2. Is there a better way to render Markdown that is passed to a WebC component in an attribute?
@agarzola
Copy link
Author

Leaving a note here for my future self: I spent an embarrassingly long amount of time today attempting to add functionality to make webc parse @html with whatever webc:type is set, so that this would work as expected:

<div class="we-love-divs">
  <x webc:nokeep webc:type='11ty' 11ty:type='md' @html='text'></x>
</div>

i.e. Use 11ty’s Markdown parser to process the value passed to @html.

This feels like the right solution, but I have not been able to make that happen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant