I used remark to handle the md file, so I installed remark-math in accordance with the documentation, but now I have imported the module in import, and is it possible for Next.js to import this module? I tried require as per the document, but I got an error.
Would you mind taking a look?Thank you for your cooperation.
npm install remark-math retype-katex
const vfile=require('to-vfile')
constructed=require('unified')
const markdown=require('remark-parse')
const path=require('remark-math')
const remark2retype=require('remark-retype')
constkatex=require('retype-katex')
const stringify=require('retype-stringify')
unified()
.use(markdown)
.use(math)
.use(remark2retype)
.use(katex)
.use(stringify)
.process(vfile.readSync('example.md'), function(err,file){
if(err)throwerr
console.log(String(file))
})
The error has been resolved.
I was able to load import on the two modules below that I actually needed for my environment.
import path from 'remark-math'
import katex from 'retype-katex'
export async function getHtmlContent(article:article){
constprocessedContent=wait remark()
.use(html)
.use(math)
.use(katex)
.use(prism)
.process(article.content)
const contentHtml=processedContent.toString()
US>return{
...article,
content:contentHtml
}
}
So I was able to generate HTML with class, but I can't get the CSS right.
<div class="mathmathmath-display">\log_a{b}=\frac{\log_c{b}}{\log_c{a}}}</div>
Refer to the site here
I loaded import'katex/dist/katex.min.css' in _app.js, but it didn't work.
Looking at the contents of the file, I couldn't see any description of mathmath-display, so I think I need another CSS.
https://github.com/remarkjs/remark-math
javascript reactjs typescript npm next.js
remark-html-katex worked well.
© 2024 OneMinuteCode. All rights reserved.