Open FishFucker69 opened 3 years ago
this is probably related https://github.com/gatsbyjs/gatsby/issues/21866
@AnshulKanwar I tried for some time to resolve this issue, but without luck.
Any help is appreciated. Trying different versions, libraries, configs.. Im just trying but have no real clue how the plugins relate to each other.
We currently use this plugin to render md/mdx files:
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
default: require.resolve('./src/Layout.tsx'),
},
extensions: ['.mdx', '.md'],
// workaround: https://github.com/gatsbyjs/gatsby/issues/16422#issuecomment-518985316
plugins: [`gatsby-remark-autolink-headers`],
gatsbyRemarkPlugins: [
`gatsby-remark-katex`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1035,
},
},
`gatsby-remark-autolink-headers`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: 'language-',
inlineCodeMarker: null,
showLineNumbers: true,
noInlineHighlight: false,
},
},
],
},
},
I've got the same issue. Do you know why the demo works?
@vinhhungle I think the version on the demo is from some time ago: https://github.com/jannikbuschke/gatsby-antd-docs/tree/065003c03770785d38adf08939785b5ecff1fee1
packages that could be relevant: demo (working):
"katex": "0.11.0",
"prismjs": "1.17.1",
"gatsby-remark-katex": "3.1.7",
"gatsby-remark-prismjs": "3.3.12",
"@mdx-js/mdx": "1.4.4",
current (not working)
"katex": "0.13.18",
"prismjs": "1.25.0",
"gatsby-remark-katex": "^6.0.0",
"gatsby-remark-prismjs": "^6.0.0",
"@mdx-js/mdx": "1.6.22",
gatsby-config.js that could be relevant demo (working):
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
default: require.resolve('./src/Layout.tsx'),
},
extensions: ['.mdx', '.md'],
// workaround: https://github.com/gatsbyjs/gatsby/issues/16422#issuecomment-518985316
plugins: [`gatsby-remark-autolink-headers`],
gatsbyRemarkPlugins: [
`gatsby-remark-katex`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1035,
},
},
`gatsby-remark-autolink-headers`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: 'language-',
inlineCodeMarker: null,
showLineNumbers: true,
noInlineHighlight: false,
},
},
],
},
}
current (not working):
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
default: require.resolve('./src/Layout.tsx'),
},
extensions: ['.mdx', '.md'],
// workaround: https://github.com/gatsbyjs/gatsby/issues/16422#issuecomment-518985316
plugins: [`gatsby-remark-autolink-headers`],
gatsbyRemarkPlugins: [
`gatsby-remark-katex`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1035,
},
},
`gatsby-remark-autolink-headers`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: 'language-',
inlineCodeMarker: null,
showLineNumbers: true,
noInlineHighlight: false,
},
},
],
},
},
If anyone can play/check with different versions, that would be appreciated 🙏
Update package.json with the following versions works for me
"@mdx-js/mdx": "1.6.21",
"gatsby-remark-katex": "4.2.0",
Latex is not rendering at http://localhost:8000/docs/template/get-started/latex
This is how it looks.
I think its a problem with gatsby v3 only.