javascript - 使用 Skulpt 更改 HTML 页面上代码输出的 css
问题描述
我有以下程序(使用 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>
解决方案
这似乎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>
推荐阅读
- django - 将验证错误消息添加到基于类的视图 (CreateView)
- java - JPA:多态关联和联接表
- swift - Swift 用于浮点推理的 int 字面量如何工作?
- python - 使用正则表达式 python 在删除特殊字符时保留笑脸/表情符号
- jquery - 如何避免阻塞预览数据输出?
- android - 如何使用 GET requet API 在 Kotlin 中使用 Basic Auth 进行登录?
- vba - 正常工作的例程中的 VBA 运行时错误“1004”
- hadoop - 将 Hive 表导出到 hdfs 中的 csv/tsv
- lua - lua中的typedef函数关键字
- css - PrimeNg styleClass 不会改变 p-panel 的样式