Installing markdown-it plugins and Mathjax

[kurtharriger]

I wanted to use MathJax with markdown, but the process seemed unnecessarily complex and bit hacky. It would be great if there were an easier more official way to override the markdown-it configuration.

The markdown-it configuration for gatsby is currently hardcoded in the custom markdown loader, so it appeared the only way to do this was to duplicate the file in its entirety to reconfigure it.

I initially thought all I need to add was this this plugin: https://github.com/classeur/markdown-it-mathjax. The webpack-configurator made this possible, but still had some issues. I started by renaming the loader, and then modifying the loader config to use my loader but it wouldn't find it. In this case I didn't want to publish the modified loader to npm so I discovered I needed to modify the default resolveLoader.modulesDirectories to include my project loaders directory. At this point I could just shadow the existing markdown-loader rather than rename it. It might be nice to have projects loaders directory in default config, but not sure how often people would actually add custom loaders so with a better way to override the markdown-loader this may not be necessary.

Once I was able to replace the built-in markdown-loader I found I started getting errors that it was unable to find front-matter. I was unclear why it would no longer find this, my guess is it only would look relative to project. I then tried to add gatsby node_modules to resolve.modulesDirectories. I had to hardcode the path to my locally installed gatsby as I couldn't figure out any other way to determine the correct path in this context, but I still couldn't get it to work and had to install all the node_modules referenced in markdown-loader in the local project.

After getting the plugin to work I discovered the plugin doesn't actually import mathjax but just makes a trivial transformation of $ to (...) so I still needed to install mathjax via cdn in html.jsx as well. Then everything worked.

It's possible I didn't even need the markdown-it-mathjax plugin as it doesn't do much, but I also couldn't quite figure out how to configure mathjax to use $. My attempt to place the mathjax config in a script tag per mathjax documentation resulted in jsx parse errors and since I already got the pugin to working I figured it good enough.

Here is what I ultimately ended up with:

kurtharriger/gatsby-starter-default@8efa11c

[KyleAMathews]

Sorry about the confusion and trouble :( this is something that definitely should be very easy to do, modify how Markdown is parsed/rendered. I'm going to move loaders out of core for the next major release as detailed in #168 and #167 (comment)

[KyleAMathews]

Also as of 0.8.10 site-specific loaders are now supported in the webpack config #188