Convert Figma logo to code with AI

evilstreak logomarkdown-js

A Markdown parser for javascript

7,697
863
7,697
104
View on GitHubView on NPM

Top Related Projects

showdownjs's avatar

showdown

14,196

A bidirectional Markdown to HTML to Markdown converter written in Javascript

markedjs's avatar

marked

32,762

A markdown parser and compiler. Built for speed.

markdown-it's avatar

markdown-it

17,917

Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

jonschlinkert's avatar

remarkable

5,735

Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins available. Used by Facebook, Docusaurus and many others! Use https://github.com/breakdance/breakdance for HTML-to-markdown conversion. Use https://github.com/jonschlinkert/markdown-toc to generate a table of contents.

commonmark's avatar

commonmark.js

1,423

CommonMark parser and renderer in JavaScript

Quick Overview

markdown-js is a JavaScript library that provides a Markdown parser and compiler. It allows developers to convert Markdown text into HTML or other formats, and can be used in both browser and Node.js environments.

Pros

  • Cross-platform compatibility (works in browsers and Node.js)
  • Extensible architecture allowing custom syntax and output formats
  • Supports CommonJS, AMD, and browser global variable usage
  • Well-documented API and usage instructions

Cons

  • Not actively maintained (last commit was in 2017)
  • Limited support for newer Markdown extensions and features
  • Performance may not be optimal for large documents
  • Some reported issues with edge cases in Markdown parsing

Code Examples

  1. Basic Markdown to HTML conversion:
var markdown = require( "markdown" ).markdown;
var html = markdown.toHTML("Hello *World*!");
console.log(html); // Output: <p>Hello <em>World</em>!</p>
  1. Using a specific dialect:
var markdown = require( "markdown" ).markdown;
var html = markdown.toHTML("# Title", "Maruku");
console.log(html); // Output: <h1>Title</h1>
  1. Custom tree-to-HTML conversion:
var markdown = require( "markdown" ).markdown;
var tree = markdown.parse("Hello *World*!");
var html = markdown.renderJsonML(markdown.toHTMLTree(tree));
console.log(html); // Output: <p>Hello <em>World</em>!</p>

Getting Started

To use markdown-js in your project, follow these steps:

  1. Install the package using npm:

    npm install markdown

  2. Import and use the library in your JavaScript code:

    var markdown = require( "markdown" ).markdown;

// Convert Markdown to HTML
var html = markdown.toHTML("# Hello\n\nThis is **Markdown**.");
console.log(html);

  3. For browser usage, include the script in your HTML:

    <script src="node_modules/markdown/lib/markdown.js"></script>
<script>
  var html = markdown.toHTML("# Hello\n\nThis is **Markdown**.");
  document.body.innerHTML = html;
</script>

Competitor Comparisons

showdownjs logo

showdown

14,196

A bidirectional Markdown to HTML to Markdown converter written in Javascript

Pros of Showdown

  • More actively maintained with frequent updates and bug fixes
  • Supports a wider range of Markdown extensions and features
  • Better performance and faster parsing of Markdown content

Cons of Showdown

  • Larger file size, which may impact load times for web applications
  • Some users report inconsistencies in parsing certain Markdown syntax
  • Less modular architecture compared to markdown-js

Code Comparison

Showdown:

var converter = new showdown.Converter();
var html = converter.makeHtml('# Hello, Markdown!');

markdown-js:

var markdown = require('markdown').markdown;
var html = markdown.toHTML('# Hello, Markdown!');

Both libraries offer straightforward ways to convert Markdown to HTML, but Showdown provides more configuration options and extensibility. markdown-js has a simpler API but lacks some advanced features found in Showdown.

Overall, Showdown is more feature-rich and actively maintained, making it a better choice for most modern projects. However, markdown-js may be preferable for simpler use cases or projects requiring a smaller footprint.

markedjs logo

marked

32,762

A markdown parser and compiler. Built for speed.

Pros of marked

  • Higher performance and speed in parsing Markdown
  • More actively maintained with frequent updates and bug fixes
  • Better compliance with CommonMark specification

Cons of marked

  • Slightly larger file size
  • Less extensible for custom syntax or plugins
  • May require additional configuration for advanced use cases

Code Comparison

markdown-js:

