katex.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. // @flow
  2. /* eslint no-console:0 */
  3. /**
  4. * This is the main entry point for KaTeX. Here, we expose functions for
  5. * rendering expressions either to DOM nodes or to markup strings.
  6. *
  7. * We also expose the ParseError class to check if errors thrown from KaTeX are
  8. * errors in the expression, or errors in javascript handling.
  9. */
  10. import ParseError from "./src/ParseError";
  11. import Settings from "./src/Settings";
  12. import {buildTree, buildHTMLTree} from "./src/buildTree";
  13. import parseTree from "./src/parseTree";
  14. import buildCommon from "./src/buildCommon";
  15. import {
  16. Span,
  17. Anchor,
  18. SymbolNode,
  19. SvgNode,
  20. PathNode,
  21. LineNode,
  22. } from "./src/domTree";
  23. import type {SettingsOptions} from "./src/Settings";
  24. import type {AnyParseNode} from "./src/parseNode";
  25. import {defineSymbol} from './src/symbols';
  26. import {defineMacro} from './src/macros';
  27. import {setFontMetrics} from './src/fontMetrics';
  28. declare var __VERSION__: string;
  29. /**
  30. * Parse and build an expression, and place that expression in the DOM node
  31. * given.
  32. */
  33. let render = function(
  34. expression: string,
  35. baseNode: Node,
  36. options: SettingsOptions,
  37. ) {
  38. baseNode.textContent = "";
  39. const node = renderToDomTree(expression, options).toNode();
  40. baseNode.appendChild(node);
  41. };
  42. // KaTeX's styles don't work properly in quirks mode. Print out an error, and
  43. // disable rendering.
  44. if (typeof document !== "undefined") {
  45. if (document.compatMode !== "CSS1Compat") {
  46. typeof console !== "undefined" && console.warn(
  47. "Warning: KaTeX doesn't work in quirks mode. Make sure your " +
  48. "website has a suitable doctype.");
  49. render = function() {
  50. throw new ParseError("KaTeX doesn't work in quirks mode.");
  51. };
  52. }
  53. }
  54. /**
  55. * Parse and build an expression, and return the markup for that.
  56. */
  57. const renderToString = function(
  58. expression: string,
  59. options: SettingsOptions,
  60. ): string {
  61. const markup = renderToDomTree(expression, options).toMarkup();
  62. return markup;
  63. };
  64. /**
  65. * Parse an expression and return the parse tree.
  66. */
  67. const generateParseTree = function(
  68. expression: string,
  69. options: SettingsOptions,
  70. ): AnyParseNode[] {
  71. const settings = new Settings(options);
  72. return parseTree(expression, settings);
  73. };
  74. /**
  75. * If the given error is a KaTeX ParseError and options.throwOnError is false,
  76. * renders the invalid LaTeX as a span with hover title giving the KaTeX
  77. * error message. Otherwise, simply throws the error.
  78. */
  79. const renderError = function(
  80. error,
  81. expression: string,
  82. options: Settings,
  83. ) {
  84. if (options.throwOnError || !(error instanceof ParseError)) {
  85. throw error;
  86. }
  87. const node = buildCommon.makeSpan(["katex-error"],
  88. [new SymbolNode(expression)]);
  89. node.setAttribute("title", error.toString());
  90. node.setAttribute("style", `color:${options.errorColor}`);
  91. return node;
  92. };
  93. /**
  94. * Generates and returns the katex build tree. This is used for advanced
  95. * use cases (like rendering to custom output).
  96. */
  97. const renderToDomTree = function(
  98. expression: string,
  99. options: SettingsOptions,
  100. ) {
  101. const settings = new Settings(options);
  102. try {
  103. const tree = parseTree(expression, settings);
  104. return buildTree(tree, expression, settings);
  105. } catch (error) {
  106. return renderError(error, expression, settings);
  107. }
  108. };
  109. /**
  110. * Generates and returns the katex build tree, with just HTML (no MathML).
  111. * This is used for advanced use cases (like rendering to custom output).
  112. */
  113. const renderToHTMLTree = function(
  114. expression: string,
  115. options: SettingsOptions,
  116. ) {
  117. const settings = new Settings(options);
  118. try {
  119. const tree = parseTree(expression, settings);
  120. return buildHTMLTree(tree, expression, settings);
  121. } catch (error) {
  122. return renderError(error, expression, settings);
  123. }
  124. };
  125. export default {
  126. /**
  127. * Current KaTeX version
  128. */
  129. version: __VERSION__,
  130. /**
  131. * Renders the given LaTeX into an HTML+MathML combination, and adds
  132. * it as a child to the specified DOM node.
  133. */
  134. render,
  135. /**
  136. * Renders the given LaTeX into an HTML+MathML combination string,
  137. * for sending to the client.
  138. */
  139. renderToString,
  140. /**
  141. * KaTeX error, usually during parsing.
  142. */
  143. ParseError,
  144. /**
  145. * Parses the given LaTeX into KaTeX's internal parse tree structure,
  146. * without rendering to HTML or MathML.
  147. *
  148. * NOTE: This method is not currently recommended for public use.
  149. * The internal tree representation is unstable and is very likely
  150. * to change. Use at your own risk.
  151. */
  152. __parse: generateParseTree,
  153. /**
  154. * Renders the given LaTeX into an HTML+MathML internal DOM tree
  155. * representation, without flattening that representation to a string.
  156. *
  157. * NOTE: This method is not currently recommended for public use.
  158. * The internal tree representation is unstable and is very likely
  159. * to change. Use at your own risk.
  160. */
  161. __renderToDomTree: renderToDomTree,
  162. /**
  163. * Renders the given LaTeX into an HTML internal DOM tree representation,
  164. * without MathML and without flattening that representation to a string.
  165. *
  166. * NOTE: This method is not currently recommended for public use.
  167. * The internal tree representation is unstable and is very likely
  168. * to change. Use at your own risk.
  169. */
  170. __renderToHTMLTree: renderToHTMLTree,
  171. /**
  172. * extends internal font metrics object with a new object
  173. * each key in the new object represents a font name
  174. */
  175. __setFontMetrics: setFontMetrics,
  176. /**
  177. * adds a new symbol to builtin symbols table
  178. */
  179. __defineSymbol: defineSymbol,
  180. /**
  181. * adds a new macro to builtin macro list
  182. */
  183. __defineMacro: defineMacro,
  184. /**
  185. * Expose the dom tree node types, which can be useful for type checking nodes.
  186. *
  187. * NOTE: This method is not currently recommended for public use.
  188. * The internal tree representation is unstable and is very likely
  189. * to change. Use at your own risk.
  190. */
  191. __domTree: {
  192. Span,
  193. Anchor,
  194. SymbolNode,
  195. SvgNode,
  196. PathNode,
  197. LineNode,
  198. },
  199. };