docs: add documentation for renderRule option

README.md

@@ -18,6 +18,7 @@ The most lightweight, customizable React markdown component.
     - [options.overrides - Rendering Arbitrary React Components](#optionsoverrides---rendering-arbitrary-react-components)
     - [options.createElement - Custom React.createElement behavior](#optionscreateelement---custom-reactcreateelement-behavior)
     - [options.enforceAtxHeadings](#optionsenforceatxheadings)
+    - [options.renderRule](#optionsrenderrule)
     - [options.slugify](#optionsslugify)
     - [options.namedCodesToUnicode](#optionsnamedcodestounicode)
     - [options.disableParsingRawHTML](#optionsdisableparsingrawhtml)
@@ -403,6 +404,35 @@ Forces the compiler to have space between hash sign `#` and the header text whic
 
 > The opening sequence of `#` characters must be followed by a space or by the end of line.
 
+#### 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:
+
+````tsx
+import { Markdown, RuleType } from 'markdown-to-jsx'
+import { BlockMath } from 'react-katext'
+
+const exampleContent =
+  'Some important formula:\n\n```latex\n$$f(X,n) = X_n + X_{n-1}$$\n```\n'
+
+function App() {
+  return (
+    <Markdown
+      children={exampleContent}
+      options={{
+        renderRule(defaultOutput, node, renderAST, state) {
+          if (node.type === RuleType.codeBlock && node.lang === 'latex') {
+            return <BlockMath key={state.key} math={node.text} />
+          }
+
+          return defaultOutput()
+        },
+      }}
+    />
+  )
+}
+````
+
 #### options.slugify
 
 By default, a [lightweight deburring function](https://github.com/probablyup/markdown-to-jsx/blob/bc2f57412332dc670f066320c0f38d0252e0f057/index.js#L261-L275) is used to generate an HTML id from headings. You can override this by passing a function to `options.slugify`. This is helpful when you are using non-alphanumeric characters (e.g. Chinese or Japanese characters) in headings. For example:

index.tsx

@@ -216,12 +216,12 @@ export namespace MarkdownToJSX {
      * For example, to implement a LaTeX renderer such as `react-katex`:
      *
      * ```
-     * renderRule(defaultRenderer, node, output, state) {
-     *   if (node.type === 'codeBlock' && node.lang === 'latex') {
-     *     return <BlockMath key={state.key} math={node.content} />
+     * renderRule(defaultOutput, node, output, state) {
+     *   if (node.type === RuleType.codeBlock && node.lang === 'latex') {
+     *     return <BlockMath key={state.key} math={node.text} />
      *   }
      *
-     *   return defaultRenderer();
+     *   return defaultOutput();
      * }
      * ```
      *
@@ -230,9 +230,9 @@ export namespace MarkdownToJSX {
      * method in source for a particular rule.
      */
     renderRule: (
-      defaultRenderer: () => React.ReactChild,
+      defaultOutput: () => React.ReactChild,
       node: ParserResult,
-      output: RuleOutput,
+      renderAST: RuleOutput,
       state: State
     ) => React.ReactChild