Comments (6)
this is probably related gatsbyjs/gatsby#21866
from gatsby-antd-docs.
@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,
},
},
],
},
},
from gatsby-antd-docs.
I've got the same issue. Do you know why the demo works?
from gatsby-antd-docs.
@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,
},
},
],
},
},
from gatsby-antd-docs.
If anyone can play/check with different versions, that would be appreciated 🙏
from gatsby-antd-docs.
Update package.json with the following versions works for me
"@mdx-js/mdx": "1.6.21",
"gatsby-remark-katex": "4.2.0",
from gatsby-antd-docs.
Related Issues (13)
- Specify custom order for sidebar HOT 9
- Make the Sidebar active
- Replace Autoprefixer browsers option to Browserslist config HOT 1
- Relative imports break within MDX files HOT 3
- Latex support
- Upgrade all dependencies HOT 1
- Window is not defined HOT 3
- Strategies for working on this template/boilerplate project while also working on concrete/specific instances HOT 1
- Enable external links in menuItems.json HOT 1
- GraphQL errors on `yarn start` HOT 2
- Update to ant 4 HOT 1
- Trouble rendering images in markdown HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-antd-docs.