Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
gray-matter
Smarter YAML front matter parser, used by metalsmith, Gatsby, Netlify, Assemble, mapbox-gl, phenomic, vuejs vitepress, TinaCMS, Shopify Polaris, Ant Design, Astro, hashicorp, garden, slidev, saber, sourcegraph, and many others. Simple to use, and battle tested. Parses YAML by default but can also parse JSON Front Matter, Coffee Front Matter, TOML Front Matter, and has support for custom parsers. Please follow gray-matter's author: https://github.com/jonschlinkert
This week I want to add a new feature to my text to HTML converter, go-go-web. The feature I plan to add is Markdown Front Matter support. When a user converts an .md file to .html using my program, my program would be able to convert Front Matter in the .md file into metadata tag content in the resulting .html file.
Front matter is a bit of text at the start of a file (YAML to be exact) that is placed between two ---
I know that Docusaurus supports Markdown front matter, and that its license allows for the code to be used and copied. Thus, I decided to use GitHub Code Search in its repo to find out how it is parsing the Markdown front matter.
It turns out that Docusaurus uses an open source JavaScript parser called gray-matter to parse the front matter from markdown files! After installing gray-matter using npm and them importing it into the markdownUtils.ts file, all it takes is calling the matter method and passing the markdown file contents to get returned an Object with data and content (the data being the front matter and the content being the rest of the markdown file contents).