Pug mixin —在字符串中格式化html标记

Question

I have a mixin that takes a title and content .

mixin card-header(title, content)
  .card.section
    .card-header.secondary-color.white-text
      h4.card-title= title
    .card-body
      p= content

When I use the mixin with just text It works fine, but when I add inline elements to the string such as code , b , em , etc. it doesn't create the tags it just displays the pug syntax.

+card-header('Page Header', 'I have #[b bold] text')

With that I would like the the output to be I have <b>bold</b> text
Instead it is creating I have #[b bold] text

What can I do to get the desired result?

Answer 1

This is actually happening because special characters are by default getting an escape sequence replacement. Since you do not want that, simply replace p= content with p!= content.

So, make your pug code look like that:

mixin card-header(title, content)
  .card.section
    .card-header.secondary-color.white-text
      h4.card-title= title
    .card-body
      p!= content

+card-header('Page Header', 'I have <b>bold</b> text')

Answer 2

The pug won't render the text twice, but you can put a block in your mixin like this:

mixin card-header(title, content)
    .card.section
        .card-header.secondary-color.white-text
            h4.card-title= title
        .card-body
            block

+card-header('Page Header')
    p I have #[b bold] text