gridsome / gridsome-starter-blog

A simple, hackable & minimalistic starter for Gridsome that uses Markdown for content.
https://gridsome-starter-blog.netlify.com/
387 stars 203 forks source link

mathjax / katex / latex rendering for the markdown #22

Open eleijonmarck opened 5 years ago

eleijonmarck commented 5 years ago

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: image

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 commented 5 years ago

Did you ever get this working?

eleijonmarck commented 5 years ago

@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 commented 5 years ago

@eleijonmarck looks right to me

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

eleijonmarck commented 5 years ago

@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 commented 5 years ago

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

eleijonmarck commented 5 years ago

@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.