11ty / 11ty/webc

Rendering markdown from variable results in escaped HTML

Open
#190 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.4k
Forks
46
Avg merge
10m
Merged PRs (30d)
2

Description

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?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the behavior using the snippets from some-page.webc and my-component.webc, focusing on the @html expression and the nested WebC markdown element. Compare the generated output with the expected unescaped HTML and determine whether the escaping is expected for this attribute-based rendering path. Done means the behavior or recommended rendering approach is documented or covered by an appropriate regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.