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

Question

I have the following program (using skulpt) which generates python output in the browser on hitting "run".我有以下程序（使用 skulpt），它在浏览器中点击“运行”时生成 python output。 The output code is in the "pre" tags. output 代码在“pre”标签中。 I have tried various different things to apply the CSS to the executed output, but it isn't working.我尝试了各种不同的方法来将 CSS 应用于已执行的 output，但它不起作用。

This is my css这是我的 css

<style>
.running {
  border: 20px outset black ;
  background-color: black;    
  text-align: center;
  p: color:white;
  pre
{
    white-space: pre-wrap !important;
}   

}
</style>

This is the HTML part of the code.这是代码的 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>

I assume it is this that is responsible for generating the output code:我假设这是负责生成 output 代码的：

<pre id="output" ></pre>

This is the javascript functionality (for reference) that produces the output code这是生成 output 代码的 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>

Question: How do I format the code such that the background is black (this works) but the output code on pressing "run" is WHITE.问题：如何设置代码的格式，使背景为黑色（可行）但按下“运行”时的 output 代码为白色。

I don't know if it is due to missing out an ID - I notice the pre tags in the HTML have an id or incorrect use of the tags in the css. An explanation along with a solution (code) would be appreciated.我不知道这是否是由于缺少 ID - 我注意到 HTML 中的前置标签有一个 ID 或 css 中标签的错误使用。将不胜感激解释和解决方案（代码）。

Other things I have tried in the CSS: (doesn't work either)我在 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>

Answer 1

It seems p: color: white;好像p: color: white; is invalid css, since p is an element not a style property. css 无效，因为p是元素而不是样式属性。 Instead, this line should be just color: white;相反，这条线应该只是color: white; . .

Example snippet below:下面的示例片段：

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-09 14:18:31

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-09 14:18:31

解决方案1
1 已采纳 2020-10-09 14:18:31