HTML Output in Pyscript

Question

I was experimenting in Pyscript and I tried to print an HTML table, but it didn't work. It seems to delete the tags and mantain just the plain text.

Why is that? I tried to search online, but being a new technology i didn't find much.

This is my code:

<py-script>
print("<table>")
for i in range (2):
    print("<tr>")
    for j in range (2):
        print("<td>test</td>")
    print("</tr>")
print("</table>")
</py-script>

And this is the output I get:

I tried to replace the print() method with the pyscript.write() method, but it didn't work too.

write() replaces all content in tag - so first create string with table and later use write() — furas
– furas, Commented May 11, 2022 at 8:33
@furas tried, but it doesn't work. it just prints "test", but thanks for the clarification! — volpoh
– volpoh, Commented May 11, 2022 at 8:38
I have reproduced your problem. The current version of Pyscript is doing something strange with strings containing HTML tags. Pyscript is stripping out the HTML tags even from raw strings. I have verified this with the Chrome debugger. Note: do not use print() to output HTML. Use the normal DOM document API calls. However, that is not working either today. Something has been broken. — John Hanley
– John Hanley, Commented May 11, 2022 at 19:16

furas · Accepted Answer · 2022-05-21 21:02:28Z

I dig in source code pyscript.py and at this moment works for me only code similar to JavaScript

For example this adds <h1>Hello</h1>

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

<py-script>

element = document.createElement('h1')
element.innerText = "Hello"
document.getElementById("output").append(element)

</py-script>

Full working code

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>PyScript Demo</title>
  <!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />-->
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>

<body>

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

<py-script>

element = document.createElement('h1')
element.innerText = "Hello"
document.getElementById("output").append(element)

</py-script>

</body>
</html>

EDIT:

After digging in source code I found that pyscript.js runs function htmlDecode() which removes all tags from code in <py-script> (and probably it also removes tags when you load code from file) and this makes problem.

See Pyscript issue: [BUG] print() doesn't output HTML tags. · Issue #347 · pyscript/pyscript

Some workaround is to use some replacement - ie. {{ }} instead of < > in code - and later use code to replace it back to < >

print( "{{h1}}Hello{{/h1}}".replace("{{", "<").replace("}}", ">") )

or more universal - using function for this

def HTML(text):
    return text.replace("{{", "<").replace("}}", ">")

print( HTML("{{h1}}Hello{{/h1}}") )

pyscript.write(some_id, HTML("{{h1}}Hello{{/h1}}") )

document.getElementById(some_id).innerHTML = HTML("{{h1}}Hello{{/h1}}")

Sometimes problem can be also pyscript.css which redefines some items and ie. <h1> looks like normal text.

One solution is to remove pyscript.css.

Other solution is to use classes from pyscript.css like in examples/index.html

<h1 class="text-4xl font-bold">Hello World</h1>

which means

print( HTML('{{h1 class="text-4xl font-bold"}}Hello{{/h1}}') )

Collectives™ on Stack Overflow

HTML Output in Pyscript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related