var markdown = require( "markdown" ).markdown;
console.log(markdown.toHTML("Hello *World*!"));

marked:

var marked = require('marked');
console.log(marked("Hello *World*!"));

Both libraries offer simple APIs for converting Markdown to HTML, but marked generally provides better performance and more up-to-date features. markdown-js has a more straightforward approach but lacks some of the advanced options and optimizations found in marked.

While markdown-js is easier to use out of the box, marked offers more flexibility for customization and handling edge cases. However, this can also make marked slightly more complex to set up for advanced use cases.

Overall, marked is generally recommended for most projects due to its active maintenance, better performance, and wider adoption in the developer community. However, markdown-js may still be suitable for simpler projects or those with specific requirements that align with its feature set.

markdown-it logo

markdown-it

17,917

Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

Pros of markdown-it

  • Higher performance and speed compared to markdown-js
  • More extensive plugin ecosystem and customization options
  • Better maintenance and more frequent updates

Cons of markdown-it

  • Slightly steeper learning curve for advanced customization
  • Larger bundle size, which may impact load times in some applications

Code Comparison

markdown-js:

var markdown = require( "markdown" ).markdown;
console.log(markdown.toHTML("Hello *World*!"));

markdown-it:

var MarkdownIt = require('markdown-it');
var md = new MarkdownIt();
console.log(md.render('Hello *World*!'));

Both libraries aim to convert Markdown to HTML, but markdown-it offers more flexibility and options for customization. The markdown-it example demonstrates the creation of an instance with potential for further configuration, while markdown-js provides a more straightforward, albeit less customizable, approach.

markdown-it's architecture allows for easy extension through plugins, making it more adaptable to specific use cases. However, this flexibility comes at the cost of a slightly more complex API compared to markdown-js's simpler interface.

Overall, markdown-it is generally considered more powerful and up-to-date, but markdown-js may be suitable for simpler projects or those prioritizing a smaller bundle size.

jonschlinkert logo

remarkable

5,735

Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins available. Used by Facebook, Docusaurus and many others! Use https://github.com/breakdance/breakdance for HTML-to-markdown conversion. Use https://github.com/jonschlinkert/markdown-toc to generate a table of contents.

Pros of Remarkable

  • Higher performance and faster parsing speed
  • More extensive feature set, including plugins and customization options
  • Better maintained with more recent updates and active community support

Cons of Remarkable

  • Larger package size, which may impact load times in browser environments
  • Steeper learning curve due to more advanced features and configuration options
  • Some CommonMark compliance issues in certain edge cases

Code Comparison

Remarkable:

var md = new Remarkable();
var result = md.render('# Hello, *world*!');

markdown-js:

var markdown = require("markdown").markdown;
var result = markdown.toHTML('# Hello, *world*!');

Summary

Remarkable offers superior performance and a richer feature set, making it suitable for more complex projects. However, markdown-js provides a simpler API and smaller package size, which may be preferable for basic use cases or projects with strict size constraints. Both libraries effectively convert Markdown to HTML, but Remarkable's active development and extensive customization options give it an edge for most modern applications.

commonmark logo

commonmark.js

1,423

CommonMark parser and renderer in JavaScript

Pros of commonmark.js

  • Implements the CommonMark specification, ensuring consistent and standardized Markdown parsing
  • Actively maintained with regular updates and improvements
  • Provides a robust API with options for customization and extension

Cons of commonmark.js

  • Larger file size compared to markdown-js, which may impact load times in browser environments
  • Stricter adherence to the CommonMark spec may limit flexibility for non-standard Markdown features

Code Comparison

markdown-js:

var markdown = require( "markdown" ).markdown;
console.log(markdown.toHTML("Hello *World*!"));

commonmark.js:

var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse("Hello *World*!");
console.log(writer.render(parsed));

Both libraries achieve similar results, but commonmark.js uses a more modular approach with separate parser and renderer objects. This allows for greater flexibility and customization options in the parsing and rendering process.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

NPM version Build Status Dependency Status

Notice: Unmaintained

This repo is no longer maintained, however there are many alternatives:

markdown-js

Yet another Markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat Markdown to HTML conversion as a single step process. You pass Markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • Producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML
  • Having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)
  • Being easily extensible to add new dialects without having to rewrite the entire parsing mechanics
  • Having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Optionally, install md2html into your path

