chore: add latex parsing to docs site and update instructions

quantizor · Jan 1, 2024 · 560b41a · 560b41a
1 parent 8741c23
commit 560b41a
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 26 deletions.
diff --git a/.yarn/cache/@matejmazur-react-katex-npm-3.1.3-4d0b9d3d8d-db9e9aa03d.zip b/.yarn/cache/@matejmazur-react-katex-npm-3.1.3-4d0b9d3d8d-db9e9aa03d.zip
diff --git a/README.md b/README.md
@@ -406,26 +406,28 @@ Forces the compiler to have space between hash sign `#` and the header text whic
 
 #### options.renderRule
 
-Supply your own rendering function that can selectively override how _rules_ are rendered (note, this is different than _`options.overrides`_ which operates at the HTML tag level and is more general). You can use this functionality to do pretty much anything with an established AST node; here's an example of selectively overriding the "codeBlock" rule to process LaTeX syntax using the `react-katext` library:
+Supply your own rendering function that can selectively override how _rules_ are rendered (note, this is different than _`options.overrides`_ which operates at the HTML tag level and is more general). You can use this functionality to do pretty much anything with an established AST node; here's an example of selectively overriding the "codeBlock" rule to process LaTeX syntax using the `@matejmazur/react-katex` library:
 
 ````tsx
 import { Markdown, RuleType } from 'markdown-to-jsx'
-import { BlockMath } from 'react-katext'
+import TeX from '@matejmazur/react-katex'
 
 const exampleContent =
