Gridsome: How to render latex in markdown?

Created on 11 Jun 2019 · 18Comments · Source: gridsome/gridsome

Description

I would like to render latex from the markdowns that gets pulled into gridsome

Steps to reproduce

I have been looking for plugins / components to use to be able to use latex expressions in blog posts.

this markdown

### Naive approach to guess until we get a good fit
guessing the beta parameters linear equation

$ y = m \times \mathbf{x} + b

Expected result

The latex should be rendered as html

Actual result

Environment

Libs:

@gridsome/cli version: v0.1.1

Browser:

Chrome (desktop)

Node version: 10
Platform: Mac

Solution in vuepress:
https://github.com/vuejs/vuepress/issues/113

Source

eleijonmarck

👍1

Most helpful comment

@fullpwemium @hjvedvik hmm 🤔 I tried @gridsome/transformer-remark 0.3.2 and also got the same error:

 error  in ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/webpack/loaders/page-query.js):
Error: Cannot query field "description" on type "Post".

GraphQL request (29:9)
28:         timeToRead
29:         description
            ^
30:         ...on Post {

Hello, I'm not affiliated with Gridsome so I can't give an answer with any certainty or authority, but I have a solution for you. As @hjvedvik already suggested, some packages in your project likely need updating. I think if you're on an old @gridsome/transformer-remark you are likely on older versions of other packages too (including gridsome itself). Here is a set of packages which I've confirmed to work:

from packages.json

  "dependencies": {
    "@gridsome/cli": "^0.2.1",
    "@gridsome/source-filesystem": "^0.5.0",
    "@gridsome/transformer-remark": "^0.3.2",
    "gridsome": "^0.6.5",
    "remark-html-katex": "^1.2.0",
    "remark-math": "^1.0.6",
    "vue-katex": "^0.2.0"
  }

from gridsome.config.js

  transformers: {
    remark: {
      plugins:
        ['remark-math'],
        ['remark-html-katex']]
    }
  }

from the template, e.g. BlogPost.vue

// inside <script>
import 'katex/dist/katex.min.css';

from the markdown blog post

$$
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$

I hope this helps - will be interested to hear how it goes

shahinrostami on 27 Jun 2019

👍3

All 18 comments

Would be great to get this working

fullpwemium on 25 Jun 2019

You can try with the remark-math and remark-html-katex plugins for Remark:

npm i -S remark-math remark-html-katex

{
  use: '@gridsome/source-filesystem',
  options: {
    remark: {
      plugins: ['remark-math', 'remark-html-katex']
    }
  }
}

hjvedvik on 25 Jun 2019

😕1

@hjvedvik

In https://github.com/gridsome/gridsome/issues/238 @DavidCouronne has seem to have solved it. However not for when loading the .md files together with the prismjs. Please let me you know if you need more information of exactly how to reproduce the error and I can make that for you.

I tried running with configuration (as this is used from gridsome/gridsome-starter-blog):

but did not work unfortunately.

  plugins: [
    {
      // Create posts from markdown files
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'Post',
        path: 'content/posts/*.md',
        route: '/:slug',
        refs: {
          // Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
          tags: {
            typeName: 'Tag',
            route: '/tag/:id',
            create: true
          }
        },
        remark: {
          plugins: ['remark-math', 'remark-html-katex']
        }
      }
    }
  ],

transformers: {
  //Add markdown support to all file-system sources
  remark: {
    externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
        anchorClassName: 'icon icon-link',
          plugins: [
            '@gridsome/remark-prismjs'
          ]
  }
}

But I still get the same error, however.

An error occurred while executing page-query for src/pages/Index.vue

Error: Cannot read property 'prototype' of undefined

GraphQL request (14:9)
13:         date(format: "YYYY MMMM D")
14:         timeToRead
            ^
15:         description

eleijonmarck on 25 Jun 2019

👍1

I get a similar error when doing as @hjvedvik suggests:

Error: Cannot read property 'prototype' of undefined

GraphQL request (5:5)
4: date(format: "D MMMM, YYYY")
5: content
^
6: image

I'm not using primjs, but instead Shiki for the syntax highlighting.

At the top of the markdown blog post is:

title: First post
date: 2019-06-23 07:42:34
description: "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet."
image: "/assets/static/blog/images/iris.jpg"
slug: first

@eleijonmarck if I change the date to a string, i.e. date: "2019-06-23 07:42:34", I can open the page without the error but the math has not been rendered using KaTeX, I just see "$$ e^{i\pi} + 1 = 0 $$"

Scratch that, false positive. If I restart the server I get the same issue regardless of the change above.

Any ideas? The closest I've got is actually getting KaTeX to render my expressions in my templates, but not from the markdown source.

fullpwemium on 25 Jun 2019

Which version of the @gridsome/transformer-remark package do you have installed?

hjvedvik on 26 Jun 2019

Which version of the @gridsome/transformer-remark package do you have installed?

Hi! "@gridsome/transformer-remark": "^0.2.0", is this the wrong?

fullpwemium on 26 Jun 2019

@fullpwemium Use v0.3 instead.

hjvedvik on 26 Jun 2019

 error  in ./src/templates/BlogPost.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/webpack/loaders/page-query.js):
Error: Cannot query field "image" on type "BlogPost".

GraphQL request (41:5)
40:     content
41:     image
        ^
42:   }

Tried the 0.3.2 and I now have this error from the blog starter! I am new to Vue and Gridsome so this is a challenge

fullpwemium on 26 Jun 2019

@fullpwemium @hjvedvik hmm 🤔 I tried @gridsome/transformer-remark 0.3.2 and also got the same error:

 error  in ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/webpack/loaders/page-query.js):
Error: Cannot query field "description" on type "Post".

