Open xarthurx opened 3 months ago
Hi! It seems that:
<div class="i-ph-anchor-simple-thin" />
<div class="i-material-symbols-link" />
@
Is equivalent do doing
<div class="i-ph-anchor-simple-thin">
<div class="i-material-symbols-link">
@
<!-- rest of the content -->
</div>
</div>
Which doesn't sounds like it is what you want
In a React JSX context, <div />
would do what you want, maybe the documentation you got that code from was targeted at JSX?
In the case of vanilla HTML you want an explicit closing tag:
<div class="i-ph-anchor-simple-thin"></div>
<div class="i-material-symbols-link"></div>
@
Cheers
Thx. The HTML grammar issue got resolved by your method.
There's another problem, however, is a bit interesting.
<div class="i-material-symbols-link"></div>
will rendered as an icon in html.<div class="i-material-symbols-link"></div>
in the symbol
part only, it will not be rendered as an icon. Nothing is shown.<div class="i-material-symbols-link"></div>
outside the markdown part, but in the same webpage (for instance, before I call markdown-it to render the markdown file into my page), and then both the html
section and the symbol
part will be successfully rendered as an icon.I guess the reason is when only replace the symbol
part, the "replacing" process happens after the css engine parse the page and got triggered. So even the html code got replaced/injected, it actually doesn't trigger the css engine -- as a result, the code doesn't take effect...
That's gonna depend a lot on your build system but it sounds like you have a preprocessing tool that includes the CSS for the icons that it detects in your HTML, but it doesn't account for the ones in the Markdown rendered content
You're correct you would need to make it detect the icons after the Markdown is done processing for this to work 👍
Hi, I'm using a lot of icons from Iconify and would also like to use a different icons for the symbol.
Usually when you use such an icon in a html, you can just define a
class="i-xxxx-xxx"
and with a correct setting of css framework, it will work.You can check examples here: https://unocss.dev/presets/icons
However, when I try to do such things with
markdown-it-anchor
:it seems the code will keep adding nested DOM and doesn't render as an icons...
Is there a way to make it work?