How do you extend the markdown-it parser?

[tavin]

The README for the markdown plugin says:

You can extend the parser by loading additional markdown-it plugins this way:

var plugin1 = require(...);
var plugin2 = require(...);

var md = $tw.Wiki.parsers["text/markdown"].prototype.md;

md.use(plugin1)
  .use(plugin2, opts, ...);

I guess this assumes general knowledge of how tiddlywiki works (links?).

Where do you place this code? Does it run in nodejs or the browser? What does the require() argument look like actually?

[oeyoews]

@tavin https://github.com/oeyoews/neotw/blob/6ee7759d2a17b0582d7c26c7f1e85eeda14c1235/plugins/oeyoews/markdown/wrapper.js#L126 In order to make it easier, I directly modify the wrapper.js file

[Jermolene]

Hi @tavin I think that the present situation is that adding a Markdown-it plugin requires knowledge of JavaScript in TiddlyWiki. That is not ideal, and I'd welcome improvements in that area. In the meantime, if you have a requirement for a specific plugin do let us know.

[oeyoews]

Hi @tavin I think that the present situation is that adding a Markdown-it plugin requires knowledge of JavaScript in TiddlyWiki. That is not ideal, and I'd welcome improvements in that area. In the meantime, if you have a requirement for a specific plugin do let us know.您好，我认为目前的情况是添加 Markdown-it 插件需要 TiddlyWiki 中的 JavaScript 知识。这并不理想，我欢迎在该领域进行改进。同时，如果您对特定插件有要求，请告诉我们。

I tried the code below, but I ran into some problems, mainly a problem of loading or rendering order; Here is a related discussion in the community @Jermolene

/*\
title: $:/plugins/oeyoews/neotw-markdown-extensions/extensions.js
type: application/javascript
module-type: startup

Extension markdown-it

\*/
(function () {
  /*jslint node: true, browser: true */
  /*global $tw: false */
  "use strict";

  function LoadExtensions() {
    const md = $tw.Wiki.parsers["text/markdown"].prototype.md;
    const emoji = require("./markdown-it-emoji");
    const toc = require("./markdown-it-toc");
    const task = require("./markdown-it-task");
    md.use(emoji).use(toc).use(task);
  }

  exports.name = "markdown-extension-startup-hook";
  exports.platforms = ["browser"];
  exports.after = ["load-modules"];
  exports.synchronous = true;
  exports.startup = LoadExtensions;
})();

[linonetwo]

Isn't adding markdown-it plugin like adding codemirror plugin, which will requires JS knowledge, and be packaged into a sub-plugin so user can just click to install?

[pmario]

I did some experiments. The following code worked for me. I did call my startup function init.js for testing

/*\
title: $:/plugins/wikilabs/markdown-it/markdown-it-toc/init.js
type: application/javascript
module-type: startup

\*/

/*jslint node: true, browser: true */
/*global $tw: false, exports: true */
"use strict";

// Export name and synchronous status
exports.after = ["startup"];                        // <--------------- this seems to be the only difference to your code
exports.synchronous = true;

exports.startup = function() {
	var plugin1 = require("$:/plugins/wikilabs/markdown-it/markdown-it-toc.js");   // <---- this may be a problem too

	var md = $tw.Wiki.parsers["text/markdown"].prototype.md;

	md.use(plugin1);
};

[pmario]

BUT ... The TOC will not work with TW. .. It does render the right code, but TW will catch the anchor elements and open tiddlers with the anchor name. ... So there would be more work needed.

[oeyoews]

I did make a few changes to the toc plugin to accommodate tiddlywiki; so far it works fine;(Except that the container plugin uses the tailwindcss style, other markdown extensions should be well compatible with tiddlywiki. Currently, there are five markdown extensions: toc, emoji abbr container task) https://neotw.oeyoewl.top/#%24%3A%2Fplugins%2Foeyoews%2Fneotw-markdown-extensions

[linonetwo]

This looks convenient, I can just call $tw.Wiki.parsers["text/markdown"].prototype.md in WYSIWYG editor to get mdast

[oeyoews]

The plug-in extension of codemirror has a module-type=codemirror field, which makes the extension look very convenient, and markdown should also be able to do it

[oeyoews]

codemirror seems to work only through widgets

/*\
title: $:/plugins/tiddlywiki/codemirror/edit-codemirror.js
type: application/javascript
module-type: widget

Edit-codemirror widget

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

var editTextWidgetFactory = require("$:/core/modules/editor/factory.js").editTextWidgetFactory,
	CodeMirrorEngine = require("$:/plugins/tiddlywiki/codemirror/engine.js").CodeMirrorEngine;

exports["edit-codemirror"] = editTextWidgetFactory(CodeMirrorEngine,CodeMirrorEngine);

})();