2022年 11月 5日

skulpt搭建Python在线编译器

 

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”是会报错的。主要原因是因为引用问题

引用部分如下：

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

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

  1.  
  2. <script src="skulpt.min.js" type="text/javascript"></script> 
  3. <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

<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
下载下来的目录界面如下：

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的配置信息：

1

2

3

4

5

6

7

8

9

10

11

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，用来美化整个页面。整个代码如下：

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

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