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/katex@0.13.18/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.

orgapp / orgajs

Ka/Mathjax support for Next #172

What i tried