Introduction to py-script
JavaScript was the only language which can be run in browsers. But now we can also run python in browser (client side or at frontend). The developer of https://anaconda.org/ unveiled quite a surprising project — py-script. It is a JavaScript framework which allows users to run python and use its libraries in browsers like JavaScript itself.
Official py-script website: https://pyscript.net/
py-script on GitHub: https://github.com/pyscript/pyscript
We can link py-script to our HTML document in the following two ways:
1. Using CDN links
We can use CDN links to link py-script framework to our HTML document. CDN link consists of following two links:
CSS: <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
JS: <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Copy and paste these link in your HTML documents, and now you can write python directly in your HTML document.
2. Downloading the py-script
Link to download py-script: https://github.com/pyscript/pyscript/archive/refs/heads/main.zip
Download py-script from this link, then unzip it, and place the folder named pyscript-main inside your HTML document's folder and then link it locally inside your HTML document by
<link rel="stylesheet" href="path/to/pyscript.css" />
<script defer src="path/to/pyscript.js"></script>
Writing Python code in HTML doc
After linking the files to your HTML document, you just have to write <py-script> </py-script> tag and inside it, you can write the python code.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- py-script CDN links -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<title>py-script</title>
</head>
<body>
<h1>This text is written in HTML</h1> <!-- HTML -->
<py-script>
print("This text is written in Python") # Python
</py-script>
</body>
</html>
As you can see in the above code, we didn't get syntax highlighting for python code because it is written in HTML document. Hence, the code editors will treat python code as HTML plaintext. By using the extensions or other tools provided by the respective code editors, we can get syntax highlighting for py-script.
Output in Browser
Note: All the links and information provided here, are available at py-script official website https://pyscript.net/ . All the information given here is taken from the official py-script sources.
Top comments (0)