save file

javascript-2020 · javascript-2020 · commit 346b693b549d · 2026-02-09T09:39:00.000Z
diff --git a/blog/25-10-17/codemirror-in-the-browser/codemirror-in-the-browser.html b/blog/25-10-17/codemirror-in-the-browser/codemirror-in-the-browser.html
@@ -14,7 +14,7 @@
             </title>
             
             <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.'>
-
+            
             <base href='https://ext-code.com/blog/25-10-17/codemirror-in-the-browser/'>
             <link rel=canonical href='https://ext-code.com/blog/25-10-17/codemirror-in-the-browser/codemirror-in-the-browser.html'>
             
@@ -37,9 +37,9 @@
             
             
             <script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
-
-
-            <script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
+            
+            
+            <script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js'></script>
             
             <script init>
                                                                                 console.clear();
@@ -64,13 +64,13 @@
   
   
         async function init(){
-          
+        
               menu    = menumod();
-
+              
               mod.base.add({ext,$,datatype,keydown,menu,menumod,ace});
               
-
-              hdr     = mod['blog-hdr'];              
+              
+              hdr     = mod['blog-hdr'];
               ex      = mod.ex;
               log     = mod['log-mod'];
               
@@ -108,16 +108,16 @@
         [$,datatype,menumod,keydown,debug]    = await promise;
         
         mod.stack.complete;
-
+        
 })();
-  
-            </script init>
 
+            </script init>
+            
             
             <link rel=stylesheet href='/blog/css/blog.css'>
             
             <style>
-
+            
   html
     {height:100%;font-family:arial}
   body
@@ -130,86 +130,86 @@
   [component]
     {display:none}
     
-  .description 
+  .description
     {max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem 2rem;
       background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
   .description>p
     {margin:0}
   .description > p+p
     {margin:10px 0}
-
+    
   code
     {font-family:monospace;background:whitesmoke}
   code.inline
     {display:inline;padding:5px 10px}
-
+    
   a
     {color:#4a90e2;text-decoration:none;font-weight:500}
-  a:hover 
+  a:hover
     {text-decoration:underline}
   .link-domain
     {font-size:0.85rem;color:#777;margin-left:0.25rem}
-  .link-domain::before 
+  .link-domain::before
     {content:'['}
   .link-domain::after
     {content:']'}
   .link-txt
     {}
-
+    
   input
     {font-size:16px;padding:5px 7px;box-sizing:border-box;}
   input[type=button]
     {cursor:pointer}
-
-            
+    
+    
   #editor
     {border:1px solid #ccc;height:300px}
     
             </style>
             
       </head>
-
+      
       <body>
-
-            <blog-hdr component=grp1>      
+      
+            <blog-hdr component=grp1>
                   <h1 class=title>
                         CodeMirror In The Browser
                   </h1>
                   <time slot=date datetime=2025-10-29>
                         29 Oct 2025
                   </time>
             </blog-hdr>
-      
+            
             <div class=description>
                   <p>
                         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.
                   </p>
             </div>
-                  
-
+            
+            
             <snippet-html-console id=ex src='ex/ex.html' component></snippet-html-console>
-
-      
+            
+            
             <log-mod component></log-mod>
-
+            
             
       </body>
-
+      
       
       <script>
       
-
+      
         function initdom(rootnode){
-
+        
               hdr.initdom();
               ex.initdom();
               log.initdom();
               
               
         }//initdom
         
-
+        
   //:
   
   
