1

「実行」を押すとブラウザで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>
4

1 に答える 1

1

要素はスタイル プロパティではないため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>

于 2020-10-09T14:18:31.270 に答える