Фрагменты кода / блоки в переменных YFM

Question

Я пытаюсь взять фрагмент кода от Litmus для использования в моем проекте Assemble.io (электронные письма HTML). Типичный блок кода выглядит следующим образом:

<style>@media print{ #_t { background-image: url('https://0me4e2bg.emltrk.com/0me4e2bg?p&d=%%Email%%');}} div.OutlookMessageHeader {background-image:url('https://0me4e2bg.emltrk.com/0me4e2bg?f&d=%%Email%%')} table.moz-email-headers-table {background-image:url('https://0me4e2bg.emltrk.com/0me4e2bg?f&d=%%Email%%')} blockquote #_t {background-image:url('https://0me4e2bg.emltrk.com/0me4e2bg?f&d=%%Email%%')} #MailContainerBody #_t {background-image:url('https://0me4e2bg.emltrk.com/0me4e2bg?f&d=%%Email%%')}</style><div id="_t"></div>
<img src="https://0me4e2bg.emltrk.com/0me4e2bg?d=%%Email%%" width="1" height="1" border="0" />

В идеале я хотел бы просто вставить все это в переменную YFM, которую я безуспешно пытался. Я считаю, что синтаксический анализатор застревает на #, кавычках, фигурных скобках или любой комбинации вышеперечисленного. Я попытался обернуть блок кода в '', "", `` и ```, ни один из которых не работает. Прямо сейчас я взял переменную часть этого блока (в данном случае 0me4e2bg) и использовал именно это в своем YFM, который работает достаточно хорошо, но я уверен, что использование блоков CSS и HTML / фрагментов в YFM произошло с кем-то еще и мне интересно, есть ли решение? Это просто, что я не могу избежать этого должным образом? Спасибо!

РЕДАКТИРОВАТЬ: после попытки ответа, предложенного Anthon, я получаю следующую ошибку

can not read an implicit mapping pair; a colon is missed

Похоже, это вызвано @ в @media?

Answer 1

Скаляр в YAML не нуждается в кавычках, если в нем нет специальных символов, а в вашем случае это необходимо. Скалярные кавычки могут использовать одинарные кавычки, в которых необходимо будет повторять существующие одинарные кавычки, или двойные кавычки, в которых вы можете использовать обратные слэши.

Если вы хотите, чтобы в вашей строке использовалась литеральная блочная кавычка, это самый лучший подход, единственное, с чем возникают проблемы, это запуск пробела и пробелов в конце строки (то есть перед новой строкой). Вы должны иметь возможность назначить свой блок кода для переменной code следующее:

---
title: YAML Front Matter
description: A very simple way to add structured data to a page.
code: |
  <style>@media print{ #_t { background-image: url('https://0me4e2bg.emltrk.com/0me4e2bg?p&d=%%Email%%');}} div.OutlookMessageHeader {background-image:url('https://0me4e2bg.emltrk.com/0me4e2bg?f&d=%%Email%%')} table.moz-email-headers-table {background-image:url('https://0me4e2bg.emltrk.com/0me4e2bg?f&d=%%Email%%')} blockquote #_t {background-image:url('https://0me4e2bg.emltrk.com/0me4e2bg?f&d=%%Email%%')} #MailContainerBody #_t {background-image:url('https://0me4e2bg.emltrk.com/0me4e2bg?f&d=%%Email%%')}</style><div id="_t"></div>
  <img src="https://0me4e2bg.emltrk.com/0me4e2bg?d=%%Email%%" width="1" height="1" border="0" />
---
<h1> {{ title }} </h1>

Вы должны убедиться, что отступ под code является последовательным, что обычно проще, чем разбор строки для символов, чтобы убежать.

Например, вы можете проверить онлайн, что первая часть действительна YAML.