Gatsby: [1.0] how to use remark plugins

[Ognian]

Hello,
I'm using 1.0.0-alpha12 and trying to enrich the remark parser with the remark-bracketed-spans plugin (https://github.com/sethvincent/remark-bracketed-spans).
I thought that writing a plugin like gatsby-typegen-remark-smartypants will do the trick, but actually it doesn't work

"use strict";

var remark = require(`remark`);
var visit = require(`unist-util-visit`);
var bracketedSpans = require(`remark-bracketed-spans`);

module.exports = function (_ref) {
  var markdownAST = _ref.markdownAST;

  visit(markdownAST, `text`, function (node) {
    var processedText = String(remark().use(bracketedSpans).process(node.value));
    node.value = processedText;
  });
};

Looks like there should be another helper instead of visitsomething like the use but working on the AST...
Any Ideas?

Thanks
Ognian

[KyleAMathews]

Hmmm so looking at the source of that plugin I'm not sure if you can use it as is within Gatsby. Gatsby assumes you're working on the Markdown AST where this plugin seems to be working on the HTML AST that's generated by Remark while compiling markdown to HTML.

So either you go looking for another plugin that operates only on the markdown AST or you could try porting the ideas yourself. E.g. borrow the regexes, etc.

A simple example of how this could work is the prismjs plugin — https://github.com/gatsbyjs/gatsby/blob/1.0/packages/gatsby-typegen-remark-prismjs/src/index.js

You operate on nodes and then directly set raw HTML on the AST which will be used over the normal way of converting things.

[Ognian]

OK, I understand... I don't think that there will be another plugin operating on the markdown AST; Since these plugins are extensions to markdown they operate on the product of the markdown to html conversion which is the HTML AST... With the prismjs plugin you are lucky that you have already the "right type of node", but in my case it would mean largely rewriting the MAST to HAST functionality...

One solution could be to have another set of plugins (i.e pluginsHAST or postPlugins) in the gatsby-typegen-remark options which operate on the HAST (somewhere here).

Another would be to solve my "styling" problem entirely different.

[KyleAMathews]

Oh good idea — yeah supporting plugins that also work on the HAST would make a lot of sense.

[PauloMelo]

What is the best approach to use remark-sub-super?
I have some code that need sub and I don't know how to add plugins to the gatsby-transformer-remark

[Alxandr]

remark already has a robust plugin ecosystem as far as I've seen. Why not leverage it? You should be able to pass in plugins that are simply handed to remark.use(<plugin>). Why wrangle your own thing on top?

[kunxi]

Totally agree to leverage the remark ecosystem. I propose the following:

1. Allow the gatsby-transformer-remark to accept an Remark instance with plugins bundled with use.
2. Or we can make a meta function to easily &gatsbized* an existing remark plugin.

[KyleAMathews]

2 is the route we went down. See https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-katex/src/index.js and setParserPlugins