npm install -g markdown

In the browser

If you want to use from the browser go to the releases page on GitHub and download the version you want (minified or not).

Usage

The basic interface is:

md_content = "Hello.\n\n* This is markdown.\n* It is fun\n* Love it or leave it."
html_content = markdown.toHTML( md_content );

toHTML also accepts a dialect argument:

md_content = "Vessel     | Captain\n-----------|-------------\nNCC-1701   | James T Kirk\nNCC-1701 A | James T Kirk\nNCC-1701 D | Picard";
html_content = markdown.toHTML( md_content, 'Maruku');

Node

The simple way to use it with Node is:

var markdown = require( "markdown" ).markdown;
console.log( markdown.toHTML( "Hello *World*!" ) );

ES6

import {markdown} from 'markdown';
console.log( markdown.toHTML( "Hello *World*!" ) );

Older versions of node

We only officially support node >= 0.10 as the libraries we use for building and testing don't work on older versions of node. That said since this module is so simple and doesn't use any parts of the node API if you use the pre-built version and find a bug let us know and we'll try and fix it.

Browser

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
  <body>
    <textarea id="text-input" oninput="this.editor.update()"
              rows="6" cols="60">Type **Markdown** here.</textarea>
    <div id="preview"> </div>
    <script src="lib/markdown.js"></script>
    <script>
      function Editor(input, preview) {
        this.update = function () {
          preview.innerHTML = markdown.toHTML(input.value);
        };
        input.editor = this;
        this.update();
      }
      var $ = function (id) { return document.getElementById(id); };
      new Editor($("text-input"), $("preview"));
    </script>
  </body>
</html>

Command Line

Assuming you've installed the md2html script (see Installation, above), you can convert Markdown to HTML:

# read from a file
md2html /path/to/doc.md > /path/to/doc.html

# or from stdin
echo 'Hello *World*!' | md2html

More Options

If you want more control check out the documentation in the .js files under src/ which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

Meanwhile, here's an example of using the multi-step processing to make wiki-style linking work by filling in missing link references:

var md = require( "markdown" ).markdown,
    text = "[Markdown] is a simple text-based [markup language]\n" +
           "created by [John Gruber]\n\n" +
           "[John Gruber]: http://daringfireball.net";

// parse the markdown into a tree and grab the link references
var tree = md.parse( text ),
    refs = tree[ 1 ].references;

// iterate through the tree finding link references
( function find_link_refs( jsonml ) {
  if ( jsonml[ 0 ] === "link_ref" ) {
    var ref = jsonml[ 1 ].ref;

    // if there's no reference, define a wiki link
    if ( !refs[ ref ] ) {
      refs[ ref ] = {
        href: "http://en.wikipedia.org/wiki/" + ref.replace(/\s+/, "_" )
      };
    }
  }
  else if ( Array.isArray( jsonml[ 1 ] ) ) {
    jsonml[ 1 ].forEach( find_link_refs );
  }
  else if ( Array.isArray( jsonml[ 2 ] ) ) {
    jsonml[ 2 ].forEach( find_link_refs );
  }
} )( tree );

// convert the tree into html
var html = md.renderJsonML( md.toHTMLTree( tree ) );
console.log( html );

Intermediate Representation

Internally the process to convert a chunk of Markdown into a chunk of HTML has three steps:

  1. Parse the Markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.
  2. Convert the Markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.
  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Building and Testing markdown-js

We use Grunt to build and run markdown-js's tests. Make sure you run npm install to install the developer dependencies for the project, then you can:

$ npm test

To run our test suite. If you'd like to build markdown-js, you can run:

$ ./node_modules/.bin/grunt all

This command will run all the tests, then output a concatenated markdown.js and markdown.min.js in the dist/ directory for use in a browser application.

Building a custom markdown-js

By default, you will get the Gruber and Maruku dialects included when you run grunt all. However, you can create a custom build using the following syntax if you don't want to include Maruku support.

$ ./node_modules/.bin/grunt "custom:-dialects/maruku"

Running Tests

To run the tests under Node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ npm test

Contributing

Do the usual GitHub fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

License

Released under the MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

NPM DownloadsLast 30 Days