Skip to content

Latest commit

 

History

History
163 lines (122 loc) · 3.56 KB

USING_PRO.md

File metadata and controls

163 lines (122 loc) · 3.56 KB
Raw

Extending Marked

To champion the single-responsibility and open/closed principles, we have tried to make it relatively painless to extend marked. If you are looking to add custom functionality, this is the place to start.

The renderer

The renderer is...

Example: Overriding default heading token by adding an embedded anchor tag like on GitHub.

// Create reference instance
const marked = require('marked');

// Get reference
const renderer = new marked.Renderer();

// Override function
renderer.heading = function (text, level) {
  const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');

  return `
          <h${level}>
            <a name="${escapedText}" class="anchor" href="#${escapedText}">
              <span class="header-link"></span>
            </a>
            ${text}
          </h${level}>`;
};

// Run marked
console.log(marked('# heading+', { renderer: renderer }));

Output:

<h1>
  <a name="heading-" class="anchor" href="#heading-">
    <span class="header-link"></span>
  </a>
  heading+
</h1>

Block level renderer methods

  • code(string code, string infostring, boolean escaped)
  • blockquote(string quote)
  • html(string html)
  • heading(string text, number level, string raw, Slugger slugger)
  • hr()
  • list(string body, boolean ordered, number start)
  • listitem(string text, boolean task, boolean checked)
  • checkbox(boolean checked)
  • paragraph(string text)
  • table(string header, string body)
  • tablerow(string content)
  • tablecell(string content, object flags)

slugger has the slug method to create an unique id from value:

slugger.slug('foo')   // foo
slugger.slug('foo')   // foo-1
slugger.slug('foo')   // foo-2
slugger.slug('foo 1') // foo-1-1
slugger.slug('foo-1') // foo-1-2
...

flags has the following properties:

{
    header: true || false,
    align: 'center' || 'left' || 'right'
}

Inline level renderer methods

  • strong(string text)
  • em(string text)
  • codespan(string code)
  • br()
  • del(string text)
  • link(string href, string title, string text)
  • image(string href, string title, string text)
  • text(string text)

The lexer

The lexer is...

The parser

The parser is...

Access to lexer and parser

You also have direct access to the lexer and parser if you so desire.

const tokens = marked.lexer(text, options);
console.log(marked.parser(tokens));
const lexer = new marked.Lexer(options);
const tokens = lexer.lex(text);
console.log(tokens);
console.log(lexer.rules);
$ node
> require('marked').lexer('> i am using marked.')
[ { type: 'blockquote_start' },
  { type: 'paragraph',
    text: 'i am using marked.' },
  { type: 'blockquote_end' },
  links: {} ]

The Lexers build an array of tokens, which will be passed to their respective Parsers. The Parsers process each token in the token arrays, which are removed from the array of tokens:

const marked = require('marked');

const md = `
  # heading

  [link][1]

  [1]: #heading "heading"
`;

const tokens = marked.lexer(md);
console.log(tokens);

const html = marked.parser(tokens);
console.log(html);

console.log(tokens);
[ { type: 'heading', depth: 1, text: 'heading' },
  { type: 'paragraph', text: '  [link][1]' },
  { type: 'space' },
  links: { '1': { href: '#heading', title: 'heading' } } ]

<h1 id="heading">heading</h1>
<p>  <a href="#heading" title="heading">link</a></p>

[ links: { '1': { href: '#heading', title: 'heading' } } ]