Guide for version 0.4.3 Beta (if not updated, this guide applies still to current version)
Opening Boyan’s Online Python interpreter looks like this, for the first time:
Scrolling down you will see the terminal that prints the version number:
There is an option to run Linux, but it can be ignored, as it does not work currently.
The Code Editor
The code editor is based on the VS Code editor, Monaco.
By default, you will get a script.py with the code above.
Let’s go over the tab system.
We have zoomed it in for this demonstration.
You can click the + icon on the right to create a new tab.
Clicking it will create a new tab that you can then switch over to.
Each tab will come with the default pregenerated code. It can be erased quickly with Ctrl + A then Backspace.
This is how it looks like with the code erased:
You can hover over a tab to rename it or close it.
The button that looks like a text cursor is a rename button, and the X button closes the tab.
Closing a tab deletes the code inside it permanently. You will be shown a warning before the tab is deleted.
Clicking on the rename button will take you to this screen:
You can rename your file here and click Rename button to finalize the changes.
You can also drag and drop tabs to change their order, as shown below.
Let’s cover some right click functions too. (You can right click on mobile device by holding down your finger on the editor)
Right clicking shows you this menu. You have Undo and Redo, and some default editor functions, and the 3 I added:
You can select code and search on Google to get an idea of what it means. Here is an example:
Searching StackOverflow is similar in a way too. Here is an example:
StackOverflow should be used to search up potentially buggy code.
You can also change your font from a variety of fonts in the editor. Simply right click and click Change Font.
There are a couple available. We may add the ability to import your own custom fonts in the future.
Below are examples of the fonts:
Default Monospace font:
Fira Code:
Source Code Pro:
JetBrains Mono:
That’s all!
Executing Code:
To execute code, simply click on the Run Code button at the top and scroll down to the terminal:
If you want a Python REPL (Read, Evaluate, Print, Loop) click on the Get Interactive terminal at the top of the page:
If you want to share your code via URL (only recommended for short code as it encodes the code in the URL) you can use the Make URL option.
You will get a notification at the top left telling you that the code has been copied over.
Here is an example of how this can look like:
https://boyan-tabakov.xyz/python3-interpreter/index.html?runcode=%20!CMNT!Enter%20some%20Python3%20code%20here%20!CL!-)\nprint("Hello,%20world!")\n%20!CMNT!A%20basic%20for%20loop.\nfor%20i%20in%20range(5)!CL!\n%20%20%20%20print("A%20for%20loop!"%20!ADD!%20str(i))\n%20!CMNT!And%20some%20basic%20user%20input.\nuser%20!EQ!%20input("What!SQ!s%20your%20name!QM!%20>>>%20")\nprint("Oh,%20hello%20"%20!ADD!%20user)This is for the default code:
# Enter some Python3 code here :-)
print("Hello, world!")
# A basic for loop.
for i in range(5):
print("A for loop!" + str(i))
# And some basic user input.
user = input("What's your name? >>> ")
print("Oh, hello " + user)Copying and pasting long codes may result in the server not allowing you to see the code. The recommended way to view and share long code is to download it via the Download my code option located on the top right.
You can also click upload code and that will upload code to the website. Note that uploaded code will replace the current tab contents (Will be fixed in an update very soon!) so open a new tab. This will be saved to your current session in your browser. Don’t worry, your code will still be there after you close and reopen the browser!
Here is an example video of downloading code:
And an example of uploading:
You can also install modules. Installing modules can be done with the Enter modules to install section.
An example is Matplotlib. Here is an example of a plotted graph on Matplotlib (Ignore the errors, this is simply how PyScript works):
That’s all! Note that not all Python modules are supported as this is a web version. We will introduce features later on to improve the overall quality of the interpreter.
Customization
Boyan’s Online Python Interpreter supports light and dark mode. Here are some examples:
Dark mode (default):
Light mode:
The transition between dark and light mode:
There is also a customize link at the top left that opens a customization menu:
There is a matrix background option, that shows a matrix rain that looks like this:
The bigger your screen, the better the effect.
There is also the option for a custom theme that can affect both light and dark mode. First toggle this switch in the customize editor:
You will see the following options appear:
For backgrounds you have 3 types:
A gradient background: Pick between 2 gradients or simply pick the same color twice to show a solid color background.
An Image background: Use a direct image url (example go to Pexels and choose an image you like and right click copy link to image) OR upload your image.
A video background: Use a Youtube video or other online video in .mp4 or supported formats to show a video background.
How to use the gradient background video:
How to use image background video:
To improve text visibility enable this option as shown in the video below:
How to use a video background:
How to use Custom CSS option:
There is also tutorials which can be accessed here:
https://boyan-tabakov.xyz/python3-interpreter/tutorial/index.html
You can practice and complete activities and learn about Python, all written by me. If you have completed it by clicking the “I’m done with this section!” button you can mark it off and it will show a green tick on each section.
That’s all!
If you want any more features added to Boyan’s Online Python Interpreter or you have any bug reports, questions, or anything else, email me: questions@boyan-tabakov.xyz
