I am still working on getting the design right for this component. But the functionality is there. This is powered by PyScript.
I plan on eventually using this component for code snippets in my blog posts, giving the reader the ability to test out the code in the browser.
A standard markdown code block is used to include the sample code. But additional meta fields are used to enable the live code editing and execution feature. A custom react component using Monaco Editor and PyScript is used to render the code block and provide the interactive editing experience.
Here is the raw mdx content for the first half of this page:
---
title: "Python code playground, powered by PyScript"
description: "An MDX component that allows readers to edit and execute Python code examples in the browser using PyScript."
date: 2024-04-10
tags:
- python
- javascript
---
I am still working on getting the design right for this component. But the functionality
is there. This is powered by [PyScript](https://pyscript.net/).
I plan on eventually using this component for code snippets in my blog posts, giving the
reader the ability to test out the code in the browser.
```python live="true" packages="numpy,pandas" codeId="1" fileName="python_playground.py"
import numpy as np
import pandas as pd
def main():
# Try out some Python code here..
# You can use numpy and pandas as well.
print("42")
main()
```