我有以下程序(使用 skulpt),它在点击“运行”时在浏览器中生成 python 输出。输出代码在“pre”标签中。我尝试了各种不同的方法来将 CSS 应用于执行的输出,但它不起作用。
这是我的CSS
<style>
.running {
border: 20px outset black ;
background-color: black;
text-align: center;
p: color:white;
pre
{
white-space: pre-wrap !important;
}
}
</style>
这是代码的 HTML 部分。
<h3>Heading here</h3>
<form>
<textarea id="yourcode" cols="40" rows="10">
print("Hello World")
</textarea><br />
<button type="button" onclick="runit()">Run</button>
<button type="button" onclick="clearit()">Clear</button>
<button type="button" onclick="clearit()">--X--</button>
<button type="button" onclick="clearit()">--Y--</button>
<button type="button" onclick="clearit()">--Z--</button>
</form>
<br>
<br>
<br>
<div class="running">
<pre id="output" ></pre>
<!-- If you want turtle graphics include a canvas -->
<div id="mycanvas">
</div>
我认为这是负责生成输出代码的原因:
<pre id="output" ></pre>
这是生成输出代码的 javascript 功能(供参考)
<body>
<center>
<script type="text/javascript">
// output functions are configurable. This one just appends some text
// to a pre element.
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];
}
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() {
var prog = document.getElementById("yourcode").value;
var mypre = document.getElementById("output");
mypre.innerHTML = '';
Sk.pre = "output";
Sk.configure({output:outf, read:builtinRead});
(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());
});
}
function clearit(){
document.getElementById('yourcode').value = 'Your awesome code here';
document.getElementById('output').innerHTML = '';
}
</script>
问题:如何格式化代码以使背景为黑色(这可行),但按“运行”时的输出代码为白色。
我不知道是不是因为遗漏了一个 ID - 我注意到 HTML 中的 pre 标签有一个 id 或者 css 中的标签使用不正确。将不胜感激解释以及解决方案(代码)。
我在 CSS 中尝试过的其他事情:(也不起作用)
<style>
.running {
border: 20px outset black ;
background-color: black;
text-align: center;
p: color:white;
pre {
color:white;
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
}
</style>