Snippet block not including multiple elements

[blndab]

I am trying to display the code snippet for a button with an icon, but the snippet doesn't display properly.
These are the lines in my .jade file:

if button.hasIcon
    a.snippet(class="#{button.className}" href='#')
        i(class="fas #{button.iconName}")
        =button.buttonName

And this is how it is displayed:

<a href="#" class="btn btn-secondary btn-small">Filter</a>

It should be like this though:

<a href="#" class="btn btn-secondary btn-small">
    <i class="fas fa-filter">
        ::before
    </i>
    "Filter"
</a>

Can anyone help please?

[caiovaccaro]

Hi @BBLinda74 , how are you?

My guess is that "jade" is pretty much outdated, and the way it is parsing is stripping out tags inside "a", or the syntax for how to write tags inside tags has changed with time.

Since I no longer work for Huge, I don't have access to update the library my self.

Styleguide uses Harp, that have Jade built in. It is outdated, you can update it like this person did here.

Change the version of package.json to 0.24 (it is the latest release, as you can see here) and run npm install inside this folder (structure). Restart Styleguide and see if it helps.

If you still have problems, I would research common Jade issues of rendering tags and texts inside a parent tag.

A note for future contributors, Styleguide also uses Harp's partial to import module .jade files.

[blndab]

Hi @caiovaccaro ,

thank you for trying to help! I updated harp but still get the nested tags wrong. I also tried to use ": " instead of the nexted icon tag on the next line and indented, but it still strips the nested icon tag.....
I really don't know what could be wrong, because I am definitely using the correct syntax based on their documentation.

[caiovaccaro]

Is your project on github @BBLinda74 ?

[blndab]

Hi Caio, yes, you can find it at https://github.com/BBLinda74/huge-styleguide-anx. I really hope you can help ;) Thanks in advance for your effort! Regards, Belinda

…

On Fri, Nov 16, 2018 at 4:01 PM Caio Vaccaro ***@***.***> wrote: Is your project on github @BBLinda74 <https://github.com/BBLinda74> ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#113 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANdh3zvcH_4tqisb7m68eSfnUwyVjwYqks5uvtNKgaJpZM4Ydd-G> .