Skip to content

Commit e0a1ca4

Browse files
javascript-2020javascript-2020
committed
save file
1 parent eb1da6d commit e0a1ca4

File tree

1 file changed

+201
-27
lines changed

1 file changed

+201
-27
lines changed

‎blog/25-10-17/codemirror-in-the-browser/codemirror-in-the-browser.html‎

Lines changed: 201 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,213 @@
1+
2+
3+
14
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<title>CodeMirror 5</title>
5+
6+
7+
<html lang=en>
8+
9+
<head>
10+
<meta charset=utf-8>
11+
12+
<title>
13+
CodeMirror In The Browser
14+
</title>
15+
16+
<meta name=description content='Learn how to set up CodeMirror in your browser to create a powerful, customizable code editor. This guide includes editable, runnable examples so you can explore syntax highlighting, themes, and extensions in real time.'>
17+
18+
<base href='https://ext-code.com/blog/25-10-17/codemirror-in-the-browser/'>
19+
<link rel=canonical href='https://ext-code.com/blog/25-10-17/codemirror-in-the-browser/codemirror-in-the-browser.html'>
20+
21+
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
22+
<meta name=viewport content='width=device-width, initial-scale=1'>
23+
24+
25+
<script type='application/ld+json'>
26+
{
27+
"@context" : "https://schema.org",
28+
"@type" : "TechArticle",
29+
"headline" : "CodeMirror In The Browser",
30+
"description" : "Learn how to set up CodeMirror in your browser to create a powerful, customizable code editor. This guide includes editable, runnable examples so you can explore syntax highlighting, themes, and extensions in real time.",
31+
"author" : {"@type":"Person","name":"Matthew Richards"},
32+
"datePublished" : "2025-10-17",
33+
"dateModified" : "2025-10-29",
34+
"mainEntityOfPage" : {"@type":"WebPage","@id":"https://ext-code.com/blog/25-10-17/codemirror-in-the-browser/codemirror-in-the-browser.html"},
35+
"publisher" : {"@type":"Organization","name":"ext-code.com","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
36+
}
37+
</script>
38+
39+
40+
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
41+
42+
43+
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
44+
45+
<script init>
46+
console.clear();
47+
console.log('codemirror-in-the-browser.html');
48+
console.log();
49+
console.json=v=>console.log(JSON.stringify(v,null,4));
50+
var df=true,version='v2.0'
51+
;
52+
53+
var ace;
54+
55+
var ext,$,datatype,menumod,keydown,debug;
56+
57+
var menu;
58+
59+
var ex;
60+
61+
var log;
62+
63+
64+
//:
65+
666

7-
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.css" rel="stylesheet">
8-
<style>
9-
#editor {
10-
border: 1px solid #ccc;
11-
height: 300px;
67+
async function init(){
68+
69+
menu = menumod();
70+
71+
ex = mod.ex;
72+
log = mod.log;
73+
74+
ex.initmod({ext,$,menu,ace});
75+
log.initmod({ext,$});
76+
77+
await Promise.all([
78+
ex.init(),
79+
log.init(),
80+
]);
81+
82+
83+
initdom(document.body);
84+
85+
86+
}//init
87+
88+
89+
(async()=>{
90+
91+
mod.stack.add;
92+
93+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
94+
95+
var promise = ext.load.libs(
96+
'js/dom/$.js',
97+
'js/core/datatype.js',
98+
'js/dom/menumod/menumod.js',
99+
'js/dom/keydown/keydown.js',
100+
'js/debug/debug.js',
101+
);
102+
103+
[$,datatype,menumod,keydown,debug] = await promise;
104+
105+
mod.stack.complete;
106+
107+
})();
108+
109+
</script init>
110+
111+
112+
<link rel=stylesheet href='/blog/css/blog.css'>
113+
114+
<style>
115+
116+
html
117+
{height:100%;font-family:arial}
118+
body
119+
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:20px;margin:20px;align-items:center;
120+
padding-bottom:200px;
12121
}
13-
</style>
14-
</head>
122+
body>*
123+
{max-width:1400px;width:100%}
124+
125+
[component]
126+
{display:none}
127+
128+
.description
129+
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
130+
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
131+
.description>p
132+
{margin:0}
133+
.description > p+p
134+
{margin:10px 0}
15135

16-
<body>
17-
<h2>CodeMirror 6 Editor</h2>
18-
<div id="editor">
19-
</div>
136+
code
137+
{font-family:monospace;background:whitesmoke}
138+
code.inline
139+
{display:inline;padding:5px 10px}
20140

21-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.js"></script>
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/mode/javascript/javascript.min.js"></script>
141+
a
142+
{color:#4a90e2;text-decoration:none;font-weight:500}
143+
a:hover
144+
{text-decoration:underline}
145+
.link-domain
146+
{font-size:0.85rem;color:#777;margin-left:0.25rem}
147+
.link-domain::before
148+
{content:'['}
149+
.link-domain::after
150+
{content:']'}
151+
.link-txt
152+
{}
23153

154+
input
155+
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
156+
input[type=button]
157+
{cursor:pointer}
24158

25-
<script>
26-
console.clear();
27-
28-
var myCodeMirror = CodeMirror(editor,{
159+
160+
#editor
161+
{border:1px solid #ccc;height:300px}
162+
163+
</style>
164+
165+
</head>
166+
167+
<body>
29168

30-
value: "function myScript(){return 100;}\n",
31-
mode: "javascript",
32-
lineNumbers: true,
33-
});
169+
<blog-hdr component=grp1 v2.0>
170+
<h1 class=title>
171+
CodeMirror In The Browser
172+
</h1>
173+
<time slot=date datetime=2025-10-29>
174+
29 Oct 2025
175+
</time>
176+
</blog-hdr>
177+
178+
<div class=description>
179+
<p>
180+
Learn how to set up CodeMirror in your browser to create a powerful, customizable code editor.
181+
This guide includes editable, runnable examples so you can explore syntax highlighting, themes, and extensions in real time.
182+
</p>
183+
</div>
184+
34185

186+
<snippet-html-console id=ex component v2.0 src='ex/ex.html'></snippet-html-console>
35187

188+
189+
<log component v2.0></log>
36190

37-
</script>
38-
</body>
191+
192+
</body>
193+
194+
195+
<script>
196+
197+
198+
function initdom(rootnode){
199+
200+
201+
ex.initdom();
202+
log.initdom();
203+
204+
205+
}//initdom
206+
207+
208+
//:
209+
210+
211+
</script>
212+
39213
</html>

0 commit comments

Comments
 (0)