@fullstackio/remark-cq

remark-cq

remark plug-in to import code in markdown using cq

Supports exporting remark-attr-compatable metadata with code blocks.

Installation

npm:

npm install @fullstackio/remark-cq

Usage

For example:

var remark = require("remark");
var cq = require("@fullstackio/remark-cq");
const unified = require("unified");
const reParse = require("remark-parse");
const stringify = require("rehype-stringify");
const remark2rehype = require("remark-rehype");
const remarkStringify = require("remark-stringify");

const render = (text, config) =>
    unified()
        .use(reParse)
        .use(cq, config)
        .use(remark2rehype)
        .use(stringify)
        .process(text);

const markup = `
The code:

{lang=javascript,crop-query=.dogs}  
<<[](test.js)`;

const html = (await render(markup, { root: __dirname })).contents;

console.log(html);

Given a file test.js containing:

// test.js
var a = 1;
const dogs = () => "Like snuggles";
var b = 2;

Yields:

<p>The code:</p>
<pre><code class="language-javascript">const dogs = () => "Like snuggles";
</code></pre>

Similarly, you can render to markdown like this:

const renderMarkdown = (text, config) =>
    unified()
        .use(reParse)
        .use(remarkStringify)
        .use(cq, config)
        .process(text);

and then above example would render into:

The code:

```javascript
const dogs = () => "Like snuggles";
```

API

remark.use(cq, options)

Options

• root: path to look for relative files
• undent: undent the code (default true)
• the rest are passed to cq

Use with Docusaurus

remark-cq can be used with Docusaurus easily. Just add the following to your docusaurus.config.js:

  remarkPlugins: [require("@fullstackio/remark-cq")]

For example, if you're using @docusaurus/preset-classic

presets: [
    "@docusaurus/preset-classic",
    {
       docs: { 
           remarkPlugins: [require("@fullstackio/remark-cq")]
       }
    }
]

License

MIT © Nate Murray