Как вставить HTML-теги в JS с мопсом?

Question

Когда мне нужно использовать JSON-подобный объект в JS с разными данными в каждом блоке и перебирать этот объект, я делаю HTML-код через pug.

Позвольте мне описать это в коде

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"
         },
(...)

Проблема возникает, когда текст со свойством footerMenu.left[0].text должен быть стилизован с помощью некоторых тегов.

Мне нужно что-то вроде этого

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

но, конечно, мопс прочитал это как простую строку.

Я не хочу писать каждый блок вручную, как мне сохранить ту же структуру кода, но применить случайные теги в мой JSON-объект с помощью pug?

Answer 1

Вы можете написать html-теги как обычно что-то вроде:

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

Затем в pug вы можете использовать неоткрытые атрибуты , например:

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

или с использованием атрибутов интерполяции строк без экранирования

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