Open eleijonmarck opened 5 years ago
Did you ever get this working?
@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?
@eleijonmarck looks right to me
here is the blog starter incase it helps https://github.com/gridsome/gridsome-starter-markdown-blog
@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.
@eleijonmarck I don't use prismjs, I use shiki... why don't you try it?
@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.
I have been looking for plugins / components to use to be able to use latex expressions in blog posts.
this markdown
becomes:
I get the following Error for the timeToRead property and the content property
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
$ gridsome create test-remark-math https://github.com/gridsome/gridsome-starter-blog.git
$ npm install remark-math remark-html-katex remark-html
timeToRead
in DevTool console. Removing those for the graphql query yields the error on the content part for any markdown where$
is used.