似乎
我有下面的程序(使用skulpt(，它在点击"时在浏览器中生成Python输出；运行"；。输出代码在"；预"；标签。我尝试了各种不同的方法来将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中的前标签有一个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>
p: color: white;是无效的css，因为p是一个元素而不是样式属性。相反，这一行应该只是color: white;。
下面的示例片段：
.running {
border: 20px outset black;
background-color: black;
text-align: center;
color:white;
pre {
white-space: pre-wrap !important;
}
}<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">Test output should be white!</pre>
<!-- If you want turtle graphics include a canvas -->
<div id="mycanvas">
</div>