上一节中,我们下载并安装使用了基于Skulpt 的Python在线编译器,实现了基础功能冲,但是原生的页面比较难看,所以我们打算重新修改页面。让页面变得好看一些。
这是效果图: http://python.longkui.site/
1.原生页面解析
<html> <head> <script src="skulpt.min.js" type="text/javascript"></script> <script src="skulpt-stdlib.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> function outf(text) { var mypre = document.getElementById("output"); // mypre.innerHTML = mypre.innerHTML + text; //文字输出 } function builtinRead(x) { if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) throw "File not found: '" + x + "'"; return Sk.builtinFiles["files"][x]; } function runit() { console.log("runit is going") var prog = document.getElementById("yourcode").value; //读取用户输入的内容 var mypre = document.getElementById("output"); //获取输出框 mypre.innerHTML = ''; Sk.pre = "output"; Sk.configure({ output: outf, read: builtinRead, __future__: Sk.python3 }); (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas'; var myPromise = Sk.misceval.asyncToPromise(function () { return Sk.importMainWithBody("<stdin>", false, prog, true); }); myPromise.then(function (mod) { console.log('success'); //执行成功,显示success }, function (err) { console.log(err.toString()); //执行失败,在控制台显示 err }); } </script> <!-- 标题部分 --> <h3>Try This</h3> <form> <!-- textarea是用户输入代码的部分,在此区域填写代码,每次运行都会显示 --> <textarea id="yourcode" cols="80" rows="10"> </textarea><br /> <!-- 按钮:开始执行 --> <button type="button" onclick="runit()">Run</button> </form> <!-- 文字输出部分 --> <pre id="output"></pre> <!-- 画图输出部分 --> <div id="mycanvas"></div> </body> </html>
2.CodeMirror美化
CodeMirror是一块支持代码高亮的编辑器,支持多种语法格式
官网链接:https://codemirror.net/
github地址:https://github.com/codemirror/CodeMirror
下载下来的目录界面如下:
![](https://www.longkui.site/wp-content/uploads/2020/06/微信截图_20200627192635.png)
lib:核心库,核心CSS
mode:各种语言的风格和语法定义
theme:编辑器主题风格样式
使用CodeMirror必须引入codemirror.css和codemirror.js
<link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css"> <script src="codemirror/lib/codemirror.js"></script>
其余的按照你的要求自己选择引用什么,这个地方因为我是在线python编译器,所以我引入了python的语言风格
<!--引入python.js--> <script src="codemirror/mode/python/python.js"></script>
同时,需要修改codemirror的配置信息:
var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, { mode: "python", //默认脚本编码,python 模式 lineNumbers: true, //是否显示行号 lineWrapping: true, //是否强制换行 foldGutter:true, // 启用行槽中的代码折叠 matchBrackets:true,// 匹配结束符号,比如"]、}" autoCloseBrackets: true , // 自动闭合符号 styleActiveLine:true, // 显示选中行的样式 indentUnit: 4, // 缩进单位为4 });
3.界面优化
初始界面显示的比较丑,这个地方我是引入iview,用来美化整个页面。整个代码如下:
<html> <head> <meta charset="utf-8"> <script src="skulpt.min.js" type="text/javascript"></script> <script src="skulpt-stdlib.js" type="text/javascript"></script> <link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css"> <link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css"> <link href="codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css"> <script src="codemirror/lib/codemirror.js"></script> <script src="codemirror/mode/python/python.js"></script> <link href="css/index.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script> <title>Python-Online</title> </head> <body> <div id="app" > <div class="function"> <i-button type="primary" icon="md-play" onclick="runit()">运行</i-button> <i-button type="error" icon="ios-trash" @click="clear">清除所有</i-button> </div> <div id="" class="page"> <div id="" css="workbench"> <form class="index-form"> <textarea id="yourcode" class="index-form">import turtle turtle.begin_fill() turtle.fillcolor('red') for x in range(4): turtle.forward(100) turtle.right(90) turtle.end_fill() turtle.hideturtle() turtle.done() print("Hello World") </textarea> </form> <div class="outputd"> <div id="mycanvas" class="canvas-ouput" ></div> <div class="output"> <pre id="output"> </pre> </div> </div> </div> </div> </div> <script> new Vue({ el: '#app', data: { }, methods: { clear:function(event){ CodeMirrorEditor.setValue(""); var mypre = document.getElementById("output"); mypre.innerHTML = ""; }, } }) //新增window.onload 事件,用来初始化codemirror // window.onload = function () { // //console.log("onload is going") // // 添加codemirror 模式 var myTextarea = document.getElementById('yourcode'); var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, { mode: "python", lineNumbers: true, lineWrapping: true, foldGutter:true, matchBrackets:true, autoCloseBrackets: true , styleActiveLine:true, indentUnit: 4, }); CodeMirrorEditor.setSize("100%","100%"); // } function outf(text) { var mypre = document.getElementById("output"); mypre.innerHTML = mypre.innerHTML + text; } function builtinRead(x) { if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) throw "File not found: '" + x + "'"; return Sk.builtinFiles["files"][x]; } function runit() { var prog =CodeMirrorEditor.getValue(); var mypre = document.getElementById("output"); mypre.innerHTML = ''; Sk.pre = "output"; Sk.configure({ output: outf, read: builtinRead, __future__: Sk.python3 }); (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas'; var myPromise = Sk.misceval.asyncToPromise(function () { return Sk.importMainWithBody("<stdin>", false, prog, true); }); myPromise.then(function (mod) { console.log('success'); }, function (err) { console.log(err.toString()); mypre.innerHTML=err.toString(); }); } </script> </body> </html>
4.问题
上面虽然我们使用skulpt和codemirror制作了一个简单的在线python编译器。但是还是发现一些问题。
问题1:关于turtle部分,画图canvas部分出现一个问题,就是canvas的画图部分太小,而且我经过尝试,不论是修改css 还是直接改canvas都无法让画布变大比较大,这个地方一直没想明白。
返回目录:开发与教程/python