loading...

I want to integrate a code editor in my platform

lord007tn profile image Raed Bahri ・1 min read

I'm working on something like Codecademy, Progate.

and I've been looking for some code editor APIs so I can integrate it into my react e-learning platform.
I want a code editor that supports customization. where every lesson has his own pre-written code ready.

don't hesitate if you can help.

Discussion

pic
Editor guide
Collapse
akashkava profile image
Akash Kava

Check monaco editor, it is what powers visual studio code and typescript playground. It is used by gitlab and code places.

Collapse
lord007tn profile image
Raed Bahri Author

Does monaco support compiling and showing the result. Like in codecademy when you type html and css there is a section aside that show the compiled code ???

Collapse
akashkava profile image
Akash Kava

It’s a basic editor will compilation feature, you can watch and create your own UI to display errors.

Thread Thread
lord007tn profile image
Raed Bahri Author

Link please?

Thread Thread
akashkava profile image
Akash Kava

microsoft.github.io/monaco-editor/...

I have created my own from this, you can check View Source and see what all things are implemented. webatoms.in/play

Collapse
saswatamcode profile image
Saswata Mukherjee

Really like Ace editor for these kinds of things! github.com/ajaxorg/ace

Collapse
lord007tn profile image
Raed Bahri Author

Does ace support compiling and showing the result. Like in codecademy when you type html and css there is a section aside that show the compiled code ???

Collapse
saswatamcode profile image
Saswata Mukherjee

You need to run the code by yourself. Ace just provides the UI required for giving a code editor like feel. If it's html/css/js you can "run" and show the output in your frontend itself. But if you plan on something like C++/Py/Go, you'd need a separate backend which supports secure remote code execution, preferably something containerised.