❤
npm
Sign UpSign In

funkydown

0.0.4 • Public • Published

FunkyDown

Javascript Markdown converter/editor optimized for laziness

FunkyDown.js is a front-end Javascript tool for easily displaying your Markdown as HTML.

Specify an input and an output. That's it.

funkyDown({
    input: document.getElementById('myTextarea'),
    output: document.getElementById('myDisplayDiv')
});

This library is built upon Showdown.js. Many thanks go out to it's creators.

How to Use

Options

input

Required parameter.

Can be any of the following:

  • String
  • DOM Element
  • Function that returns a string

output

Required parameter.

Can be any of the following:

  • DOM Element
  • Function that recieves the converted HTML as its only parameter

Methods

load( options )

This method re-renders the markdown and sends the HTML to your output.

You may pass the optional input and output options object as the method's only parameter.

options( options )

This method allows you to update the input and output values you specified when creating a funkyDown object.

Examples

Need your output to stay up to date with the input?

var myTextarea = document.getElementById('myTextarea');
var outputter = funkyDown({
    input: myTextarea,
    output: document.getElementById('myDisplayDiv')
});
 
myTextarea.addEventListener("keyup", function(){
    outputter.load();
});

Want to change the input or output?

var outputter = funkyDown({
    input: document.getElementById('myTextarea'),
    output: document.getElementById('myDisplayDiv')
});
 
// The options method changes input, output, or both
outputter.options({
    input: "# This is a markdown string",
    output: document.getElementById('myOtherDisplayDiv')
});
outputter.load();
 
// New input/output can be specified witht he load method as well
outputter.load({
    input: "# This is a markdown string",
    output: document.getElementById('myOtherDisplayDiv')
});

Feeling funky? Input/output can also be funtions

var outputter = funkyDown({
    input: function(){
        if( youFeelTheFunk ){
            return document.getElementById('myFunkyTextArea').value;
        }else{
            return "Not enough funk.";
        }
    },
    output: function( html ){
        document.getElementById('myDisplayDiv').innerHTML = "This HTML rendered using funkyDown.js: " + html;
    }
});

Won't you take me to FunkyDown?

Readme

Keywords

Package Sidebar

Install

npm i funkydown

Repository

github.com/traviswimer/funkyDown.js

Homepage

github.com/traviswimer/funkyDown.js

Weekly Downloads

6

Version

0.0.4

License

MIT

Last publish

Collaborators

  • traviswimer
Try on RunKit
Report malware