使用 Skulpt 更改 HTML 页面上代码输出的 css答案

【问题标题】：Changing the css of code ouput on an HTML page with Skulpt使用 Skulpt 更改 HTML 页面上代码输出的 css
【发布时间】：2020-10-09 14:04:56
【问题描述】：

我有以下程序（使用 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>

【问题讨论】：

标签： javascript html css skulpt

【解决方案1】：

似乎p: color: white; 是无效的css，因为p 是一个元素而不是样式属性。相反，这一行应该只是color: white;。

以下示例 sn-p：

.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>

【讨论】：