Skip to content

Commit 1db4370

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 132358e commit 1db4370

File tree

1 file changed

+102
-38
lines changed

1 file changed

+102
-38
lines changed

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

Lines changed: 102 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,88 @@
11

22

3+
<!DOCTYPE html>
34

45
<html>
56

6-
77
<head>
8-
8+
<meta charset=utf-8>
99

10-
<title>monaco editor setup</title>
10+
<title>
11+
Monaco Editor Setup
12+
</title>
13+
14+
<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.'>
1115

12-
<base href='https://javascript-2020.github.io/blog/25-08-25/monaco-editor-setup/'>
16+
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
17+
<meta name=viewport content='width=device-width, initial-scale=1'>
1318

19+
<base href='https://ext-code.com/blog/25-08-25/monaco-editor-setup/'>
1420
<link rel=canonical href='https://ext-code.com/blog/25-08-25/monaco-editor-setup/monaco-editor-setup.html'>
15-
16-
<meta name=viewport content='width=device-width, initial-scale=1'>
17-
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
1821

19-
22+
23+
<script type='application/ld+json'>
24+
{
25+
"@context" : "https://schema.org",
26+
"@type" : "TechArticle",
27+
"headline" : "Monaco Editor Setup",
28+
"description" : "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.",
29+
"author" : {"@type":"Person","name":"Matthew Richards"},
30+
"datePublished" : "2025-08-25",
31+
"dateModified" : "2025-10-29",
32+
"mainEntityOfPage" : {"@type":"WebPage","@id":"https://ext-code.com/blog/25-08-25/monaco-editor-setup/monaco-editor-setup.html"},
33+
"publisher" : {"@type":"Organization","name":"Your Blog or Company Name","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
34+
}
35+
</script>
36+
37+
2038
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
2139

2240

2341
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
2442

2543
<script init>
2644
console.clear();
45+
console.log('monaco-editor-setup.html');
46+
console.log();
2747
console.json=v=>console.log(JSON.stringify(v,null,4));
28-
var version = 'v1.0';
29-
30-
var df = true;
31-
48+
var df=true,version='v1.0'
49+
;
3250

51+
var ace;
52+
3353
var ext;
3454
var $;
3555
var datatype;
3656
var menumod;
37-
var code;
38-
57+
var keydown;
58+
var debug;
3959

4060
var snippet;
61+
62+
var log;
63+
4164

4265
//:
4366

4467

45-
mod.stack.add = init;
46-
4768
async function init(){
4869
//debug('init',version);
4970
menu = menumod();
5071

5172

5273
snippet = mod['snippet-html-console'];
74+
log = mod.log;
5375

5476
snippet.initmod({ext,$,menu,ace});
77+
log.initmod({ext,$});
5578

56-
await snippet.init();
57-
58-
79+
await Promise.all([
80+
snippet.init(),
81+
log.init,
82+
]);
83+
5984

60-
await initdom(document.body);
85+
initdom(document.body);
6186

6287

6388
}//init
@@ -77,12 +102,10 @@
77102
'js/core/datatype.js',
78103
'js/dom/menumod/menumod.js',
79104
'js/dom/keydown/keydown.js',
80-
'js/dom/code/v2.0/code-v2.0.js.api',
105+
'js/debug/debug.js',
81106
);
82-
[$,datatype,menumod,keydown,code] = await promise;
107+
[$,datatype,menumod,keydown,debug] = await promise;
83108

84-
code.initmod({ext,$,datatype,menumod});
85-
86109
mod.stack.complete;
87110

88111
})();
@@ -91,20 +114,54 @@
91114
</script init>
92115

93116

94-
95-
96117
<link rel=stylesheet href='/blog/css/blog.css'>
97118

98119
<style>
99120

100121
html
101122
{height:100%;font-family:arial}
102123
body
103-
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;margin:20px;align-items:center;
124+
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:20px;margin:20px;align-items:center;
104125
padding-bottom:200px;
105126
}
106127
body>*
107-
{max-width:1400px;width:100%;padding:0 20px;}
128+
{max-width:1400px;width:100%}
129+
130+
[component]
131+
{display:none}
132+
133+
.description
134+
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
135+
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
136+
.description>p
137+
{margin:0}
138+
.description > p+p
139+
{margin:10px 0}
140+
141+
code
142+
{font-family:monospace;background:whitesmoke}
143+
code.inline
144+
{display:inline;padding:5px 10px}
145+
146+
a
147+
{color:#4a90e2;text-decoration:none;font-weight:500}
148+
a:hover
149+
{text-decoration:underline}
150+
.link-domain
151+
{font-size:0.85rem;color:#777;margin-left:0.25rem}
152+
.link-domain::before
153+
{content:'['}
154+
.link-domain::after
155+
{content:']'}
156+
.link-txt
157+
{}
158+
159+
input
160+
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
161+
input[type=button]
162+
{cursor:pointer}
163+
164+
108165

109166
</style>
110167

@@ -113,25 +170,32 @@
113170

114171
<body>
115172

173+
<blog-hdr component=grp1 v2.0>
174+
<h1 class=title>
175+
Monaco Editor Setup
176+
</h1>
177+
<time slot=date datetime=2025-10-29>
178+
29 Oct 2025
179+
</time>
180+
</blog-hdr>
116181

117182

118-
<h3>
119-
monaco editor setup
120-
</h3>
121-
122183

123-
<div id=desc>
124-
125-
monaco editor setup
126-
184+
<div class=description>
185+
<p>
186+
Learn how to embed the Monaco Editor—the code editor behind VS Code—into any webpage.
187+
This step-by-step guide includes a live, editable demo so you can explore its features and customize your setup in real time.
188+
</p>
127189
</div>
128190

129191

130-
<snippet-html-console component v2.0 src='ex/ex1.html'>
131-
</snippet-html-console>
192+
<snippet-html-console component v2.0 src='ex/ex1.html'></snippet-html-console>
132193

133194

134195
<div id=ftr></div>
196+
197+
198+
<log component v2.0></log>
135199

136200
</body>
137201

0 commit comments

Comments
 (0)