Skip to content

Commit 159330a

Browse files
javascript-2020javascript-2020
committed
save file
1 parent d5ffbe4 commit 159330a

File tree

1 file changed

+54
-54
lines changed

1 file changed

+54
-54
lines changed

‎blog/25-08-26/terminal-in-a-webpage/terminal-in-a-webpage.html‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,20 @@
1212

1313
<head>
1414
<meta charset=utf-8>
15-
15+
1616
<title>
1717
Terminal In A Webpage
1818
</title>
19-
19+
2020
<meta name=description content='Learn how to embed a fully interactive WebContainer-powered terminal directly into your webpage. This guide walks you through the setup and includes editable, runnable code so you can experiment with real Node.js environments right in the browser.'>
2121

2222
<base href='https://ext-code.com/blog/25-08-26/terminal-in-a-webpage/'>
2323
<link rel=canonical href='https://ext-code.com/blog/25-08-26/terminal-in-a-webpage/terminal-in-a-webpage.html'>
2424

2525
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
2626
<meta name=viewport content='width=device-width, initial-scale=1'>
27-
28-
<script type='application/ld+json'>
27+
28+
<script type='application/ld+json'>
2929
{
3030
"@context" : "https://schema.org",
3131
"@type" : "TechArticle",
@@ -36,47 +36,47 @@
3636
"dateModified" : "2025-10-29",
3737
"mainEntityOfPage" : {"@type":"WebPage","@id":"https://ext-code.com/blog/25-08-26/terminal-in-a-webpage/terminal-in-a-webpage.html"},
3838
"publisher" : {"@type":"Organization","name":"Your Blog or Company Name","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
39-
}
39+
}
4040
</script>
41-
42-
41+
42+
4343
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
44-
4544

46-
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
47-
45+
46+
<script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js'></script>
47+
4848
<script init>
4949
console.clear();
5050
console.log('terminal-in-a-webpage.html');
5151
console.log();
5252
console.json=v=>console.log(JSON.stringify(v,null,4));
5353
var df=true,version='v2.0'
5454
;
55-
56-
55+
56+
5757
var ext;
5858
var $;
5959
var datatype;
6060
var menumod;
6161
var keydown;
6262
var debug;
63-
63+
6464
var hdr;
6565
var snippet;
6666
var log;
67-
68-
67+
68+
6969
//:
70-
71-
70+
71+
7272
async function init(){
7373
debug('init',version);
7474
menu = menumod();
7575

7676
mod.base.add({ext,$,datatype,keydown,menu,menumod,ace});
7777

78-
79-
hdr = mod['blog-hdr'];
78+
79+
hdr = mod['blog-hdr'];
8080
snippet = mod['snippet-html-console'];
8181
log = mod['log-mod'];
8282

@@ -92,11 +92,11 @@
9292

9393

9494
initdom(document.body);
95-
96-
95+
96+
9797
}//init
98-
99-
98+
99+
100100
//:
101101

102102

@@ -105,7 +105,7 @@
105105
mod.stack.add;
106106

107107
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
108-
108+
109109
var promise = ext.load.libs(
110110
'js/dom/$.js',
111111
'js/core/datatype.js',
@@ -114,19 +114,19 @@
114114
'js/debug/debug.js',
115115
);
116116
[$,datatype,menumod,keydown,debug] = await promise;
117-
117+
118118
mod.stack.complete;
119-
119+
120120
})();
121121

122-
122+
123123
</script init>
124124

125-
125+
126126
<link rel=stylesheet href='/blog/css/blog.css'>
127127

128128
<style>
129-
129+
130130

131131
html
132132
{height:100%;font-family:arial}
@@ -140,46 +140,46 @@
140140
[component]
141141
{display:none}
142142

143-
.description
143+
.description
144144
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
145145
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
146146
.description>p
147147
{margin:0}
148148
.description > p+p
149149
{margin:10px 0}
150-
150+
151151
code
152152
{font-family:monospace;background:whitesmoke}
153153
code.inline
154154
{display:inline;padding:5px 10px}
155-
155+
156156
a
157157
{color:#4a90e2;text-decoration:none;font-weight:500}
158-
a:hover
158+
a:hover
159159
{text-decoration:underline}
160160
.link-domain
161161
{font-size:0.85rem;color:#777;margin-left:0.25rem}
162-
.link-domain::before
162+
.link-domain::before
163163
{content:'['}
164164
.link-domain::after
165165
{content:']'}
166166
.link-txt
167167
{}
168-
168+
169169
input
170170
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
171171
input[type=button]
172172
{cursor:pointer}
173-
174-
175-
173+
174+
175+
176176
</style>
177177

178178
</head>
179179

180180

181181
<body>
182-
182+
183183
<blog-hdr component=grp1>
184184
<h1 class=title>
185185
Terminal In A Webpage
@@ -188,45 +188,45 @@ <h1 class=title>
188188
29 Oct 2025
189189
</time>
190190
</blog-hdr>
191-
192-
193-
191+
192+
193+
194194
<div class=description>
195195
<p>
196196
Learn how to embed a fully interactive WebContainer-powered terminal directly into your webpage.
197197
This guide walks you through the setup and includes editable, runnable code so you can experiment with real Node.js environments right in the browser.
198198
</p>
199199
</div>
200-
201-
200+
201+
202202
<snippet-html-console src='ex/ex.html' component></snippet-html-console>
203-
203+
204204

205205
<log-mod component></log-mod>
206206

207-
207+
208208
</body>
209209

210210

211211
<script>
212-
213-
212+
213+
214214
async function initdom(rootnode){
215-
215+
216216
var root = rootnode;
217217

218218
hdr.initdom();
219-
219+
220220
snippet.initdom(root);
221221
snippet.console.height = 200;
222222

223223

224224
log.initdom();
225-
226225

227-
}//initdom
228-
229-
226+
227+
}//initdom
228+
229+
230230
</script>
231231

232232
</html>

0 commit comments

Comments
 (0)