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
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!