Brython 구현
<script src="http://brython.info/src/brython.js"></script>
<script src="http://brython.info/src/brython_stdlib.js"></script>brython.js, brython_stdlib.js를 script 태그를 이용하여 선언
<body onload="brython()">html body 부분에 onload를 사용하여 brython() 함수를 실행
<textarea id='brython_textarea' style={{
backgroundColor: '#000', color: '#fff', fontSize: '18px', overflowY: 'auto', resize: 'none',
height: '100%', width: '100%'
}} onKeyDown={onBrythonTabHandler} />사용할 textarea에 원하는 id를 지정
- onKeyDown은 React js를 사용하기 때문에 Tab처리를 위해 적용
<script type="text/python3">
from interpreter import Interpreter
Interpreter("brython_textarea")
</script>body 내부 최하단에 script 태그를 이용하여 brython_textarea라는 id를 가진 textarea에 Interpreter 기능을 부여
참고 코드
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
<!-- <meta name=robots content="index, follow"> -->
<!-- <meta name=description content=Brython > -->
<!-- <meta name=author content="Pierre Quentel"> -->
<!-- <meta name=keywords content="Python, Brython"> -->
<!-- <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1"> -->
<link rel=stylesheet href="brython.css">
<script src="http://brython.info/src/brython.js"></script>
<script src="http://brython.info/src/brython_stdlib.js"></script>
<style>
.codearea {
background-color:#000;
color:#fff;
font-family:'Oxygen Mono', Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace;
font-size:14px;
overflow:auto
}
</style>
</head>
<body onload="brython()">
<textarea id="code" class="codearea" rows="20" cols="80"></textarea>
<script type="text/python3">
from interpreter import Interpreter
Interpreter("code")
</script>
</body>
</html>
어제보다 더 발전하는 오늘