python编辑代码的页⾯_使⽤CodeMirror实现Python3在线编辑
器的⽰例代码
⼀、编写页⾯
网页设计实训个人总结主要是引⼊相关的css⽂件和js⽂件，这⾥采⽤简单插⼊link和script标签的形式。
Document
click
⼆、配置CodeMirror
在index.js中配置CodeMirror
var el = ElementById("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);
// 编辑器按键监听
链表怎么调节长度("keypress", function() {
// 显⽰智能提⽰
myCodeMirror.showHint(); // 注意，注释了CodeMirror库中show-hint.js第131⾏的代码(阻⽌了代码补全，同时提供智能提⽰) });
var test = ElementById("test");
var value = Value();
axios.post("localhost/api/runcode", {
code: value
}).then(function(res) {
console.log(res);
});
};
};
python入门教程编辑器三、后台调⽤python shell
css3新特性思维导图过程如下：
在接收的代码字符串后⾯添加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 = de;
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 = (ssage);
matchArr.shift();
res.send(matchArr.join(", "));
}
else
res.send(stdout);
gitlab 安装});
});
});
效果：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。