README.md (2232B)
1 # Auto-render extension 2 3 This is an extension to automatically render all of the math inside of text. It 4 searches all of the text nodes in a given element for the given delimiters, and 5 renders the math in place. 6 7 ### Usage 8 9 This extension isn't part of KaTeX proper, so the script should be separately 10 included in the page: 11 12 ```html 13 <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js" integrity="sha384-dq1/gEHSxPZQ7DdrM82ID4YVol9BYyU7GbWlIwnwyPzotpoc57wDw/guX8EaYGPx" crossorigin="anonymous"></script> 14 ``` 15 16 Then, call the exposed `renderMathInElement` function in a script tag 17 before the close body tag: 18 19 ```html 20 <body> 21 ... 22 <script> 23 renderMathInElement(document.body); 24 </script> 25 </body> 26 ``` 27 28 See [index.html](index.html) for an example. 29 30 If you prefer to have all your setup inside the html `<head>`, 31 you can use the following script there 32 (instead of the one above at the end of the `<body>`): 33 34 ```html 35 <head> 36 ... 37 <script> 38 document.addEventListener("DOMContentLoaded", function() { 39 renderMathInElement(document.body); 40 }); 41 </script> 42 ... 43 </head> 44 ``` 45 46 ### API 47 48 This extension exposes a single function, `window.renderMathInElement`, with 49 the following API: 50 51 ```js 52 function renderMathInElement(elem, options) 53 ``` 54 55 `elem` is an HTML DOM element. The function will recursively search for text 56 nodes inside this element and render the math in them. 57 58 `options` is an optional object argument with the following keys: 59 60 - `delimiters`: This is a list of delimiters to look for math. Each delimiter 61 has three properties: 62 63 - `left`: A string which starts the math expression (i.e. the left delimiter). 64 - `right`: A string which ends the math expression (i.e. the right delimiter). 65 - `display`: A boolean of whether the math in the expression should be 66 rendered in display mode or not. 67 68 The default value is: 69 70 ```js 71 [ 72 {left: "$$", right: "$$", display: true}, 73 {left: "\\[", right: "\\]", display: true}, 74 {left: "\\(", right: "\\)", display: false} 75 ] 76 ``` 77 78 - `ignoredTags`: This is a list of DOM node types to ignore when recursing 79 through. The default value is 80 `["script", "noscript", "style", "textarea", "pre", "code"]`.