Skip to content

Commit

Permalink
Deployed fc4b706 to 2024.4.1 with MkDocs 1.6.0 and mike 1.1.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@fpliger
fpliger committed Apr 22, 2024
1 parent fc75ea1 commit fa5e7c4
Showing 1 changed file with 153 additions and 0 deletions.
153 changes: 153 additions & 0 deletions 2024.4.1/user-guide/terminal/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,17 @@



<label class="md-nav__link md-nav__link--active" for="__toc">


<span class="md-ellipsis">
Python terminal
</span>


<span class="md-nav__icon md-icon"></span>
</label>

<a href="./" class="md-nav__link md-nav__link--active">


Expand All @@ -570,6 +581,59 @@

</a>



<nav class="md-nav md-nav--secondary" aria-label="Table of contents">






<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>

<li class="md-nav__item">
<a href="#xterm-reference" class="md-nav__link">
XTerm reference
</a>

<nav class="md-nav" aria-label="XTerm reference">
<ul class="md-nav__list">

<li class="md-nav__item">
<a href="#clear-the-terminal" class="md-nav__link">
Clear the terminal
</a>

</li>

<li class="md-nav__item">
<a href="#terminal-colors" class="md-nav__link">
Terminal colors
</a>

</li>

<li class="md-nav__item">
<a href="#terminal-addons" class="md-nav__link">
Terminal addons
</a>

</li>

</ul>
</nav>

</li>

</ul>

</nav>

</li>


Expand Down Expand Up @@ -682,6 +746,48 @@



<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>

<li class="md-nav__item">
<a href="#xterm-reference" class="md-nav__link">
XTerm reference
</a>

<nav class="md-nav" aria-label="XTerm reference">
<ul class="md-nav__list">

<li class="md-nav__item">
<a href="#clear-the-terminal" class="md-nav__link">
Clear the terminal
</a>

</li>

<li class="md-nav__item">
<a href="#terminal-colors" class="md-nav__link">
Terminal colors
</a>

</li>

<li class="md-nav__item">
<a href="#terminal-addons" class="md-nav__link">
Terminal addons
</a>

</li>

</ul>
</nav>

</li>

</ul>

