Skip to content

Commit d5ffbe4

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 8147a51 commit d5ffbe4

File tree

1 file changed

+58
-58
lines changed

1 file changed

+58
-58
lines changed

‎blog/25-08-25/monaco-editor-setup/monaco-editor-setup.html‎

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@
66

77
<head>
88
<meta charset=utf-8>
9-
9+
1010
<title>
1111
Monaco Editor Setup
1212
</title>
13-
13+
1414
<meta name=desctiption content='Learn how to embed the Monaco Editor—the code editor behind VS Code—into any webpage. This step-by-step guide includes a live, editable demo so you can explore its features and customize your setup in real time.'>
15-
15+
1616
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
1717
<meta name=viewport content='width=device-width, initial-scale=1'>
1818

1919
<base href='https://ext-code.com/blog/25-08-25/monaco-editor-setup/'>
2020
<link rel=canonical href='https://ext-code.com/blog/25-08-25/monaco-editor-setup/monaco-editor-setup.html'>
21-
22-
23-
<script type='application/ld+json'>
21+
22+
23+
<script type='application/ld+json'>
2424
{
2525
"@context" : "https://schema.org",
2626
"@type" : "TechArticle",
@@ -31,23 +31,23 @@
3131
"dateModified" : "2025-10-29",
3232
"mainEntityOfPage" : {"@type":"WebPage","@id":"https://ext-code.com/blog/25-08-25/monaco-editor-setup/monaco-editor-setup.html"},
3333
"publisher" : {"@type":"Organization","name":"Your Blog or Company Name","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
34-
}
34+
}
3535
</script>
36-
37-
36+
37+
3838
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
39-
40-
41-
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
42-
39+
40+
41+
<script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js'></script>
42+
4343
<script init>
4444
console.clear();
4545
console.log('monaco-editor-setup.html');
4646
console.log();
4747
console.json=v=>console.log(JSON.stringify(v,null,4));
4848
var df=true,version='v1.0'
4949
;
50-
50+
5151
var ace;
5252

5353
var ext;
@@ -61,18 +61,18 @@
6161
var snippet;
6262
var log;
6363

64-
64+
6565
//:
66-
67-
66+
67+
6868
async function init(){
6969
//debug('init',version);
7070
menu = menumod();
7171

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

74-
75-
hdr = mod['blog-hdr'];
74+
75+
hdr = mod['blog-hdr'];
7676
snippet = mod['snippet-html-console'];
7777
log = mod['log-mod'];
7878

@@ -85,14 +85,14 @@
8585
snippet.init(),
8686
log.init,
8787
]);
88-
88+
8989

9090
initdom(document.body);
91-
92-
91+
92+
9393
}//init
94-
95-
94+
95+
9696
//:
9797

9898

@@ -101,7 +101,7 @@
101101
mod.stack.add;
102102

103103
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
104-
104+
105105
var promise = ext.load.libs(
106106
'js/dom/$.js',
107107
'js/core/datatype.js',
@@ -110,19 +110,19 @@
110110
'js/debug/debug.js',
111111
);
112112
[$,datatype,menumod,keydown,debug] = await promise;
113-
113+
114114
mod.stack.complete;
115-
115+
116116
})();
117117

118-
119-
</script init>
120-
121118

119+
</script init>
120+
121+
122122
<link rel=stylesheet href='/blog/css/blog.css'>
123-
123+
124124
<style>
125-
125+
126126
html
127127
{height:100%;font-family:arial}
128128
body
@@ -135,46 +135,46 @@
135135
[component]
136136
{display:none}
137137

138-
.description
138+
.description
139139
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
140140
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
141141
.description>p
142142
{margin:0}
143143
.description > p+p
144144
{margin:10px 0}
145-
145+
146146
code
147147
{font-family:monospace;background:whitesmoke}
148148
code.inline
149149
{display:inline;padding:5px 10px}
150-
150+
151151
a
152152
{color:#4a90e2;text-decoration:none;font-weight:500}
153-
a:hover
153+
a:hover
154154
{text-decoration:underline}
155155
.link-domain
156156
{font-size:0.85rem;color:#777;margin-left:0.25rem}
157-
.link-domain::before
157+
.link-domain::before
158158
{content:'['}
159159
.link-domain::after
160160
{content:']'}
161161
.link-txt
162162
{}
163-
163+
164164
input
165165
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
166166
input[type=button]
167167
{cursor:pointer}
168-
169-
168+
169+
170170

171171
</style>
172172

173173
</head>
174174

175175

176176
<body>
177-
177+
178178
<blog-hdr component=grp1>
179179
<h1 class=title>
180180
Monaco Editor Setup
@@ -183,22 +183,22 @@ <h1 class=title>
183183
29 Oct 2025
184184
</time>
185185
</blog-hdr>
186-
187-
188-
186+
187+
188+
189189
<div class=description>
190190
<p>
191191
Learn how to embed the Monaco Editor—the code editor behind VS Code—into any webpage.
192192
This step-by-step guide includes a live, editable demo so you can explore its features and customize your setup in real time.
193193
</p>
194194
</div>
195-
196-
195+
196+
197197
<snippet-html-console src='ex/ex1.html' component></snippet-html-console>
198198

199199

200200
<div id=ftr></div>
201-
201+
202202

203203
<log-mod component></log-mod>
204204

@@ -207,32 +207,32 @@ <h1 class=title>
207207

208208
<script>
209209

210-
210+
211211
var root;
212-
212+
213213

214214
//:
215215

216216

217217
function initdom(rootnode){
218-
218+
219219
root = rootnode;
220-
220+
221221

222222
hdr.initdom();
223223

224-
224+
225225
snippet.initdom(root);
226226
snippet.console.height = 200;
227-
228-
227+
228+
229229
log.initdom();
230-
231-
230+
231+
232232
}//initdom
233233

234-
235-
234+
235+
236236
</script>
237237

238238
</html>

0 commit comments

Comments
 (0)