├── README.md
└── script.js


/README.md:
--------------------------------------------------------------------------------
1 | # Notion inline math
2 | 
3 | **This is now obsolete, as Notion added this feature themselves!**
4 | 
5 | More info, a demo, and instructions [here](https://www.notion.so/evertheylen/Notion-Inline-Math-9c5047a4e7c84643848b3630db8d5a5e).
6 | 
7 | [**Interested in these kinds of hacks? There's more at our *Notion Hacks* community!**](https://www.notion.so/notionhacks/Notion-Hacks-27b92f71afcd4ae2ac9a4d14fef0ce47)
8 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | // ==UserScript==
 2 | // @name Inline Math for Notion.so
 3 | // @homepageURL https://www.notion.so/evertheylen/Notion-Inline-Math-9c5047a4e7c84643848b3630db8d5a5e
 4 | // @version 0.2.1
 5 | // @match https://www.notion.so/*
 6 | // @grant GM_addStyle
 7 | // @require https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js
 8 | // ==/UserScript==
 9 | 
10 | // Instructions for use:
11 | //   - Use inline code starting with "math:". For example: `math: f(x) = x^2`
12 | //   - Press F2 to rerender all inline math. You can of course change the shortcut in the code below.
13 | //   - The inline math will revert to inline code when the block becomes active.
14 | 
15 | GM_addStyle(`
16 | .notion-frame span .katex {
17 |     padding-right: 0 !important;
18 | }
19 | `)
20 | 
21 | function render_one(el) {
22 |     var s = el.textContent
23 |     el.style.color = null
24 |     el.style.background = null
25 |     s = s.slice(5).trim()
26 |     console.log("rendering ", s)
27 |     katex.render(s, el, {throwOnError: false})
28 | }
29 | 
30 | function rerender_all() {
31 |     console.log("rerender all!")
32 |     var mathElement = Array.from(document.querySelectorAll("span[style*=\"monospace\"]"))
33 |     var filtered = mathElement.filter(el => el.textContent.startsWith("math:"))
34 |     filtered.forEach(function(el) {
35 |         render_one(el)
36 |     })
37 | }
38 | 
39 | function loadKatexStyleSheet() {
40 |     console.log('Loading KateX stylesheet')
41 |     var myCSS = document.createElement( "link" );
42 |     myCSS.rel = "stylesheet";
43 |     myCSS.href = "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css";
44 |     // insert it at the end of the head in a legacy-friendly manner
45 |     document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
46 | }
47 | 
48 | function pollForMathContents(maxPolls = 20, interval = 200) {
49 |     var counter = maxPolls;
50 |     var checkExist = setInterval(function() {
51 |         var content = document.querySelectorAll("div.notion-page-content")
52 |         var contentExists = typeof(content) != 'undefined' && content != null
53 | 
54 |         if (contentExists && content.length > 0) {
55 |             var math = content[0].querySelectorAll("span[style*=\"monospace\"]")
56 | 
57 |             if (math.length > 0 || counter == 0) {
58 |                 console.log("Math content found or poll limit reached");
59 |                 clearInterval(checkExist);
60 |                 rerender_all()
61 |             }
62 |         }
63 |         counter--
64 |     }, interval);
65 | }
66 | 
67 | document.onreadystatechange = function() {
68 |     if (document.readyState === 'complete') {
69 |         loadKatexStyleSheet();
70 |         pollForMathContents(20, 200);
71 |     }
72 | };
73 | 
74 | window.addEventListener('keydown', function(e) {
75 |     if (e.key == "F2" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey) {
76 |         rerender_all()
77 |     }
78 | }, true)
79 | 


--------------------------------------------------------------------------------