hanai / gatsby-remark-mathjax

Transform math nodes to html markup for MathJax

gatsby-remark-mathjax

📌 Notice

This plugin is not for Mathjax Server-Side render or inject js/css. It is used for keeping Latex snippets as raw when gatsby-transformer-remark convert markdown to html.

Introduction

gatsby-remark-mathjax adds mathjax support to gatsby using remark-math.

Install

npm install --save gatsby-transformer-remark gatsby-remark-mathjax

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        `gatsby-remark-mathjax`,
      ],
    },
  },
],

Add MathJax to your template: MathJax is required to render the formulas correctly. MathJax: Getting Started

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

Math Equations in Inline Mode

Surround your equation with $ to generate a math equation in inline mode.

Example markdown:

$a^2 + b^2 = c^2$

Math Equations in Display Mode

Surround your equation with $$ and new-lines to generate a math equation in display mode.

Example markdown:

$$
a^2 + b^2 = c^2
$$