feat: add interactive Python code editor for tutorials

- Monaco Editor + Pyodide integration for browser-based Python execution
- MDX component for easy tutorial integration
- Added example to Python intro tutorial

Fixes #1128

Author: Gupta-02

docs/python/intro-python.md

@@ -45,7 +45,7 @@ Here is a simple Python program that prints "Hello, World!":
 
 ```python
 print("Hello, World!")
-````
+```
 
  Output:
 
@@ -55,6 +55,27 @@ Hello, World!
 
 You can run this code in any Python interpreter, and it will display the message on the screen.
 
+### Try Python Interactive Code Editor
+
+Try running Python code directly in your browser! Edit the code below and click "Run" to see the output:
+
+<PythonCodeEditor code={`# Try editing this Python code!
+print("Hello, World!")
+print("Welcome to Python!")
+
+# You can also try:
+name = "Python Learner"
+print(f"Hello, {name}!")
+
+# Mathematical operations
+result = 2 + 3 * 4
+print(f"2 + 3 * 4 = {result}")
+
+# Lists and loops
+fruits = ["apple", "banana", "orange"]
+for fruit in fruits:
+    print(f"I like {fruit}s")`} />
+
 
 ### Good to know
 

package-lock.json

@@ -38,6 +38,7 @@
     "@floating-ui/react": "^0.27.8",
     "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.0.0",
+    "@monaco-editor/react": "^4.7.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-avatar": "^1.1.7",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -57,6 +58,7 @@
     "framer-motion": "^12.7.5",
     "lucide-react": "^0.503.0",
     "prism-react-renderer": "^2.3.0",
+    "pyodide": "^0.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.5.0",