main.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /* eslint no-console:0 */
  2. /**
  3. * This is the webpack entry point for the test page.
  4. */
  5. import katex from '../katex.webpack.js';
  6. import './main.css';
  7. import queryString from 'query-string';
  8. function init() {
  9. const input = document.getElementById("input");
  10. let math = document.getElementById("math");
  11. const permalink = document.getElementById("permalink");
  12. input.addEventListener("input", reprocess, false);
  13. permalink.addEventListener("click", setSearch);
  14. const options = {displayMode: true, throwOnError: false};
  15. const macros = {};
  16. const query = queryString.parse(window.location.search);
  17. if (query.text) {
  18. input.value = query.text;
  19. }
  20. // Use `display=0` or `displayMode=0` (or `=f`/`=false`/`=n`/`=no`)
  21. // to turn off displayMode (which is on by default).
  22. const displayQuery = (query.displayMode || query.display);
  23. if (displayQuery && displayQuery.match(/^(0|f|n)/)) {
  24. options.displayMode = false;
  25. }
  26. // Use `strict=warn` for warning strict mode or `strict=error`
  27. // (or `=1`/`=t`/`=true`/`=y`/`=yes`)
  28. // to turn off displayMode (which is on by default).
  29. if (query.strict) {
  30. if (query.strict.match(/^(1|t|y|e)/)) {
  31. options.strict = "error";
  32. } if (query.strict && query.strict.match(/^(w)/)) {
  33. options.strict = "warn";
  34. }
  35. }
  36. // The `before` or `pre` search parameter puts normal text before the math.
  37. // The `after` or `post` search parameter puts normal text after the math.
  38. // Example use: testing baseline alignment.
  39. if (query.before || query.after || query.pre || query.post) {
  40. const mathContainer = math;
  41. mathContainer.id = "math-container";
  42. if (query.before || query.pre) {
  43. const before = document.createTextNode(query.before || query.pre);
  44. mathContainer.appendChild(before);
  45. }
  46. math = document.createElement("span");
  47. math.id = "math";
  48. mathContainer.appendChild(math);
  49. if (query.after || query.post) {
  50. const after = document.createTextNode(query.after || query.post);
  51. mathContainer.appendChild(after);
  52. }
  53. }
  54. // Macros can be specified via `\command=expansion` or single-character
  55. // `c=expansion`.
  56. Object.getOwnPropertyNames(query).forEach((key) => {
  57. if (key.match(/^\\|^[^]$/)) {
  58. macros[key] = query[key];
  59. }
  60. });
  61. reprocess();
  62. function setSearch() {
  63. const query = queryString.parse(window.location.search);
  64. query.text = input.value;
  65. window.location.search = queryString.stringify(query);
  66. }
  67. function reprocess() {
  68. // Ignore changes to global macros caused by the expression
  69. options.macros = Object.assign({}, macros);
  70. try {
  71. katex.render(input.value, math, options);
  72. } catch (e) {
  73. if (e.__proto__ === katex.ParseError.prototype) {
  74. console.error(e);
  75. } else {
  76. throw e;
  77. }
  78. }
  79. }
  80. if (module.hot) {
  81. module.hot.accept('../katex.webpack.js', reprocess);
  82. }
  83. }
  84. init();
  85. export default katex;