added basic mathjax support
This commit is contained in:
Gamosoft
parent
b652cff5eb
commit
e7b39de1d3
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue