PyScript:在HTML段落之间运行代码块?

huangapple go评论93阅读模式
英文:

PyScript: running code blocks in between paragraphs in HTML?

问题

I've been looking for a way to run interactive python code blocks on my personal website, and PyScript looked to be a good solution. However, it seems like PyScript is currently designed to always output at the end of HTML tags, rather than in between sections of HTML code.

<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<div>   
    <div>
        <py-env>
            <py-script src="indexcode.py" std-out="output">
            </py-script>
        </py-env>
    </div>
</div>

<div id="output"></div>

<p>This is a block of HTML</p>

In the code above, I tried to define a separate

tag to take the output of my PyScript code using the std-out attribute, but this doesn't seem to affect the position of the output, (where the code is outputted, then the "This is a block of HTML" section follows.)

Screenshot of resulting code on my website

I'm wondering if there's any good solution to this? None of the examples on PyScript's website had anything close to this. I understand that PyScript's relatively new, so it's possible that this just isn't a feature yet.

英文:

I've been looking for a way to run interactive python code blocks on my personal website, and PyScript looked to be a good solution. However, it seems like PyScript is currently designed to always output at the end of HTML <body> tags, rather than in between sections of HTML code.

&lt;script defer src=&quot;https://pyscript.net/latest/pyscript.js&quot;&gt;&lt;/script&gt;
&lt;div&gt;   
    &lt;div&gt;
    &lt;py-env&gt;
        &lt;py-script src=&quot;indexcode.py&quot; std-out=&quot;output&quot;&gt;
        &lt;/py-script&gt;
    &lt;/py-env&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div id=&quot;output&quot;&gt;&lt;/div&gt;

&lt;p&gt;This is a block of HTML&lt;/p&gt;


In the code above, I tried to define a separate <div> tag to take the output of my PyScript code using the std-out attribute, but this doesn't seem to affect the position of the output, (where the code is outputted, then the "This is a block of HTML" section follows.)

Screenshot of resulting code on my website

I'm wondering if there's any good solution to this? None of the examples on PyScript's website had anything close to this. I understand that PyScript's relatively new, so it's possible that this just isn't a feature yet.

答案1

得分: 0

PyScript引入了一个新的“内置”函数(即无需导入的函数),称为display(),用于将文本内容发送到页面。 display()接受一个可选的关键字参数target,用于指定要将内容写入的DOM元素的ID。如果未指定target,则内容将显示为当前(或)标记的子元素。

输出顺序如下:

Up Top
AAA
One
BBB
Two
CCC
英文:

PyScript introduces a new "built-in" function (i.e. a function you do not need to import) called display() for this use case, of sending text content to the page. display() takes an optional keyword argument called target, which specifies the ID of a DOM element to write the content to. If target is not specified, the content appears as a child element of the current &lt;py-script&gt; (or &lt;py-repl&gt;) tag.

&lt;div id=&quot;verytop&quot;&gt;&lt;/div&gt;

&lt;p&gt;AAA&lt;/p&gt;

&lt;py-script&gt;
    display(&quot;One&quot;)
&lt;/py-script&gt;

&lt;p&gt;BBB&lt;/p&gt;

&lt;py-script&gt;
    display(&quot;Two&quot;)
&lt;/py-script&gt;

&lt;p&gt;CCC&lt;/p&gt;

&lt;py-script&gt;
    display(&quot;Up Top&quot;, target=&quot;verytop&quot;)
&lt;/py-script&gt;

The output order is then:

Up Top
AAA
One
BBB
Two
CCC

huangapple
  • 本文由 发表于 2023年6月8日 22:42:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/76433025.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定