How to render latex in markdown?

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

Related issues: https://github.com/gridsome/gridsome-starter-blog/issues/22 https://github.com/gridsome/gridsome/issues/238

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

[shahinrostami]

@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

[soaibsafi]

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