-  'Some important formula:\n\n```latex\n$$f(X,n) = X_n + X_{n-1}$$\n```\n'
+  'Some important formula:\n\n```latex\nmathbb{N} = { a in mathbb{Z} : a > 0 }\n```\n'
 
 function App() {
   return (
     <Markdown
       children={exampleContent}
       options={{
-        renderRule(defaultOutput, node, renderAST, state) {
+        renderRule(next, node, renderAST, state) {
           if (node.type === RuleType.codeBlock && node.lang === 'latex') {
-            return <BlockMath key={state.key} math={node.text} />
+            return (
+              <TeX as="div" key={state.key}>{String.raw`${node.text}`}</TeX>
+            )
           }
 
-          return defaultOutput()
+          return next()
         },
       }}
     />

diff --git a/docs/index.html b/docs/index.html
@@ -2,11 +2,16 @@
 <html>
   <head>
     <title>markdown-to-jsx: try it live!</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://unpkg.com/[email protected]/dist/katex.min.css"
       rel="stylesheet"
     />
-
     <script
       crossorigin
       src="https://unpkg.com/react@18/umd/react.production.min.js"
@@ -19,6 +24,10 @@
       crossorigin
       src="https://unpkg.com/styled-components@6/dist/styled-components.min.js"
     ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/[email protected]/dist/katex.js"
+    ></script>
   </head>
 
   <body>
@@ -40,6 +49,12 @@
 
 <small>Sample content borrowed with thanks from [elm-markdown](http://elm-lang.org/examples/markdown) ❤️</small>
 
+Custom handling of code blocks (or any rule!) is possible with the [`renderRule` option](https://github.com/quantizor/markdown-to-jsx#optionsrenderrule). For example, LaTeX support via [`@matejmazur/react-katex`](https://www.npmjs.com/package/@matejmazur/react-katex):
+
+```latex
+\mathbb{N} = \{ a \in \mathbb{Z} : a > 0 \}
+```
+
 You can even include custom React components if you declare them in the "overrides" option.
 
 <MyComponent>Isn't that cool?</MyComponent>

diff --git a/docs/markdown-to-jsx.js b/docs/markdown-to-jsx.js
diff --git a/docs/markdown-to-jsx.js.map b/docs/markdown-to-jsx.js.map
diff --git a/index.tsx b/index.tsx
@@ -216,12 +216,16 @@ export namespace MarkdownToJSX {
      * For example, to implement a LaTeX renderer such as `react-katex`:
      *
      * ```
-     * renderRule(defaultOutput, node, output, state) {
+     * renderRule(next, node, output, state) {
      *   if (node.type === RuleType.codeBlock && node.lang === 'latex') {
-     *     return <BlockMath key={state.key} math={node.text} />
+     *     return (
+     *       <TeX as="div" key={state.key}>
+     *         {String.raw`${node.text}`}
+     *       </TeX>
+     *     )
      *   }
      *
-     *   return defaultOutput();
+     *   return next();
      * }
      * ```
      *
@@ -230,7 +234,8 @@ export namespace MarkdownToJSX {
      * method in source for a particular rule.
      */
     renderRule: (
-      defaultOutput: () => React.ReactChild,
+      /** Resume normal processing, call this function as a fallback if you are not returning custom JSX. */
+      next: () => React.ReactChild,
       node: ParserResult,
       renderAST: RuleOutput,
       state: State
@@ -423,9 +428,9 @@ const TAB_R = /\t/g
 const TABLE_SEPARATOR_R = /^ *\| */
 const TABLE_TRIM_PIPES = /(^ *\||\| *$)/g
 const TABLE_CELL_END_TRIM = / *$/
-const TABLE_CENTERalign = /^ *:-+: *$/
-const TABLE_LEFTalign = /^ *:-+ *$/
-const TABLE_RIGHTalign = /^ *-+: *$/
+const TABLE_CENTER_ALIGN = /^ *:-+: *$/
+const TABLE_LEFT_ALIGN = /^ *:-+ *$/
+const TABLE_RIGHT_ALIGN = /^ *-+: *$/
 
 const TEXT_BOLD_R =
   /^([*_])\1((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1\1(?!\1)/
@@ -713,11 +718,11 @@ function slugify(str: string) {
 }
 
 function parseTableAlignCapture(alignCapture: string) {
-  if (TABLE_RIGHTalign.test(alignCapture)) {
+  if (TABLE_RIGHT_ALIGN.test(alignCapture)) {
     return 'right'
-  } else if (TABLE_CENTERalign.test(alignCapture)) {
+  } else if (TABLE_CENTER_ALIGN.test(alignCapture)) {
     return 'center'
-  } else if (TABLE_LEFTalign.test(alignCapture)) {
+  } else if (TABLE_LEFT_ALIGN.test(alignCapture)) {
     return 'left'
   }
 

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-transform-typescript": "^7.23.6",
+    "@matejmazur/react-katex": "^3.1.3",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@types/jest": "^29.5.11",
     "@types/node": "^20.10.6",
@@ -81,7 +82,7 @@
     "prepublish": "in-publish && npm run build && npm run release || not-in-publish",
     "prebuild": "rimraf dist && mkdirp dist",
     "build": "microbundle --tsconfig tsconfig.json -f cjs,umd index.cjs.tsx --name MarkdownToJSX --define process.env.NODE_ENV=production --globals react=React && microbundle --tsconfig tsconfig.json -f es,modern --name MarkdownToJSX --define process.env.NODE_ENV=production",
-    "release": "microbundle site.tsx -o docs -f iife --tsconfig tsconfig.site.json --define process.env.NODE_ENV=production --jsx React.createElement --external react,react-dom,styled-components --globals react=React,react-dom=ReactDOM,styled-components=styled -no-pkg-main",
+    "release": "microbundle site.tsx -o docs -f iife --tsconfig tsconfig.site.json --define process.env.NODE_ENV=production --jsx React.createElement --external react,react-dom,styled-components,katex --globals react=React,react-dom=ReactDOM,styled-components=styled --no-pkg-main",
     "dev": "microbundle watch site.tsx -o docs -f iife --tsconfig tsconfig.site.json --define process.env.NODE_ENV=development --jsx React.createElement --external react,react-dom,styled-components --globals react=React,react-dom=ReactDOM,styled-components=styled --no-pkg-main",
     "test": "jest --verbose",
     "size": "size-limit",

diff --git a/site.tsx b/site.tsx
@@ -2,7 +2,8 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import styled, { createGlobalStyle, css, CSSProp } from 'styled-components'
-import Markdown from './'
+import TeX from '@matejmazur/react-katex'
+import Markdown, { MarkdownToJSX, RuleType } from './'
 
 declare module 'react' {
   interface Attributes {
@@ -89,7 +90,7 @@ const GlobalStyles = createGlobalStyle`
 	html {
 		background: #222;
 		color: ${COLOR_BODY};
-		font-family: 'Source Sans Pro', Helvetica Neue, Helvetica, sans-serif;
+		font-family: Inter, Helvetica Neue, Helvetica, sans-serif;
 		font-size: 14px;
 		line-height: 1.5;
 	}
@@ -101,6 +102,7 @@ const GlobalStyles = createGlobalStyle`
 	h5,
 	h6 {
 		margin: 0 0 1rem;
+    text-wrap: balance;
 	}
 
 	h1 {
@@ -138,7 +140,7 @@ const GlobalStyles = createGlobalStyle`
 	}
 
 	code {
-		background: color-mix(in srgb, ${COLOR_ACCENT} 5%, transparent);
+		background: color-mix(in srgb, ${COLOR_ACCENT} 25%, transparent);
 		display: inline-block;
 		padding: 0 2px;
 	}
@@ -160,6 +162,10 @@ const GlobalStyles = createGlobalStyle`
 			padding: 3rem;
 		}
 	}
+
+  p {
+    text-wrap: balance;
+  }
 `
 
 const Header = styled.header`
@@ -173,7 +179,7 @@ const Header = styled.header`
 `
 
 const Description = styled.p`
-  font-size: 18px;
+  font-size: 16px;
   margin-left: auto;
   margin-right: auto;
   max-width: 60vw;
@@ -280,6 +286,17 @@ const options = {
       component: MyComponent,
     },
   },
-}
+  renderRule(defaultOutput, node, renderAST, state) {
+    if (node.type === RuleType.codeBlock && node.lang === 'latex') {
+      return (
+        <TeX as="div" key={state.key} style={{ margin: '1.5em 0' }}>
+          {String.raw`${node.text}`}
+        </TeX>
+      )
+    }
+
+    return defaultOutput()
+  },
+} as MarkdownToJSX.Options
 
 ReactDOM.render(<TryItLive />, document.getElementById('root'))
diff --git a/yarn.lock b/yarn.lock
@@ -2030,6 +2030,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@matejmazur/react-katex@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "@matejmazur/react-katex@npm:3.1.3"
+  peerDependencies:
+    katex: ">=0.9"
+    react: ">=16"
+  checksum: db9e9aa03d3b094fcb9854abeab3676732b04dbe4fbfe2dbf26782a6d50c197351d06ad833c78b90f7e418d769b77c30460a60906e80e800d84e16c938f3d6d1
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -6131,6 +6141,7 @@ __metadata:
     "@babel/plugin-proposal-object-rest-spread": "npm:^7.20.7"
     "@babel/plugin-proposal-optional-chaining": "npm:^7.21.0"
     "@babel/plugin-transform-typescript": "npm:^7.23.6"
+    "@matejmazur/react-katex": "npm:^3.1.3"
     "@size-limit/preset-small-lib": "npm:^11.0.1"
     "@types/jest": "npm:^29.5.11"
     "@types/node": "npm:^20.10.6"