remark-code-extra

   

Add to or transform the HTML output of markdown code blocks using [remark][].

For example, you can add dedicated links to code snippets that copy the code, or link to a live demo etc...

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 after the highlighting plugins.

Install

[npm][]:

``sh
npm install remark-code-extra
`

Use

Say we have the following Markdown file, example.md:

`markdown
We'll transform this one:

~~~java https://stackoverflow.com/questions/4042434/converting-arrayliststring-to-string-in-java
List list = ..;
String[] array = list.toArray(new String[0]);
~~~

But leave this the same:

~~~java
List list = ..;
String[] array = list.toArray(new String[0]);
~~~
`

And our script, example.js, looks as follows:

`js
const vfile = require('to-vfile')
const report = require('vfile-reporter')
const unified = require('unified')
const markdown = require('remark-parse')
const html = require('remark-html')
const highlight = require('remark-highlight.js')
const codeExtra = require('remark-code-extra');

unified()
.use(markdown)
.use(highlight)
.use(codeExtra, {
// Add a link to stackoverflow if there is one in the meta
transform: node => node.meta ? ({
after: [
{
type: 'element',
tagName: 'a',
properties: {
href: node.meta
},
children: [{
type: 'text',
value: 'View on Stack Overflow'
}]
}
]
}) : null
})
.use(html)
.process(vfile.readSync('example.md'), (err, file) => {
console.error(report(err || file))
console.log(String(file))
})
`

Now, running node example yields:

`html


We'll transform this one:

List<String> list = ..;
String[] array = list.toArray(new String[0]);

List<String> list = ..;
String[] array = list.toArray(new String[0]);

`

Notice how the first codeblock is now wrapped in a

Code block with a header

Code block with a footer

Code block with a header and footer

Code block with no header or footer