notion-inline-math-equations

Render Latex in notion

  1. // ==UserScript==
  2. // @name notion-inline-math-equations
  3. // @namespace https://github.com/ghosw/notion-inline-math-equations
  4. // @match https://www.notion.so/*
  5. // @version 0.0.1
  6. // @description Render Latex in notion
  7. // @require https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js
  8. // @require https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js
  9. // @grant katexStyle
  10. // ==/UserScript==
  11.  
  12. // Acknowledgement
  13. // This script was inspired by: https://github.com/evertheylen/notion-inline-math & https://github.com/Penguinlay/notion-inline-latex
  14.  
  15. // right-padding for inline math mode
  16. katexStyle(`
  17. .katex {
  18. padding-right: 0 !important;
  19. }
  20. `);
  21.  
  22. let timeBetweenRenders = 500;
  23.  
  24. function htmlToElement(str) {
  25. var template = document.createElement('template');
  26. str = str.trim(); // Never return a text node of whitespace as the result
  27. template.innerHTML = str;
  28. return template.content.firstChild;
  29. }
  30.  
  31. // render inline LaTeX
  32. function renderInlineLaTeX() {
  33. activeEl = document.activeElement;
  34. activeEl.classList.add('do-not-render-katex-123456789');
  35. renderMathInElement(document.body, {
  36. delimiters: [
  37. // LaTeX delimiters (uncomment/add as needed)
  38. // { left: "$$" , right: "$$" , display: true },
  39. // { left: "\\[", right: "\\]", display: true },
  40. // { left: "\\(", right: "\\)", display: false },
  41. { left: "$", right: "$", display: false }
  42. ],
  43. ignoredClasses: ['do-not-render-katex-123456789']
  44. });
  45. activeEl.classList.remove('do-not-render-katex-123456789');
  46. }
  47.  
  48. katexLink = htmlToElement('<link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css" type="text/css" rel="stylesheet">');
  49. document.head.appendChild(katexLink);
  50. setInterval(renderInlineLaTeX, timeBetweenRenders);