</nav>
</div>
</div>
Expand Down Expand Up @@ -747,6 +853,53 @@ <h1 id="terminal">Terminal</h1>
<div class="language-JS highlight"><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">myterm</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">&quot;#my_script&quot;</span><span class="p">);</span>
</span><span id="__span-4-2"><a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="k">await</span><span class="w"> </span><span class="nx">myterm</span><span class="p">.</span><span class="nx">process</span><span class="p">(</span><span class="s1">&#39;print(&quot;Hello world!&quot;)&#39;</span><span class="p">);</span>
</span></code></pre></div>
<h2 id="xterm-reference">XTerm reference</h2>
<p>Each <em>terminal</em> has a reachable reference to the <a href="https://xtermjs.org/docs/api/terminal/classes/terminal/">Terminal</a> instance used to bootstrap the current terminal.</p>
<p>On the <em>JS</em> side, it's a <code>script.terminal</code> property while on the <em>Python</em> side, it's a <code>__terminal__</code> special reference that guarantees to provide the very same <code>script.terminal</code>:</p>
<div class="language-html highlight"><span class="filename">How to reach the XTerm Terminal</span><pre><span></span><code><span id="__span-5-1"><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;py-terminal&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;py&quot;</span> <span class="na">terminal</span> <span class="na">worker</span><span class="p">&gt;</span>
</span><span id="__span-5-2"><a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="nx">pyscript</span><span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="nb">document</span><span class="p">,</span><span class="w"> </span><span class="nx">ffi</span>
</span><span id="__span-5-3"><a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a>
</span><span id="__span-5-4"><a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="w"> </span><span class="err">#</span><span class="w"> </span><span class="nx">example</span><span class="o">:</span><span class="w"> </span><span class="nx">change</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="nx">font</span><span class="o">-</span><span class="nx">family</span>
</span><span id="__span-5-5"><a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a><span class="w"> </span><span class="nx">__terminal__</span><span class="p">.</span><span class="nx">options</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">ffi</span><span class="p">.</span><span class="nx">to_js</span><span class="p">({</span><span class="s2">&quot;fontFamily&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;cursive&quot;</span><span class="p">})</span>
</span><span id="__span-5-6"><a id="__codelineno-5-6" name="__codelineno-5-6" href="#__codelineno-5-6"></a>
</span><span id="__span-5-7"><a id="__codelineno-5-7" name="__codelineno-5-7" href="#__codelineno-5-7"></a><span class="w"> </span><span class="nx">script</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;py-terminal&quot;</span><span class="p">)</span>
</span><span id="__span-5-8"><a id="__codelineno-5-8" name="__codelineno-5-8" href="#__codelineno-5-8"></a><span class="w"> </span><span class="nx">print</span><span class="p">(</span><span class="nx">script</span><span class="p">.</span><span class="nx">terminal</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="nx">__terminal__</span><span class="p">)</span>
</span><span id="__span-5-9"><a id="__codelineno-5-9" name="__codelineno-5-9" href="#__codelineno-5-9"></a><span class="w"> </span><span class="err">#</span><span class="w"> </span><span class="nx">prints</span><span class="w"> </span><span class="nx">True</span><span class="w"> </span><span class="kd">with</span><span class="w"> </span><span class="nx">the</span><span class="w"> </span><span class="nx">defined</span><span class="w"> </span><span class="nx">font</span>
</span><span id="__span-5-10"><a id="__codelineno-5-10" name="__codelineno-5-10" href="#__codelineno-5-10"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></code></pre></div>
<h3 id="clear-the-terminal">Clear the terminal</h3>
<p>As part of the API, it's very simple to clear a PyTerminal:</p>
<div class="language-html highlight"><span class="filename">Clearing the terminal</span><pre><span></span><code><span id="__span-6-1"><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;mpy&quot;</span> <span class="na">terminal</span> <span class="na">worker</span><span class="p">&gt;</span>
</span><span id="__span-6-2"><a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a><span class="w"> </span><span class="nx">print</span><span class="p">(</span><span class="s2">&quot;before&quot;</span><span class="p">)</span>
</span><span id="__span-6-3"><a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a><span class="w"> </span><span class="nx">__terminal__</span><span class="p">.</span><span class="nx">clear</span><span class="p">()</span>
</span><span id="__span-6-4"><a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a><span class="w"> </span><span class="nx">print</span><span class="p">(</span><span class="s2">&quot;after&quot;</span><span class="p">)</span>
</span><span id="__span-6-5"><a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="w"> </span><span class="err">#</span><span class="w"> </span><span class="nx">only</span><span class="w"> </span><span class="s2">&quot;after&quot;</span><span class="w"> </span><span class="nx">is</span><span class="w"> </span><span class="nx">on</span><span class="w"> </span><span class="nx">the</span><span class="w"> </span><span class="nx">terminal</span>
</span><span id="__span-6-6"><a id="__codelineno-6-6" name="__codelineno-6-6" href="#__codelineno-6-6"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></code></pre></div>
<h3 id="terminal-colors">Terminal colors</h3>
<p>Not just colors, most special characters combination would work similarly to <strong>bold</strong> the text or make it <strong>green</strong>, or you can use <code>print('\033[2J')</code> to clear it, instead of using the exposed <code>clear()</code> method:</p>
<div class="language-html highlight"><span class="filename">Terminal colors</span><pre><span></span><code><span id="__span-7-1"><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;mpy&quot;</span> <span class="na">terminal</span> <span class="na">worker</span><span class="p">&gt;</span>
</span><span id="__span-7-2"><a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a><span class="w"> </span><span class="nx">print</span><span class="p">(</span><span class="s2">&quot;This is \033[1mbold\033[0m&quot;</span><span class="p">)</span>
</span><span id="__span-7-3"><a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a><span class="w"> </span><span class="nx">print</span><span class="p">(</span><span class="s2">&quot;This is \033[32mgreen\033[0m&quot;</span><span class="p">)</span>
</span><span id="__span-7-4"><a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a><span class="w"> </span><span class="nx">print</span><span class="p">(</span><span class="s2">&quot;This is \033[1m\033[35mbold and purple\033[0m&quot;</span><span class="p">)</span>
</span><span id="__span-7-5"><a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></code></pre></div>
<h3 id="terminal-addons">Terminal addons</h3>
<p>Because there is always a reference to the terminal, it's also possible to add any addon to it:</p>
<div class="language-html highlight"><span class="filename">Terminal addons</span><pre><span></span><code><span id="__span-8-1"><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="p">&lt;</span><span class="nt">py-config</span><span class="p">&gt;</span>
</span><span id="__span-8-2"><a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a> [js_modules.main]
</span><span id="__span-8-3"><a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a> &quot;https://cdn.jsdelivr.net/npm/@xterm/addon-web-links/+esm&quot; = &quot;weblinks&quot;
</span><span id="__span-8-4"><a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a><span class="p">&lt;/</span><span class="nt">py-config</span><span class="p">&gt;</span>
</span><span id="__span-8-5"><a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;py&quot;</span> <span class="na">terminal</span><span class="p">&gt;</span>
</span><span id="__span-8-6"><a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="nx">pyscript</span><span class="w"> </span><span class="k">import</span><span class="w"> </span><span class="nx">js_modules</span>
</span><span id="__span-8-7"><a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a>
</span><span id="__span-8-8"><a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a><span class="w"> </span><span class="nx">addon</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">js_modules</span><span class="p">.</span><span class="nx">weblinks</span><span class="p">.</span><span class="nx">WebLinksAddon</span><span class="p">.</span><span class="ow">new</span><span class="p">()</span>
</span><span id="__span-8-9"><a id="__codelineno-8-9" name="__codelineno-8-9" href="#__codelineno-8-9"></a><span class="w"> </span><span class="nx">__terminal__</span><span class="p">.</span><span class="nx">loadAddon</span><span class="p">(</span><span class="nx">addon</span><span class="p">)</span>
</span><span id="__span-8-10"><a id="__codelineno-8-10" name="__codelineno-8-10" href="#__codelineno-8-10"></a>
</span><span id="__span-8-11"><a id="__codelineno-8-11" name="__codelineno-8-11" href="#__codelineno-8-11"></a><span class="w"> </span><span class="nx">print</span><span class="p">(</span><span class="s2">&quot;Check out https://pyscript.net/&quot;</span><span class="p">)</span>
</span><span id="__span-8-12"><a id="__codelineno-8-12" name="__codelineno-8-12" href="#__codelineno-8-12"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></code></pre></div>
<p>Although it's worth mentioning that the <code>WebLinksAddon</code> is already part of the default terminal distribution in <em>PyScript</em>, but that's basically what we do behind the scene to enable it and <a href="https://github.com/xtermjs/xterm.js/tree/master/addons/">any other addon</a> could work the same.</p>



Expand Down

0 comments on commit fa5e7c4

Please sign in to comment.