Merge pull request #8 from gamosoft/features/mathjax

added basic mathjax support

README.md

@@ -38,6 +38,7 @@ NoteDiscovery is a **lightweight, self-hosted note-taking application** that put
 - 🔌 **Extensible** - Plugin system for custom features
 - 📱 **Responsive** - Works on desktop, tablet, and mobile
 - 📂 **Simple Storage** - Plain markdown files in folders
+- 🧮 **Math Support** - LaTeX/MathJax for beautiful equations
 
 ## 🚀 Quick Start
 

data/notes/FEATURES.md

@@ -9,6 +9,7 @@
 - **Undo/Redo** - Ctrl+Z / Ctrl+Y support
 - **Syntax highlighting** for code blocks (50+ languages)
 - **Copy code blocks** - One-click copy button on hover
+- **LaTeX/Math rendering** - Beautiful mathematical equations with MathJax
 
 ### Organization
 - **Folder hierarchy** - Organize notes in nested folders
@@ -82,6 +83,36 @@
 - **Live highlighting** - Highlights update as you type or edit
 - **Fast indexing** - Instant search across notes
 
+## 🧮 Math & LaTeX Support
+
+### Mathematical Notation
+- **Inline math** - Use `$...$` or `\(...\)` for equations within text
+- **Display math** - Use `$$...$$` or `\[...\]` for centered equations
+- **Full LaTeX support** - Powered by MathJax 3
+- **Greek letters** - `\alpha`, `\beta`, `\Gamma`, etc.
+- **Matrices** - `\begin{bmatrix}...\end{bmatrix}`
+- **Calculus** - Integrals, derivatives, limits
+- **Symbols** - All standard mathematical symbols
+- **Theme-aware** - Math colors adapt to your theme
+
+### Example
+```markdown
+Einstein's equation: $E = mc^2$
+
+The quadratic formula:
+$$
+x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
+$$
+```
+Einstein's equation: $E = mc^2$
+
+The quadratic formula:
+$$
+x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
+$$
+
+📄 **See the [MATHJAX](MATHJAX.md) note for more examples and syntax reference.**
+
 ## ⚡ Keyboard Shortcuts
 
 | Windows/Linux | Mac | Action |

data/notes/MATHJAX.md

