nextra
nextra copied to clipboard
shuding
LaTeX support
Planning on using nextra with the docs template for a new project, and I was wondering:
- Is it possible to get LaTeX support inside the docs?
- The font seems to have changed. Would it be possible to get back to the old one (Inter)?
Thanks!
For Inter, I think we can add a "googleFonts" option for better customization. The reason of using the system font by default is to avoid the initial blank screen.
For LaTeX, this is definitely a good thing to have. We can look into MDX plugin for KaTeX so we can support $ ... $ and $$ ... $$.
Sounds great. By the way, what's the VSCode theme / font used in the screenshot here: https://github.com/shuding/nextra/blob/master/public/demo.png? Thanks!
IIRC it's https://marketplace.visualstudio.com/items?itemName=kettanaito.nako.
@bryanhpchiang Hi! I've just done it for a site for a CS revision session at my university - it is possible. The relevant issue is #290. Here's what you need to do:
- Install the following versions of
remark-mathandrehype-katex:
yarn add [email protected] [email protected]
- In
next.config.js:
const remarkMath = require('remark-math')
const rehypeKatex = require('rehype-katex')
const withNextra = require('nextra')({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.js',
// ...
mdxOptions: {
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex],
},
})
module.exports = withNextra()
- Create
/pages/_document.jsand add the KaTeX CSS so that equations render properly:
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document () {
return (
<Html>
<Head>
<link
rel='stylesheet'
href='https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css'
integrity='sha384-KiWOvVjnN8qwAZbuQyWDIbfCLFhLXNETzBQjA/92pIowpC0d2O3nppDGQVgwd2nB'
crossorigin='anonymous'
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
You can write equations like so:
// Wrap equations using $ signs. Use KaTex syntax.
$1 \leq S \leq 1024 $
This is successful against the current core branch. It's probably something that could be implemented inside nextra-theme-docs.
