Skip to content

Instantly share code, notes, and snippets.

@alfredomaussa

alfredomaussa/InlineTemplates_Pyscript.html

Created May 3, 2022 05:03
Show Gist options
  • Save alfredomaussa/92d911684ff8799a69db08a45297cac1 to your computer and use it in GitHub Desktop.
Save alfredomaussa/92d911684ff8799a69db08a45297cac1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

This maybe is a bug but could be useful. (*Note: you should delete the css pyscript import)

It could be used as custom templates inline. I was looking for something like:

    <py-script> 
<h1>h1 Hello {name}, message.</h1>
    </py-script>

But it try to use <\h1> as a variable name and gives an error, neither work with quotes. Accidentally discovere it could be done calling variables inside print():

print(f"<{tag}>{content}</{tag}>")

Allowing to use more complex inline templates

print(f'<{tag} class="{myClassName}" style="background-color: {myColor}">{content}</{tag}>')

HTML view as image. image

Raw
InlineTemplates_Pyscript.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Todo App</title>
<link rel="icon" type="image/png" href="favicon.png" />
<!-- <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> -->
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body class="container">
<py-script>
tag="h1"
content="holaa"
myClassName="acitve"
myColor="red"
print(f'<{tag} class="{myClassName}" style="background-color: {myColor}">{content}</{tag}>')
def addp(tag,content):
print(f"<{tag}>{content}</{tag}>")
for i in range(5):
addp(f"h{i+1}",f"Header {i+1}")
"<h1>h1 header normal py</h1>"
</py-script>
<!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
<h1>Normal header</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment