skulpt搭建Python在线编译器

特此声明：非原创，也是找了好多时间才发现大佬的作品，贴过来了，仅供参考

1.python在线编译器的解决方案

方案一：vscode web版（vscode online）
大名鼎鼎的vscode 推出了web版，也就是说可以在网页上进行编程了。
github地址：https://github.com/microsoft/vscode
可以按照他的教程进行部署搭建到自己的服务器上。后期我也会写一个搭建部署过程。
PS:国内腾讯收购了coding。然后变成了现在的coding.net。
传送门：https://coding.net/
他里面的coding studio 和vsconde 简直一毛一样。

方案二：Anaconda
Anoconda 包含了一个包管理工具和一个Python管理环境，同时附带了一大批常用数据科学包，也是数据分析的标配。其中里面的jupyter notebook 可以实现在线编写python的功能。

以上方案都不能满足的我要求，我和核心要求之一是要实现python turtle 画图。所以最终选择了Skulpt。
Skulpt是一个完全依靠浏览器端模拟实现Python运行的工具。可以依靠浏览器搭建出在线python编译器。
在线测试地址：http://python.longkui.site

基于Skulpt的在线python编译最终实现效果

2.下载Skulpt与安装

GitHub地址：https://github.com/skulpt/skulpt
主要是需要dist目录下的skulpt.min.js 和skulpt-stdlib.js 这两个文件
如果链接丢失或者没有相关文件可以用下面的：

https://box356.lanzous.com/ihev5hvuged

dist 目录下还有一个index 文件，这个就是启动文件。如果我们双击运行后，界面是这样的：

这便是一个最基础的界面。但是还有问题，这个时候你在这里面写python代码并点击“Run”是会报错的。主要原因是因为引用问题

引用部分如下：

<script src="../skulpt.min.js" type="text/javascript"></script> 
<script src="../skulpt-stdlib.js" type="text/javascript"></script>

将代码中的第9行和第10行修改为如下形式：


<script src="skulpt.min.js" type="text/javascript"></script> 
<script src="skulpt-stdlib.js" type="text/javascript"></script>

这个时候再运行index.html，并在框中输入python 代码点击运行便可出现效果。

_______________________________________________________________________________________

们下载并安装使用了基于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 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
下载下来的目录界面如下：

addon：存放搜索匹配，折叠代码等插件
lib:核心库，核心CSS
mode:各种语言的风格和语法定义
theme:编辑器主题风格样式

使用CodeMirror必须引入codemirror.css和codemirror.js

1 2	`<link href="codemirror/lib/codemirror.css"` `rel="stylesheet"` `type="text/css">` `<script src="codemirror/lib/codemirror.js"></script>`

其余的按照你的要求自己选择引用什么，这个地方因为我是在线python编译器，所以我引入了python的语言风格

1 2	`<!--引入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，用来美化整个页面。整个代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

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

<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都无法让画布变大比较大，这个地方一直没想明白。

skulpt搭建Python在线编译器

猜你喜欢