-1

I'm trying to create a code editor in react. I'm alredy done with outputting console.log value to my custom console component. I did this by overriding the console.log but now i'm stuck how to output for example python print: "print('hello')". Source from which i overridden the console.log

Vladimir Nekoz
  • 1

1 Answers1

0

Do you want to create an editor in the browser, that accepts python code and outputs its results when run?

For Python, you could use Brython.

<head>
  <script src="https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js"></script>
  <script type="text/python">
      from browser import window

      def execute(code):
          return eval(code)

      window.python = execute
  </script>  
  <script>
    function runPython() {
      const code = document.getElementById('input').value
      if (!window.python) {
        // Python not loaded yet
        return setTimeout(runPython, 1000);
      }
      const output = window.python(code);
      document.querySelector('.output').innerText = output
    }
  </script>
</head>
<body onload="brython()">
  <textarea id="input" rows="4">
1 + 2
  </textarea>
  <button onclick="runPython()">Run</button>
  <pre class="output"></pre>
</body>

Creating a code editor in the browser is a huge challenge. Best of luck!

tomfa
  • 237
  • 2
  • 8