{"id":18997691,"url":"https://github.com/s0/remark-code-frontmatter","last_synced_at":"2025-04-22T14:24:21.358Z","repository":{"id":47228338,"uuid":"195160248","full_name":"s0/remark-code-frontmatter","owner":"s0","description":"Extract frontmatter from markdown code blocks using remark, and do interesting things!","archived":false,"fork":false,"pushed_at":"2022-12-04T01:50:28.000Z","size":568,"stargazers_count":12,"open_issues_count":11,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-11T07:23:57.847Z","etag":null,"topics":["remark","remark-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-04T03:07:09.000Z","updated_at":"2025-02-20T22:57:08.000Z","dependencies_parsed_at":"2023-01-22T20:45:31.138Z","dependency_job_id":null,"html_url":"https://github.com/s0/remark-code-frontmatter","commit_stats":null,"previous_names":["samlanning/remark-code-frontmatter"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-code-frontmatter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-code-frontmatter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-code-frontmatter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-code-frontmatter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s0","download_url":"https://codeload.github.com/s0/remark-code-frontmatter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248782272,"owners_count":21160717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["remark","remark-plugin"],"created_at":"2024-11-08T17:42:11.337Z","updated_at":"2025-04-16T20:31:36.012Z","avatar_url":"https://github.com/s0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# remark-code-frontmatter\n\n[![Build Status](https://dev.azure.com/samlanning/general/_apis/build/status/remark-code-frontmatter?branchName=master)](https://dev.azure.com/samlanning/general/_build/latest?definitionId=8\u0026branchName=master) [![Total alerts](https://img.shields.io/lgtm/alerts/g/samlanning/remark-code-frontmatter.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/samlanning/remark-code-frontmatter/alerts/) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/samlanning/remark-code-frontmatter.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/samlanning/remark-code-frontmatter/context:javascript) [![](https://img.shields.io/npm/v/remark-code-frontmatter.svg)](https://www.npmjs.com/package/remark-code-frontmatter)\n\nExtract frontmatter from markdown code blocks using [remark][] and [front-matter][], and do interesting things!\n\nFor example:\n\n* Add properties that add indentation to your code\n* Add properties that indicate how the given code should wrap\n* Add properties that specify links that should be attached to the HTML output of your code\n* Add properties that specify which sort of syntx highlighting should be used\n* Add properties that specify other ways in which HTML output should be manipulated\n\n... The possibilities are endless!\n\nThis plugin is compatible with most [remark][] syntax highlighting plugins,\nincluding [`remark-midas`](https://github.com/remarkjs/remark-midas),\n[`remark-tree-sitter`](https://github.com/samlanning/tree-sitter) and\n[`remark-highlight.js`](https://github.com/remarkjs/remark-highlight.js).\nJust make sure that you use this plugin *before* the highlighting plugins.\n\nYou can also use this plugin with\n[`remark-code-extra`](https://github.com/samlanning/remark-code-extra)\nto use frontmatter data in additional HTML output for your code blocks.\n\n## Install\n\n[npm][]:\n\n```sh\nnpm install remark-code-frontmatter\n```\n\n## Use\n\nAn additional field `frontmatter` is added to all code MDAST nodes for later use.\n\nSay we have the following Markdown file, `example.md`:\n\n````markdown\n```c\n---\nwrap: c-main\n---\nprintf(\"Hello, World!\");\nreturn 0;\n```\n\n```c\n// Some other code\n```\n````\n\nAnd our script, `example.js`, looks as follows:\n\n```js\nconst vfile = require('to-vfile')\nconst report = require('vfile-reporter')\nconst unified = require('unified')\nconst visit = require('unist-util-visit');\nconst markdown = require('remark-parse')\nconst html = require('remark-html')\nconst codeFrontmatter = require('remark-code-frontmatter');\n\n// Wrap code in boilerplate where neccesary\nconst transformer = tree =\u003e {\n  visit(tree, 'code', node =\u003e {\n    if (node.frontmatter.wrap === 'c-main') {\n      node.value = [\n        '#include\u003cstdio.h\u003e',\n        'int main()',\n        '{',\n        // indent\n        ...node.value.split('\\n').map(line =\u003e '  ' + line),\n        `}`,\n      ].join('\\n');\n    }\n  });\n  return tree;\n};\n\nunified()\n  .use(markdown)\n  .use(codeFrontmatter)\n  .use(() =\u003e transformer)\n  .use(html)\n  .process(vfile.readSync('example.md'), (err, file) =\u003e {\n    console.error(report(err || file))\n    console.log(String(file))\n  })\n```\n\nNow, running `node example` yields:\n\n```html\nexample.md: no issues found\n\u003cpre\u003e\u003ccode class=\"language-c\"\u003e#include\u0026#x3C;stdio.h\u003e\nint main()\n{\n  printf(\"Hello, World!\");\n  return 0;\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cpre\u003e\u003ccode class=\"language-c\"\u003e// Some other code\n\u003c/code\u003e\u003c/pre\u003e\n```\n\n### Use with code highlighters\n\nThis plugin is compatible with most [remark][] syntax highlighting plugins,\nincluding [`remark-midas`](https://github.com/remarkjs/remark-midas),\n[`remark-tree-sitter`](https://github.com/samlanning/tree-sitter) and\n[`remark-highlight.js`](https://github.com/remarkjs/remark-highlight.js).\nJust make sure that you use this plugin *before* the highlighting plugins.\n\n**Example:**\n\n```js\nunified()\n  .use(markdown)\n  .use(codeFrontmatter)\n  .use(highlight) // comes AFTER codeFrontmatter, could be other highlighting plugins\n  // Other plugins\n  .use(html)\n```\n\n### Use with [`remark-code-extra`](https://github.com/samlanning/remark-code-extra)\n\nYou can access the markdown from within the transform function that you pass to the [options for that plugin](https://github.com/samlanning/remark-code-extra#optionstransform).\n\nFor example, if you had the following markdown:\n\n````markdown\n```\n---\nbefore: Some header text\n---\nCode block with a header\n```\n\n```\n---\nafter: Some footer text\n---\nCode block with a footer\n```\n\n```\n---\nbefore: Some header text\nafter: Some footer text\n---\nCode block with a header and footer\n```\n\n```\nCode block with no header or footer\n```\n````\n\nAnd the following unified processor:\n\n```js\n// other imports\nconst codeFrontmatter = require('remark-code-frontmatter');\nconst codeExtra = require('remark-code-extra');\n\nconst processor = remark()\n  .use(codeFrontmatter)\n  .use(codeExtra, {\n    transform: node =\u003e node.frontmatter.before || node.frontmatter.after ? {\n      before: node.frontmatter.before \u0026\u0026 [{\n        type: 'text',\n        value: node.frontmatter.before\n      }],\n      after: node.frontmatter.after \u0026\u0026 [{\n        type: 'text',\n        value: node.frontmatter.after\n      }]\n    } : null\n  })\n  .use(html);\n```\n\nThen this would output the following HTML:\n\n```html\n\u003cdiv class=\"code-extra\"\u003eSome header text\u003cpre\u003e\u003ccode\u003eCode block with a header\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003cdiv class=\"code-extra\"\u003e\u003cpre\u003e\u003ccode\u003eCode block with a footer\u003c/code\u003e\u003c/pre\u003eSome footer text\u003c/div\u003e\n\u003cdiv class=\"code-extra\"\u003eSome header text\u003cpre\u003e\u003ccode\u003eCode block with a header and footer\u003c/code\u003e\u003c/pre\u003eSome footer text\u003c/div\u003e\n\u003cpre\u003e\u003ccode\u003eCode block with no header or footer\n\u003c/code\u003e\u003c/pre\u003e\n```\n\n\n## API\n\n### `remark().use(codeFrontmatter)`\n\nExtract frontmatter from markdown code blocks using [front-matter][].\n\n## Related\n\n*   [`remark-midas`](https://github.com/remarkjs/remark-midas)\n    — Highlight CSS code blocks with midas (rehype compatible)\n*   [`remark-tree-sitter`](https://github.com/samlanning/remark-tree-sitter)\n    — Highlight code with tree-sitter (rehype compatible)\n*   [`remark-highlight.js`](https://github.com/remarkjs/remark-highlight.js)\n    — Highlight code with highlight.js (via lowlight)\n*   [`remark-code-extra`](https://github.com/samlanning/remark-code-extra)\n    — Add to or transform the HTML output of code blocks (rehype compatible)\n\n\u003c!-- Definitions --\u003e\n\n[front-matter]: https://github.com/jxson/front-matter\n\n[npm]: https://docs.npmjs.com/cli/install\n\n[remark]: https://github.com/remarkjs/remark","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0%2Fremark-code-frontmatter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs0%2Fremark-code-frontmatter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0%2Fremark-code-frontmatter/lists"}