[gatsby-transformer-remark] [Migration from 0.x to 1.0] Add CSS class to markdown elements

[JLongley]

I'm working on migrating my site from 0.x to 1.0. On many of my markdown pages, I've annotated the text with css classes using the syntax supported by the markdown-it-attrs plugin.

I see that gatsby has switched over to using remark for markdown parsing, and I've started reemplementing some of the features I lost as plugins. As far as I can tell, however, there is no existing remark plugin for adding CSS classes. Is there a plan for implementing this feature?

[KyleAMathews]

Someone else mentioning needed this. Not sure if they added a plugin. Try searching npm? If it doesn't exist, it'd be great to have it!

[JLongley]

If I find some time, I may pick this up soon.

FWIW, for the time being, I've gone back through and replaced the styled markdown tags with HTML spans.

[VinSpee]

I'd love a way to handle this feature in a remark plugin or somehow at the configuration level

[KyleAMathews]

It'd be great to have a Gatsby remark plugin that wraps this https://github.com/sethvincent/remark-bracketed-spans

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[vadimshvetsov]

@KyleAMathews I'm trying to implement gatsby-remark-bracketed-spans. Is it sufficient to have a code like that?

const remarkBracketedSpans = require('remark-bracketed-spans')
module.exports = () => ({})
module.exports.setParserPlugins = () => [remarkBracketedSpans]

Or maybe I can remove default export?

[KyleAMathews]

Have you checked out other remark plugins?

[vadimshvetsov]

I've thought about gatsby-remark-katex as example. There are some processing with nodes for getting done with katex.

gatsby/packages/gatsby-remark-katex/src/index.js

Line 21 in 95a898c

module.exports.setParserPlugins = () => [remarkMath]

But below we add a markdown plugin remark-math, which would be used within gatsby-tranformer-remark.

gatsby/packages/gatsby-transformer-remark/src/extend-node-type.js

Lines 86 to 93 in 95a898c

	for (let parserPlugin of requiredPlugin.setParserPlugins(
	plugin.pluginOptions
	)) {
	if (_.isArray(parserPlugin)) {
	const [parser, options] = parserPlugin
	remark = remark.use(parser, options)
	} else {
	remark = remark.use(parserPlugin)

I thought its sufficient, isn't?
But plugin with only setParserPlugins exports looks strange 😄

[vadimshvetsov]

@KyleAMathews I've made a PR #8044 with adding remark-bracketed-spans parser plugin