Repository: KaTeX/KaTeX (js)

Issue:
Add optional pre-process callback to the auto-renderer
Hello,
It would be great adding an option for rendering inline math in display style (but not centering it). In MathJax, it suffices to add:

```
<script type="text/x-mathjax-config"> 
        MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () { 
          var TEX = MathJax.InputJax.TeX; 
          var PREFILTER = TEX.prefilterMath; 
          TEX.Augment({ 
            prefilterMath: function (math,displaymode,script) { 
              math = "\\displaystyle{"+math+"}"; 
              return PREFILTER.call(TEX,math,displaymode,script); 
            } 
          }); 
        }); 
        </script>
```

Thank you in advance!


Pull request:
Add optional pre-process callback to the auto-renderer.
Fixes #450.

Cheers

Patch:
diff --git a/contrib/auto-render/auto-render.js b/contrib/auto-render/auto-render.js
index d844424c..1a43647e 100644
--- a/contrib/auto-render/auto-render.js
+++ b/contrib/auto-render/auto-render.js
@@ -26,11 +26,14 @@ const renderMathInText = function(text, optionsCopy) {
             fragment.appendChild(document.createTextNode(data[i].data));
         } else {
             const span = document.createElement("span");
-            const math = data[i].data;
+            let math = data[i].data;
             // Override any display mode defined in the settings with that
             // defined by the text itself
             optionsCopy.displayMode = data[i].display;
             try {
+                if (optionsCopy.preProcess) {
+                    math = optionsCopy.preProcess(math);
+                }
                 katex.render(math, span, optionsCopy);
             } catch (e) {
                 if (!(e instanceof katex.ParseError)) {
diff --git a/docs/autorender.md b/docs/autorender.md
index b54db305..d62f8d8d 100644
--- a/docs/autorender.md
+++ b/docs/autorender.md
@@ -99,6 +99,9 @@ in addition to two auto-render-specific keys:
 - `errorCallback`: A callback method returning a message and an error stack
   in case of an critical error during rendering. The default uses `console.error`.
 
+- `preProcess`: A callback function, `(math: string) => string`, used to process
+  math expressions before rendering.
+
 The `displayMode` property of the options object is ignored, and is
 instead taken from the `display` key of the corresponding entry in the
 `delimiters` key.
diff --git a/package.json b/package.json
index 1b6a1b40..9215d15e 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "test:lint:js": "eslint *.js src static test contrib dockers website",
     "test:lint:css": "stylelint src/katex.less static/main.css contrib/**/*.css website/static/**/*.css",
     "test:flow": "flow",
-    "test:jest": "jest",
+    "test:jest": "NODE_PATH=./:$NODE_PATH jest",
     "test:jest:watch": "jest --watch",
     "test:jest:update": "jest --updateSnapshot",
     "test:jest:coverage": "jest --coverage",


Test patch:
diff --git a/contrib/auto-render/test/auto-render-spec.js b/contrib/auto-render/test/auto-render-spec.js
index 9e9daee3..7fc08c14 100644
--- a/contrib/auto-render/test/auto-render-spec.js
+++ b/contrib/auto-render/test/auto-render-spec.js
@@ -4,6 +4,7 @@
 /* global describe: false */
 
 import splitAtDelimiters from "../splitAtDelimiters";
+import renderMathInElement from "../auto-render";
 
 beforeEach(function() {
     expect.extend({
@@ -234,3 +235,19 @@ describe("A delimiter splitter", function() {
             ]);
     });
 });
+
+describe("Pre-process callback", function() {
+    it("replace `-squared` with `^2 `", function() {
+        const el1 = document.createElement('div');
+        el1.textContent = 'Circle equation: $x-squared + y-squared = r-squared$.';
+        const el2 = document.createElement('div');
+        el2.textContent = 'Circle equation: $x^2 + y^2 = r^2$.';
+        const delimiters = [{left: "$", right: "$", display: false}];
+        renderMathInElement(el1, {
+            delimiters,
+            preProcess: math => math.replace(/-squared/g, '^2'),
+        });
+        renderMathInElement(el2, {delimiters});
+        expect(el1.innerHTML).toEqual(el2.innerHTML);
+    });
+});