You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# UPDATE: See the more mature https://github.com/SamyPesse/codemirror-widgets
1
+
# CodeMirror 5.x + in-place MathJax 2.x
2
2
3
-
codemirror-widgets powers [GitBook's new desktop editor](https://www.gitbook.com/blog/releases/editor-5-beta),
4
-
is abstracted to supports rendering in-place various things (math, links, images),
5
-
and seems generally well structured.
3
+
Experimenting to replace `$math$` (and related LaTeX syntaxes) with rendered formulas in CodeMirror 5.
4
+
See open issues, has known bugs!
6
5
7
-
I haven't carefully reviewed codemirror-widgets yet, but I'll probably abandon this project in favor of improving codemirror-widgets, and switch [mathdown](https://github.com/cben/mathdown) to it too.
8
-
9
-
# Attempt at CodeMirror + in-place MathJax
10
-
11
-
Experimenting to replace $math$ (and related LaTeX syntaxes) with formulas in CodeMirror.
12
-
Buggy and work-in-progress...
13
-
14
-
Mostly tested with CodeMirror 4.x, 5.x versions but probably works with 3.x too.
15
-
16
-
Performance is currently OK with MathJax 2.4, horribly slow with 2.5 or 2.6. Working on it...
6
+
> ⚠ Not _fully_ abandoned, but close to it, I barely touched this in a decade ⚠
17
7
18
8
## Demo
19
9
@@ -36,4 +26,25 @@ I'm directly working in `gh-pages` branch without a `master` branch,
36
26
as that's the simplest thing that could possibly work;
37
27
http://oli.jp/2011/github-pages-workflow/ lists several alternatives.
38
28
39
-
TODO: learn about bower or other ways to manage local vs online deps.
29
+
TODO: learn about ~~bower~~ publishing frontend code to npm
30
+
31
+
----
32
+
33
+
# Alternatives
34
+
35
+
## CodeMirror 5.x: the more mature https://github.com/SamyPesse/codemirror-widgets ?
It's abstracted to supports rendering in-place various things (math, links, images), and seems generally well structured.
40
+
IIRC it was more systematic in some ways (e.g. multi-line formula support). But it's been dormant since 2016 too.
41
+
42
+
## CodeMirror 6: Look at how Overleaf does it
43
+
44
+
https://Overleaf.com renders to PDF by real LaTeX, but can also render math in the editor, and is very battle-tested!
45
+
46
+
They've long been on CodeMirror 6, and in June 2026 [upgraded to MathJax 4](https://github.com/overleaf/overleaf/commits/757735b07518ffc157ae3b2abe8307beb14198a2/services/web/frontend/js/features/mathjax/load-mathjax.ts).
47
+
48
+
- in "Code" mode they render current formula as tooltip preview: https://github.com/overleaf/overleaf/blob/757735b07518ffc157ae3b2abe8307beb14198a2/services/web/frontend/js/features/source-editor/extensions/math-preview.ts#L115-L137
49
+
- in "Visual" mode they do a lot of inline styling of markdown + render all formulas. I think mostly implemented here: https://github.com/overleaf/overleaf/blob/757735b07518ffc157ae3b2abe8307beb14198a2/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
50
+
(CM 5 API had "widgets"; CM 6 has "decorations" that may `replace` text + ability to mark ranges as "atomic" for cursor movement)
0 commit comments