more-markdown / code-controls
A plugin that can add HTML code for code envirnoments (e.g. Debug buttons).
Installation
npm install @more-markdown/code-controls
Usage
Currently this plugin supports two controls. A play
button and a debug
button.
The class of the button specifies which method is run. This package returns a
function that takes the fenced code language tag. Two functions run and debug
and a function that generates the HTML. The element is found via the data-element-id
attribute. This plugin searches for the play and debug button in this
element only.
var moreMarkdown = require('more-markdown');
var codeControls = require('@more-markdown/code-controls');
var _ = require('lodash');
// create a processor that writes the final html
// to the element with the id 'output'
var proc = moreMarkdown.create('output', processors: [
codeControls("js", {
run: eval,
debug: eval
}, _.template("<div data-element-id=\"<%= id %>\">"+
"<button class='play'>Run</button>" +
"<button class='debug'>Debug</button>" +
"</div>"
"<%= html %>"))
]);
proc.render("```js"+
'console.log("print this")'
"```");