@@ -0,0 +1,433 @@
+# 🧮 LaTeX/MathJax Reference
+
+NoteDiscovery supports **LaTeX mathematical notation** powered by MathJax 3. Write beautiful equations in your notes using familiar LaTeX syntax.
+
+## Syntax Overview
+
+### Inline Math (within text)
+Use `$...$` for inline equations:
+
+- `$E = mc^2$` renders as: $E = mc^2$
+- `$x^2 + y^2 = r^2$` renders as: $x^2 + y^2 = r^2$
+
+### Display Math (centered, on its own line)
+Use `$$...$$` for display equations:
+
+```markdown
+$$
+x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
+$$
+```
+
+$$
+x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
+$$
+
+---
+
+## Basic Examples
+
+### Superscripts and Subscripts
+
+**Superscripts** use `^`:
+- `$x^2$` → $x^2$
+- `$e^{i\pi}$` → $e^{i\pi}$
+
+**Subscripts** use `_`:
+- `$x_1$` → $x_1$
+- `$a_{ij}$` → $a_{ij}$
+
+**Combined**:
+- `$x_1^2$` → $x_1^2$
+- `$\sum_{i=1}^{n} i^2$` → $\sum_{i=1}^{n} i^2$
+
+### Fractions
+
+Simple fractions: `$\frac{a}{b}$` → $\frac{a}{b}$
+
+Complex fractions:
+
+$$
+\frac{\frac{1}{x}+\frac{1}{y}}{x+y} = \frac{x+y}{xy(x+y)} = \frac{1}{xy}
+$$
+
+### Square Roots
+
+- `$\sqrt{2}$` → $\sqrt{2}$
+- `$\sqrt[3]{8}$` → $\sqrt[3]{8}$ (cube root)
+- `$\sqrt{x^2 + y^2}$` → $\sqrt{x^2 + y^2}$
+
+---
+
+## Greek Letters
+
+### Lowercase
+`$\alpha, \beta, \gamma, \delta, \epsilon, \zeta, \eta, \theta, \lambda, \mu, \pi, \sigma, \tau, \phi, \chi, \psi, \omega$`
+
+$\alpha, \beta, \gamma, \delta, \epsilon, \zeta, \eta, \theta, \lambda, \mu, \pi, \sigma, \tau, \phi, \chi, \psi, \omega$
+
+### Uppercase
+`$\Gamma, \Delta, \Theta, \Lambda, \Xi, \Pi, \Sigma, \Phi, \Psi, \Omega$`
+
+$\Gamma, \Delta, \Theta, \Lambda, \Xi, \Pi, \Sigma, \Phi, \Psi, \Omega$
+
+---
+
+## Calculus
+
+### Integrals
+
+**Definite integral:**
+```
+$$
+\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+$$
+```
+
+$$
+\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+$$
+
+**Multiple integrals:**
+```
+$$
+\iiint_V f(x,y,z) \, dx \, dy \, dz
+$$
+```
+
+$$
+\iiint_V f(x,y,z) \, dx \, dy \, dz
+$$
+
+### Derivatives
+
+**First derivative:** `$\frac{df}{dx}$` → $\frac{df}{dx}$
+
+**Partial derivatives:** `$\frac{\partial f}{\partial x}$` → $\frac{\partial f}{\partial x}$
+
+**Gradient:**
+```
+$$
+\nabla f = \frac{\partial f}{\partial x}\mathbf{i} + \frac{\partial f}{\partial y}\mathbf{j} + \frac{\partial f}{\partial z}\mathbf{k}
+$$
+```
+
+$$
+\nabla f = \frac{\partial f}{\partial x}\mathbf{i} + \frac{\partial f}{\partial y}\mathbf{j} + \frac{\partial f}{\partial z}\mathbf{k}
+$$
+
+### Limits
+
+```
+$$
+\lim_{x \to \infty} \frac{1}{x} = 0
+$$
+```
+
+$$
+\lim_{x \to \infty} \frac{1}{x} = 0
+$$
+
+---
+
+## Summations and Products
+
+### Summation
+
+**Inline:** $\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$
+
+**Display:**
+```
+$$
+\sum_{k=1}^{\infty} \frac{1}{k^2} = \frac{\pi^2}{6}
+$$
+```
+
+$$
+\sum_{k=1}^{\infty} \frac{1}{k^2} = \frac{\pi^2}{6}
+$$
+
+### Product
+
+```
+$$
+\prod_{i=1}^{n} i = n!
+$$
+```
+
+$$
+\prod_{i=1}^{n} i = n!
+$$
+
+---
+
+## Matrices and Vectors
+
+### Basic Matrix
+
+```
+$$
+\begin{bmatrix}
+a & b \\\ 
+c & d
+\end{bmatrix}
+$$
+```
+
+$$
+\begin{bmatrix}
+a & b \\\ 
+c & d
+\end{bmatrix}
+$$
+
+### Larger Matrix
+
+```
+$$
+A = \begin{bmatrix}
+1 & 2 & 3 \\\ 
+4 & 5 & 6 \\\ 
+7 & 8 & 9
+\end{bmatrix}
+$$
+```
+
+$$
+A = \begin{bmatrix}
+1 & 2 & 3 \\\ 
+4 & 5 & 6 \\\ 
+7 & 8 & 9
+\end{bmatrix}
+$$
+
+### Identity Matrix
+
+```
+$$
+I = \begin{pmatrix}
+1 & 0 & 0 \\\ 
+0 & 1 & 0 \\\ 
+0 & 0 & 1
+\end{pmatrix}
+$$
+```
+
+$$
+I = \begin{pmatrix}
+1 & 0 & 0 \\\ 
+0 & 1 & 0 \\\ 
+0 & 0 & 1
+\end{pmatrix}
+$$
+
+### Determinant
+
+```
+$$
+\det(A) = \begin{vmatrix}
+a & b \\\ 
+c & d
+\end{vmatrix} = ad - bc
+$$
+```
+
+$$
+\det(A) = \begin{vmatrix}
+a & b \\\ 
+c & d
+\end{vmatrix} = ad - bc
+$$
+
+---
+
+## Advanced Features
+
+### Systems of Equations
+
+```
+$$
+\begin{cases}
+x + y = 5 \\\ 
+2x - y = 1
+\end{cases}
+$$
+```
+
+$$
+\begin{cases}
+x + y = 5 \\\ 
+2x - y = 1
+\end{cases}
+$$
+
+### Aligned Equations
+
+```
+$$
+\begin{aligned}
+f(x) &= (x+1)^2 \\\ 
+&= x^2 + 2x + 1
+\end{aligned}
+$$
+```
+
+$$
+\begin{aligned}
+f(x) &= (x+1)^2 \\\ 
+&= x^2 + 2x + 1
+\end{aligned}
+$$
+
+### Continued Fractions
+
+```
+$$
+\phi = 1 + \frac{1}{1 + \frac{1}{1 + \frac{1}{1 + \cdots}}}
+$$
+```
+
+$$
+\phi = 1 + \frac{1}{1 + \frac{1}{1 + \frac{1}{1 + \cdots}}}
+$$
+
+---
+
+## Mathematical Symbols
+
+### Operators
+
+| Symbol | LaTeX | Result |
+|--------|-------|--------|
+| Plus-minus | `$\pm$` | $\pm$ |
+| Multiply | `$\times$` | $\times$ |
+| Divide | `$\div$` | $\div$ |
+| Not equal | `$\neq$` | $\neq$ |
+| Less/Greater | `$\leq, \geq$` | $\leq, \geq$ |
+| Approx | `$\approx$` | $\approx$ |
+| Infinity | `$\infty$` | $\infty$ |
+
+### Set Theory
+
+| Symbol | LaTeX | Result |
+|--------|-------|--------|
+| Element of | `$\in$` | $\in$ |
+| Not element | `$\notin$` | $\notin$ |
+| Subset | `$\subset$` | $\subset$ |
+| Union | `$\cup$` | $\cup$ |
+| Intersection | `$\cap$` | $\cap$ |
+| Empty set | `$\emptyset$` | $\emptyset$ |
+
+### Logic
+
+| Symbol | LaTeX | Result |
+|--------|-------|--------|
+| And | `$\land$` | $\land$ |
+| Or | `$\lor$` | $\lor$ |
+| Not | `$\neg$` | $\neg$ |
+| Implies | `$\implies$` | $\implies$ |
+| If and only if | `$\iff$` | $\iff$ |
+| For all | `$\forall$` | $\forall$ |
+| Exists | `$\exists$` | $\exists$ |
+
+---
+
+## Famous Equations
+
+### Euler's Identity
+
+$$ e^{i\pi} + 1 = 0 $$
+
+### Einstein's Mass-Energy Equivalence
+
+$$ E = mc^2 $$
+
+### Pythagorean Theorem
+
+$$ a^2 + b^2 = c^2 $$
+
+### Schrödinger Equation
+
+$$ i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat{H}\Psi(\mathbf{r},t) $$
+
+### Maxwell's Equations
+
+```
+$$
+\begin{aligned}
+\nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\\ 
+\nabla \cdot \mathbf{B} &= 0 \\\ 
+\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\\ 
+\nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t}
+\end{aligned}
+$$
+```
+
+$$
+\begin{aligned}
+\nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\\ 
+\nabla \cdot \mathbf{B} &= 0 \\\ 
+\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\\ 
+\nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t}
+\end{aligned}
+$$
+
+---
+
+## Tips
+
+### 1. Preview Mode
+Always use **Split View** or **Preview Mode** to see your equations rendered in real-time.
+
+### 2. Escaping Dollar Signs
+If you need a literal dollar sign (not math), escape it: `$\\$100$` renders as $\\$100$
+
+### 3. Complex Expressions
+For very long equations, consider breaking them across multiple lines using `aligned` or `split` environments.
+
+### 4. Matrix & Multi-line Formatting
+**IMPORTANT**: Use **3 backslashes + space** (`\\\ `) for line breaks to enable multi-line formatting:
+
+```markdown
+✅ Good (readable multi-line format):
+$$
+\begin{bmatrix}
+a & b \\\ 
+c & d
+\end{bmatrix}
+$$
+
+❌ Bad (only 2 backslashes - won't work):
+$$
+\begin{bmatrix}
+a & b \\
+c & d
+\end{bmatrix}
+$$
+```
+
+**The Secret:** Use `\\\ ` (three backslashes + trailing space) at the end of each row, then add a newline. This allows for readable multi-line equations!
+
+### 5. Debugging
+If an equation doesn't render:
+- Check for matching delimiters (`$...$` or `$$...$$`)
+- Ensure backslashes are correct (`\frac` not `/frac`)
+- Look for unescaped special characters
+- For matrices/line breaks, use `\\\ ` (three backslashes + space) not `\\`
+- Make sure there's a trailing space after `\\\` before the newline
+
+### 6. Performance
+MathJax renders efficiently, but very equation-heavy notes (100+ equations) may take a moment to typeset.
+
+---
+
+## Resources
+
+For more LaTeX commands and symbols, see:
+- [MathJax Documentation](https://docs.mathjax.org/)
+- [LaTeX Math Symbols](http://tug.ctan.org/info/symbols/comprehensive/symbols-a4.pdf)
+- [Detexify](http://detexify.kirelabs.org/classify.html) - Draw a symbol to find its LaTeX command
+
+---
+
+💡 **Tip:** Copy and paste examples from this note to quickly start using math in your own notes!

frontend/app.js

@@ -1593,6 +1593,21 @@ function noteApp() {
             }
         },
         
+        // Trigger MathJax typesetting after DOM update
+        typesetMath() {
+            if (typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
+                // Use a small delay to ensure DOM is updated
+                setTimeout(() => {
+                    const previewContent = document.querySelector('.markdown-preview');
+                    if (previewContent) {
+                        MathJax.typesetPromise([previewContent]).catch((err) => {
+                            console.error('MathJax typesetting failed:', err);
+                        });
+                    }
+                }, 10);
+            }
+        },
+        
         // Computed property for rendered markdown
         get renderedMarkdown() {
             if (!this.noteContent) return '<p style="color: var(--text-tertiary);">Nothing to preview yet...</p>';
@@ -1645,6 +1660,9 @@ function noteApp() {
             
             html = tempDiv.innerHTML;
             
+            // Trigger MathJax rendering after DOM updates
+            this.typesetMath();
+            
             // Apply syntax highlighting and add copy buttons to code blocks
             setTimeout(() => {
                 // Use cached reference if available, otherwise query

frontend/index.html

@@ -20,6 +20,27 @@
     <!-- Marked.js for Markdown parsing -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     
+    <!-- MathJax for LaTeX math rendering -->
+    <script>
+        MathJax = {
+            tex: {
+                inlineMath: [['$', '$']],
+                displayMath: [['$$', '$$']],
+                processEscapes: true,
+                processEnvironments: true
+            },
+            options: {
+                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+            },
+            startup: {
+                pageReady: () => {
+                    return MathJax.startup.defaultPageReady();
+                }
+            }
+        };
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    
     <!-- Highlight.js for code syntax highlighting -->
     <link rel="stylesheet" id="highlight-theme" href="">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
@@ -282,6 +303,24 @@
             margin-right: 0.5rem;
         }
         
+        /* Math/LaTeX styling */
+        .markdown-preview .MathJax {
+            color: var(--text-primary);
+            overflow-x: auto;
+            overflow-y: hidden;
+        }
+        
+        /* Display math (block) */
+        .markdown-preview mjx-container[display="true"] {
+            margin: 1.5rem 0;
+            overflow-x: auto;
+        }
+        
+        /* Inline math */
+        .markdown-preview mjx-container[display="false"] {
+            margin: 0 0.2rem;
+        }
+        
         /* Editor styling */
         .editor-textarea {
             font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;