![](\"https://raw.githubusercontent.com/frencojobs/fenceparser/main/.github/cover.png\")
\n\nA tiny, well-tested parser for parsing metadata out of fenced code blocks in Markdown.
\n\n\n\n## Overview ・
![\"npm](\"https://img.shields.io/bundlephobia/minzip/fenceparser?color=success&label=size\")
![\"Codecov\"](\"https://img.shields.io/codecov/c/github/frencojobs/fenceparser?color=important\")
\n\nAssuming you have this code fence in your Markdown,\n\n\n````md\n ```ts twoslash {1-3, 5} title=\"Hello, World\"\n````\n\n\nUsing [remark](https://github.com/remarkjs/remark) will yield two information about that code block, `lang` and `meta` like this.\n\n```json\n{\n \"lang\": \"ts\",\n \"meta\": \"twoslash {1-3, 5} title=\\\"Hello, World\\\"\"\n}\n```\n\nUse `fenceparser` to parse the `meta` string out to a useful object.\n\n```js\nimport parse from 'fenceparser'\n\nconsole.log(parse(meta))\n\n// {\n// twoslash: true,\n// highlight: { '1-3': true, '5': true },\n// title: 'Hello, World'\n// }\n```\n\n> The parser won't intentionally handle parsing the language part since it is usually handled by the Markdown parsers.\n\nBut if you want to allow loose syntax grammars such as `ts{1-3, 5}` as well as `ts {1-3, 5}` which is used by [gatsby-remark-vscode](https://github.com/andrewbranch/gatsby-remark-vscode) as an example, remark won't parse the language correctly.\n\n\n```json5\n{\n \"lang\": \"ts{1-3,\", // because remark uses space to split\n \"meta\": \"5}\"\n}\n```\n\n\nIn these cases, you can use the the library's `lex` function to get a properly tokenized array. You may then take out the first element as `lang`. For example,\n\n```js\nimport {lex, parse} from 'fenceparser'\n// Notice this ^ parse is not the same the default export function\n\nconst full = [node.lang, node.meta].join(' ') // Join them back\n\nconst tokens = lex(full)\nconst lang = tokens.shift() // ts\nconst meta = parse(tokens) // { highlight: {'1-3': true, '5': true} }\n```\n\n## Syntax\n\nThe syntax grammar is loosely based on techniques used by various syntax-highlighters. Rules are such that\n\n- Valid HTML attributes can be used, `attribute`, `data-attribute`, etc.\n- Just like in HTML, top-level attribute names are case insensitive.\n- Attributes without values are assigned as `true`\n- Attribute values can be single or double quoted strings, int/float numbers, booleans, objects or arrays\n- Non-quoted strings are valid as long as they are not separated by a whitespace or a line-break, `attr=--theme-color`\n- Objects can accept valid attributes as children, or valid attributes with value assigned by `:` keyword, `{1-3, 5, ids: {7}}`\n- Arrays are just like JavaScript's arrays\n- Objects without attribute keys `{1-3} {7}` are merged and assigned to the `highlight` object\n- No trailing commas\n\n## Acknowledgements\n\n1. This project is made initially to use with [Twoslash](https://github.com/shikijs/twoslash).\n2. The initial implementations of lexer and parser are based on the examples from the book [Crafting Interpreters](http://craftinginterpreters.com).\n","readmeFilename":"README.md","description":"A well-tested parser for parsing metadata out of fenced code blocks in Markdown","keywords":["markdown"]}