orgapp
Ka/Mathjax support for Next
Hi! I saw you recently added LaTeX support, which is awesome! However, I saw that it was not yet integrated with the Next plugin. I tried my hand at it myself a bit, but couldn't get it to work with the react loader for some reason.
What i tried
diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
index 21af97f5..a6f03a29 100644
--- a/packages/next/src/index.ts
+++ b/packages/next/src/index.ts
@@ -1,6 +1,7 @@
import type { ProcessorOptions as LoaderOptions } from '@orgajs/loader'
import { processImage } from './plugin/image'
import { rewriteLinks } from './plugin/link'
+import latex from '@orgajs/rehype-latex'
export interface Options extends LoaderOptions {
extension: RegExp
@@ -9,7 +10,12 @@ export interface Options extends LoaderOptions {
const plugin =
(options: Partial<Options> = {}) =>
(nextConfig: any = {}) => {
- const { extension = /\.org$/, estreePlugins, ...rest } = options
+ const {
+ extension = /\.org$/,
+ estreePlugins,
+ rehypePlugins,
+ ...rest
+ } = options
return Object.assign({}, nextConfig, {
webpack(config, options) {
@@ -22,6 +28,7 @@ const plugin =
options: {
jsx: true,
providerImportSource: require.resolve('@orgajs/react'),
+ rehypePlugins: [latex, ...(rehypePlugins || [])],
estreePlugins: [
processImage,
rewriteLinks,
And some other things, such as adding @orgajs/rehype-latex to the package.json.
Building the project and then trying to run the Next starter yields this error.
Let me know if I can do anything more to help!
Sorry about the lack of documentation, I am working on them right now. But I just tried on top of the next example. You don't have to tweak the next plugin for this. You just add it in the next.config.js file, like so:
const latex = require('@orgajs/rehype-latex').default
const withOrga = require('@orgajs/next').default({
// other configs ...
rehypePlugins: [ latex ],
})
Remember to add the style in your layout component, or directly in the _app.tsx. Something similar to this:
<>
<Head> // 👈 this is next/head
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
integrity="sha384-zTROYFVGOfTw7JV7KUu8udsvW2fx4lWOsCEDqhBreBwlHI4ioVRtmIvEThzJHGET"
crossOrigin="anonymous"
/>
</Head>
...
</>
Let me know if it works on your project, I just tried it in the monorepo, not a standalone repo, there might be some issues.
