How do I insert html tags in JS with pug?

问题

When I need to use a JSON-like object in JS with different data in each block and iterating through that object I make a HTML code via pug.

Let me describe it in code

var footerMenu = {
   left: {
      title: "sometitle",
      list: [
         {
         title: "First thing to do",
         text:  "wake up and brush some teeth"
         },

         {
         title: "Second thing to do",
         text:   "start coding"
         },
(...)

Problem comes when text withing property footerMenu.left[0].text has to be styled with some tags.

I need something like this

...... text: "wake up and #[span.color-red brush] some teeth"

but, of course pug read that as simple string.

I don't want to write each block manually, how do I save same code structure but apply random tags into my JSON-object with pug ?

回答1:

You can write the html tags as usually something like:

text: "wake up and <span class='color-red brush'>some teeth</span>"

Then in pug you can use unescaped attributes like this:

.some-class!=footerMenu.left[0].text

or using string interpolation attributes unescaped

.some-class !{footerMenu.left[0].text}

来源：https://stackoverflow.com/questions/55794423/how-do-i-insert-html-tags-in-js-with-pug