Embedding Python inside HTML

We first need the script files that help us in allowing the runtime of python from the pyscript CDN.  So, we will have to add a few link tags and the script tag that will bring in the Python Pyodide runtime.

<link rel=”stylesheet” href=”https://pyscript.net/alpha/pyscript.css” />

<script defer src=”https://pyscript.net/alpha/pyscript.js”></script>

The first link for the stylesheet will allow us to format the output generated from the python code. The next link which is a script tag will bring in the javascript source file that will work with the browser for interacting with the python runtime. Finally, we can use the pyscript tags for embedding the python code.

The python code can be embedded by adding inside the  <py-script> tags.  We can use the  <py-script> tags to write python code. Normal python code can be embedded inside the <py-script> tags. The tags are not self-closing and hence like other HTML tags it needs a closing tag as </py-script>

<py-script>
    #python code
</py-script>

The python code inside the py-script tags should be indented, as you write the python code. The formatting of the indentation is not strictly from the start of the line, though it needs to be consistent throughout while being inside the tags.

Example 1:

Here, we have used a simple python code for printing a variable name. The print function is parsed inside the pyscript that will in turn process the python and display the result as a native HTML tag. Though output from pyscript tags is native HTML, the generation is done with the help of Pyodide and WASM which generates the native HTML from the pyscript tags.

The webpage takes a few seconds to load in its entirety of the webpage. That’s because the python code has to be rendered and converted to a native HTML.

Output:

In this article, we will cover how we can create a basic webpage with Pyscript

The Pyscript is a python framework/library that allows us to write python code inside HTML directly with the help[ of pyscript tag. Pyscript is a new project and is currently under development, but it has gained a lot of attention recently. It can make a page generate dynamically with the help of python. We will see the basic web page created with the pyscript library in this article.