ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-01-30 15:04:05  阅读:277  来源: 互联网

标签:function mypre Python codemirror Skulpt Sk 编译器 var true


原文链接:这里。

 

上一节中,我们下载并安装使用了基于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都无法让画布变大比较大,这个地方一直没想明白。

 

标签:function,mypre,Python,codemirror,Skulpt,Sk,编译器,var,true
来源: https://www.cnblogs.com/longkui-site/p/15856854.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有