jstransformers / jstransformer-markdown-it

Markdown-It support for JSTransformers.

Home Page:http://npmjs.com/jstransformer-markdown-it

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to setup markdown-it ?

Denis535 opened this issue · comments

commented

When I create markdown-it myself I can setup:

var md = require('markdown-it')()
            .use(plugin1)
            .use(plugin2, opts, ...)
            .use(plugin3);

Or:

var hljs = require('highlight.js') // https://highlightjs.org/

// Actual default values
var md = require('markdown-it')({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }

    try {
      return hljs.highlightAuto(str).value;
    } catch (__) {}

    return ''; // use external default escaping
  }
});

But when I use your jstransformer-markdown-it I can't create markdown-it myself. And I can't get reference on markdown-it. So, I can't setup it.

You can do highlight very simply as:

markdownitTransformer.render('My markdown', {
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }

    try {
      return hljs.highlightAuto(str).value;
    } catch (__) {}

    return ''; // use external default escaping
  }
});

If you're using it as part of a jade template, you probably want to pass the highlight function in as a local.

For plugins, we accept an array of either plugins or strings, so you can pass in strings for plugins installed via npm and you can pass in the result of requireing your own custom plugins. If you're using jade, the easiest thing will be to pass your custom plugins in as a local.

You can also configure a custom filter for jade if you want ultimate control:

var md = require('markdown-it')()
            .use(plugin1)
            .use(plugin2, opts, ...)
            .use(plugin3);
jade.fitlers.md = function (str, options) {
  return md.render(str);
};

If you have suggestions for how we could improve the API of this particular jstransformer, we'd love to hear them.

commented

Okey. I wrote:

    data.markdownItOptions = {
        highlight: highlight,
        plugins: []
    };

In jade I try to use it:

include:markdown-it(=markdownItOptions) ./articles/1.md

But I get error: Cannot read property 'length' of undefined.
What's wrong?

At all I understand your idia. You create new instance and setup it for each markdown-it filter to allow as use different settings for each markdown-it filter. It's good. But I'd have done differently.
I guss would be better to setup default markdown-it before jade render. And if I need a few markdown-it with different settings, I would be able to pass required instance of markdown-it. For example:
include:markdown-it(=postMarkdownIt) ./articles/1.md
include:markdown-it(=postPreviewMarkdownIt) ./articles/1-preview.md

Currently jade/pug require you to specify each options individually, so you would do:

data.md = {
  highlight: highlight,
  plugins: []
};

then in your template:

include:markdown-it(highlight=md.highlight plugins=md.plugins) ./articles/1.md

As I said though, if you want more fine grained control, or to avoid duplicating options all over the place, just add a custom filter. I've added custom filters to most of the projects I use jade/pug on (including jade's documentation).

commented

Not good. I hope in next versions jade will support passing options without specifying each option.
But now, unfortunately, I even can't use filter because of pugjs/pug#404