Python教程

Skulpt搭建Python在线编译器(二):界面优化

本文主要是介绍Skulpt搭建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都无法让画布变大比较大,这个地方一直没想明白。

 

这篇关于Skulpt搭建Python在线编译器(二):界面优化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!