python编辑代码的页面_使用CodeMirror实现Python3在线编辑器的示例代码
一、编写页面
主要是引入相关的css文件和js文件,这里采用简单插入link和script标签的形式。
Document
click
二、配置CodeMirror
在index.js中配置CodeMirror
window.onload = function () {
var el = document.getElementById("editor");
var version = "# version: Python3\n\n";
var codeAreaTip = "# please edit your code here:\n";
var codeStart = "# code start\n\n";
var codeEnd = "# code end\n\n";
var codeTip = "'''\nThis function is the entry of this program and\nit must be return your answer of current question.\n'''\n";
var code = "def solution():\n\tpass";
var initValue = version + codeAreaTip + codeStart + codeEnd + codeTip + code;
var myCodeMirror = CodeMirror.fromTextArea(el, {
mode: "python", // 语言模式
theme: "leetcode", // 主题
keyMap: "sublime", // 快键键风格
lineNumbers: true, // 显示行号
smartIndent: true, // 智能缩进
indentUnit: 4, // 智能缩进单位为4个空格长度
indentWithTabs: true, // 使用制表符进行智能缩进
lineWrapping: true, //
// 在行槽中添加行号显示器、折叠器、语法检测器
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
foldGutter: true, // 启用行槽中的代码折叠
autofocus: true, // 自动聚焦
matchBrackets: true, // 匹配结束符号,比如"]、}"
autoCloseBrackets: true, // 自动闭合符号
styleActiveLine: true, // 显示选中行的样式
});
// 设置初始文本,这个选项也可以在fromTextArea中配置
myCodeMirror.setOption("value", initValue);
// 编辑器按键监听
myCodeMirror.on("keypress", function() {
// 显示智能提示
myCodeMirror.showHint(); // 注意,注释了CodeMirror库中show-hint.js第131行的代码(阻止了代码补全,同时提供智能提示)
});
var test = document.getElementById("test");
test.onclick = function() {
var value = myCodeMirror.getValue();
axios.post("http://localhost/api/runcode", {
code: value
}).then(function(res) {
console.log(res);
});
};
};
三、后台调用python shell
过程如下:
在接收的代码字符串后面添加print(solution())用于打印结果
将第一步处理后的字符串写入一个文件中这里是code/code.py
使用child_process模块的exec方法调用shell执行python code/code.py命令,获取打印结果
const express = require("express");
const { exec } = require("child_process");
const router = express.Router();
router.post("/api/runcode", (req, res) => {
let code = req.body.code;
fs.writeFile("code/code.py", code+"\nprint(solution())", (err) => {
let command = "python code/code.py";
exec(command, (err, stdout, stdin) => {
if(err){
let reg = /[\d\D]*(line\s\d)[\d\D]*?(\w*(?:Error|Exception).*)/im;
let matchArr = reg.exec(err.message);
matchArr.shift();
res.send(matchArr.join(", "));
}
else
res.send(stdout);
});
});
});
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
python编辑代码的页面_使用CodeMirror实现Python3在线编辑器的示例代码相关推荐
- python图形代码怎么写_【Python3-API】定制化图像接口示例代码
Python3-urllib3-API定制化图像接口示例代码 AccessToken获取可以参考:http://ai.baidu.com/forum/topic/show/497663(Python3 ...
- python怎么换背景颜色_用opencv给图片换背景色的示例代码
图像平滑 模糊/平滑图片来消除图片噪声 OpenCV函数:cv2.blur(), cv2.GaussianBlur(), cv2.medianBlur(), cv2.bilateralFilter() ...
- python三人同行七十稀_【算法入门第二章练习题】(示例代码)
习题2-1 水仙花数 输出100~999中的所有水仙花数.若3位数ABC满足ABC=A2+B2+C2,则称其为水仙花数.例如:153=12+52+32,所以153是水仙花数. 解析:只有1000个数, ...
- python 3.5.2页面_笔者操作win10系统搭建Python 3.5.2开发环境的详细方案
win10系统性能稳定受到广大用户的喜爱,但也不尽完美,在使用过程中,难免会遇到win10系统搭建Python 3.5.2开发环境的问题.碰到win10系统搭建Python 3.5.2开发环境的问题. ...
- 支持向量机python代码_用TensorFlow实现多类支持向量机的示例代码
这篇文章主要介绍了用TensorFlow实现多类支持向量机的示例代码,现在分享给大家,也给大家做个参考.一起过来看看吧 本文将详细展示一个多类支持向量机分类器训练iris数据集来分类三种花. SVM算 ...
- python画三维立体图完整代码_如何用Matplotlib 画三维图的示例代码
最基本的三维图是由(x, y, z)三维坐标点构成的线图与散点图,可以用ax.plot3D和ax.scatter3D函数来创建,默认情况下,散点会自动改变透明度,以在平面上呈现出立体感 三维的线图和散 ...
- python按照号段生成手机号接收验证码_django 发送手机验证码的示例代码
一.流程分析: 1.用户在项目前端,输入手机号,然后点击[获取验证码],将手机号发到post到后台. 2.后台验证手机号是否合法,是否已被占用,如果通过验证,则生成验证码,并通过运行脚本,让短信运营商 ...
- python数据库教程_Python连接mysql数据库及简单增删改查操作示例代码
1.安装pymysql 进入cmd,输入 pip install pymysql: 2.数据库建表 在数据库中,建立一个简单的表,如图: 3.简单操作 3.1查询操作 #coding=utf-8 #连 ...
- python中if else语句_python 中if else 语句的作用及示例代码
引入:if-else的作用,满足一个条件做什么,否则做什么. if-else语句语法结构 if 判断条件: 要执行的代码 else: 要执行的代码 判断条件:一般为关系表达式或bool类型的值 执行过 ...
最新文章
- C#进行Visio二次开发之电气线路停电分析逻辑
- sql语句的简单记录
- 同行评审以权谋私,让投稿人多引用自己文章,爱思唯尔将彻查此事
- cmd输入pip报错_安装pip报错:WARNING: Retrying (Retry(total=4,...
- android开发超级群(500人)
- js验证开始日期不能大于结束日期_js前台判断开始时间是否小于结束时间
- jQuery 基本操作
- Mysql开启远程连接方法
- jquery :nth-child()选择器的简单应用
- 解决”java.lang.UnsatisfiedLinkError: Native Library .dll already loaded in another classloader”的问题
- gitz之忽略warning:LF will be replaced by CRLF
- Node+fs+定时器(node-schedule)+MySql
- 工具的使用——vs2013(三)
- 乔布斯的这 3 个故事依然激励着我
- 《Spring实战(第四版)》pdf
- qunee for html5,Qunee for HTML5(二)
- ramda 为 占位符 添加类型
- Python环境与PyCharm编辑器的安装教程
- opj线性表Placing apples 题解
- OSChina 周三乱弹 ——猫和铲屎官总要疯一个
热门文章
- 十三、开多线程,咱们一起来斗图
- 免费报名!百度大脑开放日·互联网内容安全线上专场来袭
- 融合 MF 和 RNN 的电影推荐系统
- HDU1001 Easy h-index
- python英语单词 扇贝英语安卓下载_扇贝单词app下载-扇贝单词英语版 安卓版v3.6.503-pc6手机下载...
- 【虚拟化】Linux中安装配置Docker
- 【JUC系列】Future异步回调模式
- C++——《算法分析与设计》实验报告——最长公共子序列问题
- BugKuCTF WEB 本地包含
- 模拟电梯1.0(类与对象实验)