Feat/math examples (#303)

avitorio · web-flow · commit 83264d3b47a3 · 2025-06-16T16:40:48.000-03:00
diff --git a/apps/dev/outstatic/content/metadata.json b/apps/dev/outstatic/content/metadata.json
@@ -1,6 +1,6 @@
 {
-  "commit": "d164819e9dad435410707d379bdda074f40eda64",
-  "generated": "2024-11-11T14:42:41.780Z",
+  "commit": "da55c4a80a76a17846d35e6ca0f68ef9269b3b59",
+  "generated": "2025-06-14T19:20:16.310Z",
   "metadata": [
     {
       "__outstatic": {
diff --git a/apps/dev/package.json b/apps/dev/package.json
@@ -41,12 +41,15 @@
     "esbuild": "^0.15.18",
     "eslint": "9.14.0",
     "eslint-config-next": "15.2.4",
+    "katex": "^0.16.22",
     "mdx-bundler": "^10.0.1",
     "postcss": "8.4.41",
     "postcss-nesting": "^12.0.2",
     "rehype-autolink-headings": "^6.1.1",
+    "rehype-katex": "^7.0.1",
     "rehype-pretty-code": "^0.12.6",
     "rehype-slug": "^5.1.0",
+    "remark-math": "^6.0.0",
     "typescript": "5.7.2"
   },
   "pnpm": {
diff --git a/apps/dev/src/app/(web)/layout.tsx b/apps/dev/src/app/(web)/layout.tsx
@@ -5,6 +5,7 @@ import { ThemeProvider } from '@/components/theme-provider'
 import { absoluteUrl, ogUrl } from '@/lib/utils'
 import '@/styles/index.css'
 import { Metadata } from 'next'
+import 'katex/dist/katex.min.css'
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://outstatic.com'),
diff --git a/apps/dev/src/lib/mdx-server.ts b/apps/dev/src/lib/mdx-server.ts
@@ -3,15 +3,18 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
 
 export default async function MDXServer(code: string) {
   const result = await bundleMDX({
     source: code,
     mdxOptions(options) {
       options.remarkPlugins = options.remarkPlugins ?? []
       options.remarkPlugins.push(remarkGfm as any)
-
+      options.remarkPlugins.push(remarkMath as any)
       options.rehypePlugins = options.rehypePlugins ?? []
+      options.rehypePlugins.push(rehypeKatex as any)
       options.rehypePlugins.push(rehypeSlug as any)
       options.rehypePlugins.push([
         rehypePrettyCode as any,
diff --git a/apps/docs/outstatic/content/docs/the-content-editor.md b/apps/docs/outstatic/content/docs/the-content-editor.md
@@ -7,7 +7,7 @@ author:
 slug: "the-content-editor"
 description: "Learn how the Outstatic Content Editor works."
 coverImage: ""
-publishedAt: "2024-11-06T03:00:00.000Z"
+publishedAt: "2024-11-16T03:00:00.000Z"
 ---
 
 The content editor is the main tool used for editing documents. It's where you'll be writing your content, adding links, images, etc…
@@ -62,12 +62,30 @@ Outstatic's AI-powered completions offers you an effortless writing experience b
 
 ## Mathematical Expressions
 
-Outstatic supports math expressions using LaTeX format. You can add them to your Markdown by clicking the Σ icon in the formatting menu. For more details, see GitHub’s [Writing Mathematical Expressions](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions) guide.\
+Outstatic supports math expressions using LaTeX format. Example:
+
+$E=mc^2$
+
+You can add them to your Markdown by clicking the Σ icon in the formatting menu. For more details, see GitHub’s [Writing Mathematical Expressions](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions) guide.
+
 Please note that only inline expressions are currently supported—block expressions are not yet available.
 
-To render LaTeX in your frontend you will need to install the packages needed for your framewor. You can use [remark-math](https://www.npmjs.com/package/remark-math) and [rehype-katex](https://www.npmjs.com/package/rehype-katex).
+To render LaTeX in your frontend you will need to install the packages needed for your framework. You can use [katex](https://www.npmjs.com/package/katex), [remark-math](https://www.npmjs.com/package/remark-math) and [rehype-katex](https://www.npmjs.com/package/rehype-katex).
+
+Here's a small example for Next.js:
+
+```bash
+pnpm i katex remark-math rehype-katex
+```
+
+In your `layout.tsx` files add:
+
+```javascript
+
+import "katex/dist/katex.min.css";
+```
 
-Here's a small example with `mdx-bundler`
+And in your  `mdx-bundler`:
 
 ```typescript
 import { bundleMDX } from 'mdx-bundler'
diff --git a/apps/docs/outstatic/content/metadata.json b/apps/docs/outstatic/content/metadata.json
@@ -1,6 +1,6 @@
 {
-  "commit": "46fadfa83b99e86a06db3c079bf7a9b57eeff915",
-  "generated": "2025-06-14T19:28:34.146Z",
+  "commit": "051ca0a3c621db5de18718975b4f584245187147",
+  "generated": "2025-06-16T19:31:00.806Z",
   "metadata": [
     {
       "__outstatic": {
@@ -492,8 +492,8 @@
     },
     {
       "__outstatic": {
-        "commit": "46fadfa83b99e86a06db3c079bf7a9b57eeff915",
-        "hash": "2761599742",
+        "commit": "051ca0a3c621db5de18718975b4f584245187147",
+        "hash": "1502496",
         "path": "/outstatic/content/docs/the-content-editor.md"
       },
       "author": {
@@ -503,7 +503,7 @@
       "collection": "docs",
       "coverImage": "",
       "description": "Learn how the Outstatic Content Editor works.",
-      "publishedAt": "2024-11-06T03:00:00.000Z",
+      "publishedAt": "2024-11-16T03:00:00.000Z",
       "slug": "the-content-editor",
       "status": "published",
       "title": "The content editor"
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -17,16 +17,19 @@
     "clsx": "^2.1.1",
     "date-fns": "^2.30.0",
     "gray-matter": "^4.0.3",
+    "katex": "^0.16.22",
     "lucide-react": "^0.424.0",
     "next": "15.2.4",
     "next-themes": "^0.4.3",
     "outstatic": "workspace:*",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "rehype-katex": "^7.0.1",
     "rehype-pretty-code": "^0.12.6",
     "remark": "^14.0.3",
     "remark-gfm": "^4.0.0",
     "remark-html": "^15.0.2",
+    "remark-math": "^6.0.0",
     "shikiji": "^0.9.19",
     "tailwind-merge": "^2.4.0",
     "vaul": "^0.8.0"
diff --git a/apps/docs/src/app/(docs)/layout.tsx b/apps/docs/src/app/(docs)/layout.tsx
@@ -3,6 +3,7 @@ import { ThemeProvider } from '@/components/theme-provider'
 import '@/styles/style.css'
 import { Metadata } from 'next'
 import Script from 'next/script'
+import 'katex/dist/katex.min.css'
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://outstatic.com'),
diff --git a/apps/docs/src/lib/mdx-server.ts b/apps/docs/src/lib/mdx-server.ts
@@ -3,15 +3,18 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
 
 export default async function MDXServer(code: string) {
   const result = await bundleMDX({
     source: code,
     mdxOptions(options) {
       options.remarkPlugins = options.remarkPlugins ?? []
       options.remarkPlugins.push(remarkGfm as any)
-
+      options.remarkPlugins.push(remarkMath as any)
       options.rehypePlugins = options.rehypePlugins ?? []
+      options.rehypePlugins.push(rehypeKatex as any)
       options.rehypePlugins.push(rehypeSlug as any)
       options.rehypePlugins.push([
         rehypePrettyCode as any,
diff --git a/examples/advanced-blog/package.json b/examples/advanced-blog/package.json
@@ -17,15 +17,18 @@
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "gray-matter": "^4.0.3",
+    "katex": "^0.16.22",
     "lucide-react": "^0.303.0",
     "next": "15.2.4",
     "next-themes": "^0.2.1",
     "outstatic": "latest",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "rehype-katex": "^7.0.1",
     "remark": "^14.0.3",
     "remark-gfm": "^4.0.0",
     "remark-html": "^15.0.2",
+    "remark-math": "^6.0.0",
     "shikiji": "^0.9.0",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "4.0.7",
diff --git a/examples/advanced-blog/src/app/(web)/layout.tsx b/examples/advanced-blog/src/app/(web)/layout.tsx
@@ -1,45 +1,46 @@
-import { BuiltWithOutstatic } from "@/components/built-with-outstatic";
-import Footer from "@/components/footer";
-import Header from "@/components/header";
-import { ThemeProvider } from "@/components/theme-provider";
-import { absoluteUrl, ogUrl } from "@/lib/utils";
-import "@/styles/index.css";
-import { Metadata } from "next";
+import { BuiltWithOutstatic } from '@/components/built-with-outstatic'
+import Footer from '@/components/footer'
+import Header from '@/components/header'
+import { ThemeProvider } from '@/components/theme-provider'
+import { absoluteUrl, ogUrl } from '@/lib/utils'
+import '@/styles/index.css'
+import { Metadata } from 'next'
+import 'katex/dist/katex.min.css'
 
 export const metadata: Metadata = {
-  metadataBase: new URL("https://outstatic.com"),
+  metadataBase: new URL('https://outstatic.com'),
   title: {
-    default: "Andre Vitorio - Design. Develop. Deploy.",
-    template: "%s | Andre Vitorio",
+    default: 'Andre Vitorio - Design. Develop. Deploy.',
+    template: '%s | Andre Vitorio'
   },
   description:
-    "Design engineer from Maceió, Brazil. I write about web development, software engineering, and more.",
+    'Design engineer from Maceió, Brazil. I write about web development, software engineering, and more.',
   openGraph: {
-    title: "Andre Vitorio - Design. Develop. Deploy.",
+    title: 'Andre Vitorio - Design. Develop. Deploy.',
     description:
-      "Design engineer from Maceió, Brazil. I write about web development, software engineering, and more.",
-    url: absoluteUrl("/"),
-    siteName: "AndreVitorio.com",
+      'Design engineer from Maceió, Brazil. I write about web development, software engineering, and more.',
+    url: absoluteUrl('/'),
+    siteName: 'AndreVitorio.com',
     images: [
       {
-        url: ogUrl("Andre Vitorio - Design. Develop. Deploy."),
+        url: ogUrl('Andre Vitorio - Design. Develop. Deploy.'),
         width: 1200,
-        height: 630,
-      },
+        height: 630
+      }
     ],
-    locale: "en_US",
-    type: "website",
+    locale: 'en_US',
+    type: 'website'
   },
   icons: {
-    icon: [{ url: "/favicon/favicon-32x32.png" }],
-    apple: [{ url: "/favicon/apple-touch-icon.png" }],
-  },
-};
+    icon: [{ url: '/favicon/favicon-32x32.png' }],
+    apple: [{ url: '/favicon/apple-touch-icon.png' }]
+  }
+}
 
 export default function RootLayout({
-  children,
+  children
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
@@ -59,5 +60,5 @@ export default function RootLayout({
         </ThemeProvider>
       </body>
     </html>
-  );
+  )
 }
diff --git a/examples/advanced-blog/src/lib/mdx-server.ts b/examples/advanced-blog/src/lib/mdx-server.ts
@@ -3,15 +3,18 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
 
 export default async function MDXServer(code: string) {
   const result = await bundleMDX({
     source: code,
     mdxOptions(options) {
       options.remarkPlugins = options.remarkPlugins ?? []
       options.remarkPlugins.push(remarkGfm as any)
-
+      options.remarkPlugins.push(remarkMath as any)
       options.rehypePlugins = options.rehypePlugins ?? []
+      options.rehypePlugins.push(rehypeKatex as any)
       options.rehypePlugins.push(rehypeSlug as any)
       options.rehypePlugins.push([
         rehypePrettyCode as any,
diff --git a/examples/docs/package.json b/examples/docs/package.json
@@ -18,16 +18,19 @@
     "date-fns": "^2.30.0",
     "eslint-config-next": "^14.1.3",
     "gray-matter": "^4.0.3",
+    "katex": "^0.16.22",
     "lucide-react": "^0.358.0",
     "next": "15.2.4",
     "next-themes": "^0.4.3",
     "outstatic": "latest",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "rehype-katex": "^7.0.1",
     "rehype-pretty-code": "^0.12.6",
     "remark": "^14.0.3",
     "remark-gfm": "^4.0.0",
     "remark-html": "^15.0.2",
+    "remark-math": "^6.0.0",
     "shikiji": "^0.9.19",
     "tailwind-merge": "^2.2.2",
     "vaul": "^0.8.0"
diff --git a/examples/docs/src/app/(docs)/layout.tsx b/examples/docs/src/app/(docs)/layout.tsx
@@ -3,6 +3,7 @@ import { ThemeProvider } from '@/components/theme-provider'
 import '@/styles/style.css'
 import { Metadata } from 'next'
 import Script from 'next/script'
+import 'katex/dist/katex.min.css'
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://outstatic.com'),
diff --git a/examples/docs/src/lib/mdx-server.ts b/examples/docs/src/lib/mdx-server.ts
@@ -3,15 +3,18 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
 
 export default async function MDXServer(code: string) {
   const result = await bundleMDX({
     source: code,
     mdxOptions(options) {
       options.remarkPlugins = options.remarkPlugins ?? []
       options.remarkPlugins.push(remarkGfm as any)
-
+      options.remarkPlugins.push(remarkMath as any)
       options.rehypePlugins = options.rehypePlugins ?? []
+      options.rehypePlugins.push(rehypeKatex as any)
       options.rehypePlugins.push(rehypeSlug as any)
       options.rehypePlugins.push([
         rehypePrettyCode as any,
diff --git a/packages/outstatic/CHANGELOG.md b/packages/outstatic/CHANGELOG.md
@@ -1,5 +1,11 @@
 # outstatic
 
+## 2.0.8
+
+### Patch Changes
+
+- Add math examples
+
 ## 2.0.7
 
 ### Patch Changes
diff --git a/packages/outstatic/package.json b/packages/outstatic/package.json
@@ -1,6 +1,6 @@
 {
   "name": "outstatic",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Static site CMS",
   "author": "Andre Vitorio <andre@vitorio.net>",
   "license": "FSL-1.1-ALv2",
diff --git a/packages/outstatic/src/components/editor/extensions/markdown-it-math.ts b/packages/outstatic/src/components/editor/extensions/markdown-it-math.ts
@@ -6,8 +6,8 @@ import MarkdownIt from 'markdown-it'
 const markdownItMath = (md: MarkdownIt) => {
   // Default options
   const options = {
-    inlineOpen: '$`',
-    inlineClose: '`$'
+    inlineOpen: '$',
+    inlineClose: '$'
   }
 
   // Helper function to create a token
diff --git a/packages/outstatic/src/components/editor/extensions/mathematics.ts b/packages/outstatic/src/components/editor/extensions/mathematics.ts
@@ -191,7 +191,7 @@ export const Mathematics = Node.create<MathematicsOptions>({
       markdown: {
         serialize: (state: any, node: any) => {
           if (node.attrs.latex) {
-            state.write(`$\`${node.attrs.latex}\`$`)
+            state.write(`$${node.attrs.latex}$`)
           }
         },
         parse: {
diff --git a/packages/outstatic/src/utils/constants.ts b/packages/outstatic/src/utils/constants.ts
@@ -1,7 +1,7 @@
 import { Document } from '@/types'
 
 // Outstatic configuration
-export const OUTSTATIC_VERSION = '2.0.7'
+export const OUTSTATIC_VERSION = '2.0.8'
 export const OUTSTATIC_URL = 'https://outstatic.com'
 
 // API configuration
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`		`- "commit": "d164819e9dad435410707d379bdda074f40eda64",`
`3`		`- "generated": "2024-11-11T14:42:41.780Z",`
	`2`	`+ "commit": "da55c4a80a76a17846d35e6ca0f68ef9269b3b59",`
	`3`	`+ "generated": "2025-06-14T19:20:16.310Z",`
`4`	`4`	`"metadata": [`
`5`	`5`	`{`
`6`	`6`	`"__outstatic": {`