I am using next14 and mdx markdown file. Every markdown syntax is correctly shown but strikethrough. I used ~~this is my strikethrough~~ like that. In my vscode, the strikethrough is even shown with a line passing in the middle of the text. In the result, it shows like I wrote ~~this is my strikethrough~~ like that.
This is my dependencies.
"dependencies": {
"@mdx-js/loader": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@next/mdx": "^14.1.1",
"@types/mdx": "^2.0.11",
"bootstrap": "^5.3.2",
"clsx": "^2.1.0",
"next": "14.1.0",
"react": "^18",
"react-bootstrap": "^2.10.1",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"typescript": "^5"
}
Every other tag is fine. It doesn't show only strikethrough. Did they change about markdown syntax? All I could search was using these before and after the text ~~. \n
I am using App Router and my mdx file directory is src/app/docs/page.mdx. I have mdx-components.tsx at src. I have changed my next.config.js file according to nextjs guide.
Add the remark-gfm plugin as a dependency and configure @next-mdx to use it in the next.config.js file.
https://nextjs.org/docs/app/building-your-application/configuring/mdx#remark-and-rehype-plugins