Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to make the overlayMode working? #495

Open
naitsok opened this issue Aug 28, 2022 · 3 comments
Open

How to make the overlayMode working? #495

naitsok opened this issue Aug 28, 2022 · 3 comments
Labels
Question

Comments

@naitsok
Copy link

naitsok commented Aug 28, 2022

Hello to all the developers of EasyMDE. Thanks for such a great editor!

I would like add additional highlighting during editing. In particular, I want to highlight TeX/LaTeX equations. I've found the CodeMirrors's "stex" mode, but I'm struggling to make it load using the overlayMode option.

What I've done:
I followed this guide on Hinty to add "stex" mode to the easymde.min.js. Everything should be correct as the size of easymde.min.js increased after adding "stex" mode.

Next, I tried different options to add the "stex" mode to overlayMode:

overlayMode: {
            mode: { name: "stex", inMathMode: false },
            combine: true,
        },

Then I've tried to create the mode object using CodeMirror.defineMode(...), and CodeMirror.getMode(...).

However, with no success in parsing and highlighting LaTeX equations during the editing. I'm sure that the solution is simple, but I couldn't get it working after searching and reading CodeMirror's docs. What am I doing wrong?
Thanks a lot!
@Ionaru
Copy link
Owner

Ionaru commented Aug 30, 2022 •
edited
Loading

Highlighting LaTeX inside code blocks is pretty simple, all it takes is adding require('codemirror/mode/stex/stex.js'); to easymde.js and building a new dist. (hljs for highlighting in the preview).

image

Highlighting outside a code block is slightly trickier, but the overlayMode option is able to do what you need, given the right parameters, without having to edit the source.

const easyMDE = new EasyMDE({
    overlayMode: {
        mode: CodeMirror.getMode({}, 'stex'),
        combine: true,
    },
    spellChecker: false, // Does not work with the spell checker enabled.
});

Unfortunately the CodeMirror object from EasyMDE is not available at that moment, although exposing it on the EasyMDE object should not be difficult (EasyMDE.CodeMirror = CodeMirror; in easymde.js, PR anyone? 😉).

Alternatively you can use https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.8/codemirror.min.js or any cdn of your choice to load in a copy of CodeMirror, yes it's a bit wasteful to load CodeMirror twice, but it's only 51 kb so 🤷‍♂️.

After setting CodeMirror on the window you can load in https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.8/mode/stex/stex.min.js or any source for that module of your choice.

In the end my working editor looked like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LaTeX</title>

    <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
    <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.8/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.8/mode/stex/stex.min.js"></script>
</head>

<body>
    <textarea></textarea>
    <script>
        const easyMDE = new EasyMDE({
            overlayMode: {
                mode: CodeMirror.getMode({}, 'stex'),
                combine: true,
            },
            spellChecker: false,
        });
    </script>
</body>
</html>

image

I hope this helps you!

@naitsok
Copy link
Author

naitsok commented Sep 14, 2022

Dear Jeroen,
Thanks a lot for such a detailed and clear answer! Now surely I will be able to make it working.
With best regards, Konstantin

@sn3p sn3p mentioned this issue Jan 11, 2023
Open
@sn3p
Copy link

sn3p commented Jan 13, 2023 •
edited
Loading

Since exposing CodeMirror isn't an options anymore, I've came up with a workaround that might work for other as well.
It basically comes down to applying the mode after initialization:

const easyMDE = new EasyMDE({
  spellChecker: false
});

const stexMode = easyMDE.codemirror.constructor.getMode({}, "stex");

easyMDE.codemirror.setOption("mode", stexMode);

You might need to combine/multiplex the desired mode with the "gfm" mode, for example see:
https://discuss.codemirror.net/t/combine-multiple-modes-htmlmixed-and-stex/3299

@Ionaru a possible bug I encountered is when using overlayMode, options in parsingConfig are ignored.
See https://codepen.io/snap/pen/xxJrdaq. Thoughts? I can create a separate issue if you like.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sn3p @Ionaru @naitsok