Run functionality with Monaco Editor

0
votes

I wanted to use the Monaco Editor for my project and I want to run the server side languages like C# or node in my Monaco editor(https://github.com/Microsoft/monaco-editor/) which is a open source editor from Microsoft.

Here are few examples for that.

https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-rendering-glyphs-in-the-margin

https://dotnet.microsoft.com/languages

If you see the the above examples you can see they are running c# with run button I wanted to implement same functionality.

I know that I need to install run time for particular language like C# and I have that in my local machine but still I am not able to run it.

Any help will be highly appreciated.

1
visual-studio-codemonaco-editor

1 Answers

2
votes

What you see there is not a Monaco feature and is up to you to implement. How you do that, will depend largely on the language you're trying to run.

The first example (and jsFiddle and CodePen and many others) simply displays an iframe to show the result. That iframe loads a file with a unique name that contains the HTML, CSS and JavaScript code entered in the editor. You can confirm that this is what they're doing, using Chrome Dev Tools.

If you're going to run a language like C#, know that you will need full control of your web server. The flow will be something like this:

  1. The user presses the Run button.
  2. You call a web service (that you must develop), passing it the C# code and anything else needed to build a working project (like dependencies).
  3. The web service creates the project from those inputs, invokes the C# compiler, runs the resulting executable, and finally captures the output (both stdout and stderr) into string variables. Those strings are returned by the web service.
  4. Back in the browser, you display the output from the web service.

This is very doable, but getting it to perform well when your volumes pick up will be a special problem.