How to Work with Long Text Data in Frontmatter
Better overview, cleaner to read, nicer formatting, string across multiple lines in Frontmatter, Markdown, Astro
- Post: How do I break a string in YAML over multiple lines?
- Summary: "There are NINE (or 63, depending how you count) different ways to write multi-line strings in YAML."
- By: Steve Bennett & others, 2021 (via Stack Overflow)
Published in July 2023
When starting to write content in Markdown with Frontmatter for this little site powered by Astro framework using Content Collections, I quickly noticed that writing one or two sentences in the Frontmatter section would create ugly long lines which were becoming difficult to work with.
What I didnβt realise at first: Frontmatter essentially is YAML. I had thought it only allows basic keys and values, not more complex YAML data structures too.
So Iβve looked into this and found out that Astro uses Remark for Markdown support and the remark plugin to support Frontmatter:
βThis package is a unified (remark) plugin to add support for YAML, TOML, and other frontmatter.β
The βand otherβ apparently also includes JSON as data format for Frontmatter. But weβre not interested in that for now.
In case you donβt know what any of this is about:
βFrontmatter is a metadata format in front of content. Itβs typically written in YAML and is often used with markdown.β [sic!]
When trying to find out how I could split Frontmatter data across a couple of lines, to make longer titles and summaries easier to read, I found a post on Stack Overflow: How do I break a string in YAML over multiple lines? There are NINE (or 63, depending how you count) different ways to write multi-line strings in YAML.
Thanks to the helpful answer on Stack Overflow, I can now write longer titles like this:
sourceTitle: >
βI want to open a window in their soulsβ:
Haruki Murakami on the power of writing simply
(This example is taken from on of the first posts here.)
The magic here happens with the >. I found this option looks like it should work best for me.
(Prompt for Craiyon to generate the header image: βIllustrate web programming and special text formatting for YAML language in a source code editor.β / Style: Drawing.)