Skip to content

Commit d3476ba

Browse files
committed
Fix #79 - Explain hidden terminal features
1 parent 9606fe0 commit d3476ba

File tree

1 file changed

+65
-0
lines changed

1 file changed

+65
-0
lines changed

docs/user-guide/terminal.md

+65
Original file line numberDiff line numberDiff line change
@@ -74,3 +74,68 @@ that object:
7474
const myterm = document.querySelector("#my_script");
7575
await myterm.process('print("Hello world!")');
7676
```
77+
78+
## XTerm reference
79+
80+
Each *terminal* has a reachable reference to the [Terminal](https://xtermjs.org/docs/api/terminal/classes/terminal/) instance used to bootstrap the current terminal.
81+
82+
On the *JS* side, it's a `script.terminal` property while on the *Python* side, it's a `__terminal__` special reference that guarantees to provide the very same `script.terminal`:
83+
84+
```html title="How to reach the XTerm Terminal"
85+
<script id="py-terminal" type="py" terminal worker>
86+
from pyscript import document, ffi
87+
88+
# example: change default font-family
89+
__terminal__.options = ffi.to_js({"fontFamily": "cursive"})
90+
91+
script = document.getElementById("py-terminal")
92+
print(script.terminal == __terminal__)
93+
# prints True with the defined font
94+
</script>
95+
```
96+
97+
### Clear the terminal
98+
99+
As part of the API, it's very simple to clear a PyTerminal:
100+
101+
```html title="Clearing the terminal"
102+
<script type="mpy" terminal worker>
103+
print("before")
104+
__terminal__.clear()
105+
print("after")
106+
# only "after" is on the terminal
107+
</script>
108+
```
109+
110+
### Terminal colors
111+
112+
Not just colors, most special characters combination would work similarly to **bold** the text or make it **green**, or you can use `print('\033[2J')` to clear it, instead of using the exposed `clear()` method:
113+
114+
```html title="Terminal colors"
115+
<script type="mpy" terminal worker>
116+
print("This is \033[1mbold\033[0m")
117+
print("This is \033[32mgreen\033[0m")
118+
print("This is \033[1m\033[35mbold and purple\033[0m")
119+
</script>
120+
```
121+
122+
### Terminal addons
123+
124+
Because there is always a reference to the terminal, it's also possible to add any addon to it:
125+
126+
```html title="Terminal addons"
127+
<py-config>
128+
[js_modules.main]
129+
"https://cdn.jsdelivr.net/npm/@xterm/addon-web-links/+esm" = "weblinks"
130+
</py-config>
131+
<script type="py" terminal>
132+
from pyscript import js_modules
133+
134+
addon = js_modules.weblinks.WebLinksAddon.new()
135+
__terminal__.loadAddon(addon)
136+
137+
print("Check out https://pyscript.net/")
138+
</script>
139+
```
140+
141+
Although it's worth mentioning that the `WebLinksAddon` is already part of the default terminal distribution in *PyScript*, but that's basically what we do behind the scene to enable it and [any other addon](https://github.com/xtermjs/xterm.js/tree/master/addons/) could work the same.

0 commit comments

Comments
 (0)