skulpt搭建Python在线编译器(一):下载、安装
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.原生页面解析
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
|
2.CodeMirror美化
CodeMirror是一块支持代码高亮的编辑器,支持多种语法格式
官网链接:https://codemirror.net/
github地址:https://github.com/codemirror/CodeMirror
下载下来的目录界面如下:
addon:存放搜索匹配,折叠代码等插件
lib:核心库,核心CSS
mode:各种语言的风格和语法定义
theme:编辑器主题风格样式
使用CodeMirror必须引入codemirror.css和codemirror.js
1 2 |
|
其余的按照你的要求自己选择引用什么,这个地方因为我是在线python编译器,所以我引入了python的语言风格
1 2 |
|
同时,需要修改codemirror的配置信息:
1 2 3 4 5 6 7 8 9 10 11 |
|
3.界面优化
初始界面显示的比较丑,这个地方我是引入iview,用来美化整个页面。整个代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
|
4.问题
上面虽然我们使用skulpt和codemirror制作了一个简单的在线python编译器。但是还是发现一些问题。
问题1:关于turtle部分,画图canvas部分出现一个问题,就是canvas的画图部分太小,而且我经过尝试,不论是修改css 还是直接改canvas都无法让画布变大比较大,这个地方一直没想明白。