mathjax / katex / latex rendering for the markdown

[eleijonmarck]

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

becomes:

I get the following Error for the timeToRead property and the content property

shared.js?37f0:18 An error occurred while executing page-query for src/templates/Post.vue

Error: Cannot read property 'prototype' of undefined

GraphQL request (12:5)
11:     description
12:     content
        ^
13:     coverImage(width: 860, blur: 10)

Do we need to handle the content in some way for the rendering to take place for the places of latex expressions?

Found the issue solved on vuepress: https://github.com/vuejs/vuepress/issues/113

Could we do something similar maybe? I cannot see how we can use it: https://github.com/gridsome/gridsome-starter-blog/blob/c594069b2032073248b99e76d2e55f01a1c5739c/gridsome.config.js#L17

Found the issue of the remark/prism plugin we are using: https://github.com/gridsome/gridsome/issues/238

Steps to reproduce

1. $ gridsome create test-remark-math https://github.com/gridsome/gridsome-starter-blog.git
2. $ npm install remark-math remark-html-katex remark-html
3. Then you will get same error for timeToRead in DevTool console. Removing those for the graphql query yields the error on the content part for any markdown where $ is used.

[fullpwemium]

Did you ever get this working?

[eleijonmarck]

@fullpwemium sorry If I am bothering you but you seem to have made it possible with this starter kit and the latex rendering. Could you help me get it set up?

Currently the way to create the same issue as I have currently is to

working

$ gridsome create test-latex https://github.com/gridsome/gridsome-starter-blog.git
$ cd test-latex
$ gridsome develop

when updating the dependencies gridsome.config.js to (provided by https://github.com/gridsome/gridsome/issues/499#issuecomment-506251569)

    "@gridsome/remark-prismjs": "^0.1.0",
    "@gridsome/source-filesystem": "^0.5.0",
    "@gridsome/transformer-remark": "^0.3.2",
    "gridsome": "^0.6.5

running

$ rm -rf .cache
$ rm -rf node_modules
$ npm install
$ gridsome develop

I get

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:74:5
73 |     content
74 |     coverImage (width: 860, blur: 10)
   |     ^
75 |   }
    at Object.module.exports (/Users/ericleijonmarck/dev/test-latex/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:28:21)

Am I deleting the node_modules incorrectly?

[fullpwemium]

@eleijonmarck looks right to me

here is the blog starter incase it helps https://github.com/gridsome/gridsome-starter-markdown-blog

[eleijonmarck]

@fullpwemium hmmm 🤔

I get the correct output now with images and latex. But no syntax highlighting

Interesting I may have found the issue.

Since I want code highlighting as well. I use @grisome/remark-prismjs inside of gridsome.config.js

        ['@gridsome/remark-prismjs']

with package.json

    "@gridsome/remark-prismjs": "^0.1.0",

This is the one causing the issue.

[fullpwemium]

@eleijonmarck I don't use prismjs, I use shiki... why don't you try it?

[eleijonmarck]

@fullpwemium Oh ma gad! Thank you. I am now using it in the source-filesystem remark option.

Let's continue to figure this out together. :)

my blog will be available here https://eleijonmarck.dev for reference.