remark-code-frontmatter
Extract frontmatter from markdown code blocks using remark and front-matter, and do interesting things!
For example:
- Add properties that add indentation to your code
- Add properties that indicate how the given code should wrap
- Add properties that specify links that should be attached to the HTML output of your code
- Add properties that specify which sort of syntx highlighting should be used
- Add properties that specify other ways in which HTML output should be manipulated
... The possibilities are endless!
This plugin is compatible with most remark syntax highlighting plugins,
including remark-midas
,
remark-tree-sitter
and
remark-highlight.js
.
Just make sure that you use this plugin before the highlighting plugins.
You can also use this plugin with
remark-code-extra
to use frontmatter data in additional HTML output for your code blocks.
Install
npm:
npm install remark-code-frontmatter
Use
An additional field frontmatter
is added to all code MDAST nodes for later use.
Say we have the following Markdown file, example.md
:
```c---wrap: c-main---return 0;``` ```c// Some other code ```
And our script, example.js
, looks as follows:
const vfile = const report = const unified = const visit = ;const markdown = const html = const codeFrontmatter = ; // Wrap code in boilerplate where neccesaryconst transformer = { ; return tree;};
Now, running node example
yields:
example.md: no issues found#include<stdio.h>int main(){ printf("Hello, World!"); return 0;}// Some other code
Use with code highlighters
This plugin is compatible with most remark syntax highlighting plugins,
including remark-midas
,
remark-tree-sitter
and
remark-highlight.js
.
Just make sure that you use this plugin before the highlighting plugins.
Example:
// comes AFTER codeFrontmatter, could be other highlighting plugins // Other plugins
remark-code-extra
Use with You can access the markdown from within the transform function that you pass to the options for that plugin.
For example, if you had the following markdown:
```---before: Some header text---Code block with a header``` ```---after: Some footer text---Code block with a footer``` ```---before: Some header textafter: Some footer text---Code block with a header and footer``` ```Code block with no header or footer```
And the following unified processor:
// other importsconst codeFrontmatter = ;const codeExtra = ; const processor = ;
Then this would output the following HTML:
Some header textCode block with a headerCode block with a footerSome footer textSome header textCode block with a header and footerSome footer textCode block with no header or footer
API
remark().use(codeFrontmatter)
Extract frontmatter from markdown code blocks using front-matter.
Related
remark-midas
— Highlight CSS code blocks with midas (rehype compatible)remark-tree-sitter
— Highlight code with tree-sitter (rehype compatible)remark-highlight.js
— Highlight code with highlight.js (via lowlight)remark-code-extra
— Add to or transform the HTML output of code blocks (rehype compatible)