GraphQL request (29:9)
28:         timeToRead
29:         description
            ^
30:         ...on Post {

eleijonmarck on 27 Jun 2019

@fullpwemium @hjvedvik hmm 🤔 I tried @gridsome/transformer-remark 0.3.2 and also got the same error:

 error  in ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/webpack/loaders/page-query.js):
Error: Cannot query field "description" on type "Post".

GraphQL request (29:9)
28:         timeToRead
29:         description
            ^
30:         ...on Post {

from packages.json

  "dependencies": {
    "@gridsome/cli": "^0.2.1",
    "@gridsome/source-filesystem": "^0.5.0",
    "@gridsome/transformer-remark": "^0.3.2",
    "gridsome": "^0.6.5",
    "remark-html-katex": "^1.2.0",
    "remark-math": "^1.0.6",
    "vue-katex": "^0.2.0"
  }

from gridsome.config.js

  transformers: {
    remark: {
      plugins:
        ['remark-math'],
        ['remark-html-katex']]
    }
  }

from the template, e.g. BlogPost.vue

// inside <script>
import 'katex/dist/katex.min.css';

from the markdown blog post

$$
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$

I hope this helps - will be interested to hear how it goes

shahinrostami on 27 Jun 2019

👍3

@shahinrostami
Thank you! This seems to be working for rendering of the latex equations.

It looks like somehow the Image converter for the gridsome framework now does not work.

          "node": {
            "cover_image": "/Users/ericleijonmarck/dev/eleijonmarck/content/posts/images/gradient-descent-cover.gif"

All images converts to the string representation and not an actual image inside graphql

My final configuration together with the new depedencies specified by @shahinrostami looks as such

Post.vue

// inside <script>
import 'katex/dist/katex.min.css';

gridsome.config.js

  plugins: [
    {
      // Create posts from markdown files
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'Post',
        path: 'content/posts/*.md',
        route: '/:slug',
        refs: {
          // Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
          tags: {
            typeName: 'Tag',
            route: '/tag/:id',
            create: true
          }
        },
      }
    }
  ],

  transformers: {
    //Add markdown support to all file-system sources
    remark: {
      externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
      anchorClassName: 'icon icon-link',
      plugins: [
        'remark-math',
        'remark-html-katex',
        '@gridsome/remark-prismjs'
      ]
    }
  },
}

However, now I cannot render the coverImage.

In order for me to render the equations I had to remove the coverImage from the page-query of the Post.vue and Tag.vue.

But maybe that is related to some of the packages that got updated, not sure.

ERROR in ./src/templates/Post.vue?vue&type=custom&index=0&blockType=page-query (./node_modules/babel-loader/lib??ref--13-0!./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/templates/Post.vue?vue&type=custom&index=0&blockType=page-query)
Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Cannot query field "coverImage" on type "Post". Did you mean "cover_image"?

GraphQL request:72:5
71 |     content
72 |     coverImage (width: 860, blur: 10)
   |     ^
73 |   }

eleijonmarck on 27 Jun 2019

 error  in ./src/templates/BlogPost.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/webpack/loaders/page-query.js):
Error: Cannot query field "image" on type "BlogPost".

GraphQL request (41:5)
40:     content
41:     image
        ^
42:   }

Tried the 0.3.2 and I now have this error from the blog starter! I am new to Vue and Gridsome so this is a challenge

@fullpwemium I think now you have the same error as me

eleijonmarck on 28 Jun 2019

mine works now after following the instructions above, I deleted the node_modules folder and updated all my packages to latest!

fullpwemium on 28 Jun 2019

When running latex rendering in conjunction w. syntax highlighting of code.

Both @fullpwemium and I ended up switching from prism-js to shiki plugin instead.

I am now using it in the source-filesystem remark option.

eleijonmarck on 30 Jun 2019

The only way I get it to run on netlify is to first build without syntax highlighting for images
and then build for syntax highlighting (therefore taking the images from the .cache)

Removing the .cache directory makes the error pop up again.

I get really inconsistent behaviour depending on which package gets installed first.

No setup from installing have given me both the images and the syntax highlighting on the first run.

Reopening until it is fixed

eleijonmarck on 30 Jun 2019

@eleijonmarck What is the value for the cover_image in your front matter section?

hjvedvik on 5 Jul 2019

@hjvedvik
from the explorer i get strings for the cover_image:

{
  posts: allPost {
    edges {
      node {
        id
        title
        path
        tags {
          id
          title
          path
        }
        date (format: "YYYY MMMM D")
        timeToRead
        description
        cover_image (width: 770, height: 380, blur: 10)
        ...on Post {
            id
            title
            path
        }
      }
    }
  }
}

{
  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "cover_image": ""
          }
        },
        {
          "node": {
            "cover_image": "/Users/ericleijonmarck/dev/eleijonmarck/content/posts/images/gradient-descent-cover.gif"
          }

error is

4:49:54 PM: (undefined) ./src/templates/Tag.vue?vue&type=custom&index=0&blockType=page-query (./node_modules/babel-loader/lib??ref--13-0!./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/templates/Tag.vue?vue&type=custom&index=0&blockType=page-query)
4:49:54 PM: Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
4:49:54 PM: Error: Unknown argument "width" on field "cover_image" of type "Post".
4:49:54 PM: GraphQL request:26:26
4:49:54 PM: 25 |             description
4:49:54 PM: 26 |             cover_image (width: 860, blur: 10)
4:49:54 PM:    |                          ^
4:49:54 PM: 27 |             content
4:49:54 PM:     at Object.module.exports (/opt/build/repo/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:28:21)

eleijonmarck on 6 Jul 2019

I have implemented latex using gridsome-remark-katex at my site
You can have a look.