CODEWITHSUNDEEP
yamlassembleyaml-front-matter
pipboy3000
pipboy3000

Reputation: 3

Code snippets/blocks within YFM variables

I'm trying to take a code snippet from Litmus to use within my Assemble.io project (HTML emails). A typical code block looks like this:

<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" />

Ideally, I would love to just stick this whole thing into a YFM variable, which I've tried unsuccessfully. I believe the parser is getting stuck on the #, the quotes, the curly braces, or any combination of the above. I've tried wrapping the code block in '', "", ``, and ```, none of which work. Right now I've taken the variable part of that block (in this case, 0me4e2bg) and used just that in my YFM, which works well enough but I'm sure using CSS and HTML blocks/snippets in YFM has happened to someone else and I'm curious if there is a solution? Is it just that I'm not escaping it properly? Thanks!

EDIT: After trying the answer suggested by Anthon, I get the following error

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

which looks like it's triggered by the @ in @media?

Upvotes: 0

Views: 318

Answers (1)

Anthon
Anthon

Reputation: 76822

A scalar in YAML doesn't need quotes unless it has special characters, and in your case it does. Quoted scalars can use single quotes in which existing single quotes would need to be repeated, or double quotes in which you can use backslash escapes.

If you want your string as is using literal block quoting is most of the best approach, the only thing that has problems with is starting whitespace and end-of-line blanks (i.e. before the newline). You should be able to assign your code block to the variable code as follows:

---
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>

You have to make sure the indentation under code is consistent, which is normally easier than parsing the string for characters to escape.

You can e.g. check online that the first part is valid YAML.

Upvotes: 1

Related Questions