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

How to add custom html tags #514

Closed
lordfriend opened this issue Nov 19, 2014 · 8 comments
Closed

How to add custom html tags #514

lordfriend opened this issue Nov 19, 2014 · 8 comments
Labels

Comments

@lordfriend
Copy link

I want to add some custom html tags like this:

<example>
    <file name="index.html">
    ```html
      <div class="example">
      example code here
      </div>
    ```
    </file>
</example>

but it seems <example> and <file> tag are not recognised as a valid html tag. marked think they are paragraph elements and add a couple of <p> around them

the compiled content is:

<p><example>
    <file name="index.html"></p>
    <pre><code class="lang-html">
      &lt;div class="example"&gt;
      example code here
      &lt;/div&gt;
    </code></pre>
    <p></file>
</example></p>

This behave make the <example> and <file> tag fail to work

@lordfriend
Copy link
Author

Well,
when I added some lines between the custom html tag and code blocks, it seems get worked. but the code blocks failed.

@brunowego
Copy link

This is very inconvenient, I am creating a documentation for my project which involves displaying the element, however unfortunately is automatically added a paragraph around.

My Angular directive:

<pf-panel>
    <pf-body>
        <p>Exemplo de painel com corpo.</p>
    </pf-body>
</pf-panel>

The results:

<p><pf-panel>
    <pf-body>
        <p>Exemplo de painel com corpo.</p>
    </pf-body>
</pf-panel></p>

Perhaps not the purpose of this project ...

@brunowego
Copy link

@chjj if you have a little time, please take a look on this issue 👍

@joshbruce
Copy link
Member

#985

@ghdoergeloh
Copy link

Sorry to comment on this old issue, but I cannot find what happend to this issue/feature request.
I found some Issues like #283 and the PR #833 but that was not merged.
I still have the problem, that custom html tags are not recognised by the parser. Why aren't they handled like normal html?

@ghdoergeloh
Copy link

Okay, partially it is working:

> marked.parse('<div-test></div-test>') // didn't work
'<p><div-test></div-test></p>\n'

> marked.parse('<div-test>\n</div-test>') // worked
'<div-test>\n</div-test>'

> marked.parse('<div-test>test</div-test>') // didn't work
'<p><div-test>test</div-test></p>\n'

> marked.parse('<div-test>\ntest\n</div-test>') // worked
'<div-test>\ntest\n</div-test>'

@UziTech
Copy link
Member

UziTech commented Nov 30, 2020

That is because there is a difference between an HTML block and inline HTML.

Any inline element will get wrapped by a <p> tag if it is not inside another block element. You can use parseInline to prevent wrapping if you only want inline blocks parsed.

@bent10
Copy link
Contributor

bent10 commented Oct 26, 2023

It's super late to join this issue, but I'd like to share an alternative approach that utilizes directive syntax which might be suitable for your needs:

import { Marked } from 'marked'
import { createDirectives, presetDirectiveConfigs } from 'marked-directive'

const markdown = `::::example{#foo.bar}
:::file{name="index.html"}
\`\`\`html
<div class="example">
  <p>example code here</p>
</div>
\`\`\`
:::
::::
`

const html = new Marked()
  .use(
    createDirectives([
      ...presetDirectiveConfigs,
      { level: 'container', marker: '::::' }
    ])
  )
  .parse(markdown)

console.log(html)

Yields:

<example id="foo" class="bar">
  <file name="index.html">
    <pre><code class="language-html">&lt;div class=&quot;example&quot;&gt;
  &lt;p&gt;example code here&lt;/p&gt;
&lt;/div&gt;
</code></pre>
  </file>
</example>

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

No branches or pull requests

6 participants