save file

Author: javascript-2020

html-components/list/snippet-console/snippet-console.html

@@ -10,13 +10,13 @@
             <meta charset=utf-8>
 
             <title>
-                  html component :
+                  html component : snippet-console
             </title>
 
             <meta name=description content=''>
 
-            <base href='https://ext-code.com/html-components/list/dir-tree/'>
-            <link rel=canonical href='https://ext-code.com/html-components/list/dir-tree/dir-tree.html'>
+            <base href='https://ext-code.com/html-components/list/snippet-console/snippet-console.html'>
+            <link rel=canonical href='https://ext-code.com/html-components/list/snippet-console/snippet-console.html'>
 
             <meta name=viewport content='width=device-width, initial-scale=1'>
             <link rel=icon href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAaVBMVEVHcExfpvhYpPxapPtZo/lZpfxYpPtZpfxjp/Rxsv1ZpPpZpPtZpPpZpfxbpPheqPxcpvxorf1jqvxoputao/lbpPhmrP1ZpPtYo/tZo/hZpPtZpPqcyf+Rw/6Xxv+KwP6EvP53tf19uf1CLkbiAAAAHHRSTlMADp1YNLp7swf+YpU/wizc0vrpAiIX84VvHKlK4cmJ4wAAAVdJREFUKM+1ktmShCAMRVU2ARFxb5tF/f+PHIK92j1vM6myKuQYkns1y/4i8mEof6dlobX4hWHc09GtzfVSDZ/0qlvNg/Wr0SO7nOmlWb2zEN55Lj+WUsFat3O+ems3+g2HViLBuLfbdKaz8X5EkMnNBl2961tMsOuSanXr7N6iHOL+klqt3Y8r8yZuwRtGCCPyxgl3di0ODdrZYGgdA5H8wLXk1rUVpBQykeqY5Q/dcXgjajyNcfRNN2Z9P3TJbhKnB96OWzSHzzesCSGyThOjodEyeOxWpJZsEHioKcGxW4zc7LEzbCNv8KtoCit3SFwX40NLq7l+8wSRu3fEGLC7r/p07mDxYXl8gZ7RWBGKKXEcJ0GJzB8XFdH2SuESK/AAN5Ocri/2A5Yga5ZJ9+nPi7hk0FgBebr2xN2S8NJ9wxIhBZtShRCi5IRREQO2FpAUc5n9e/wA3jcXGxBAlmMAAAAASUVORK5CYII='>
@@ -31,11 +31,22 @@
 
             <script>
 
-        var df=true,did='html'
-        ;
-        
+            
         var base        = 'https://libs.ext-code.com/html/';
         var component   = 'snippet-console';
+        var files       = {
+                                'source'    : {
+                                      'latest'    : null,
+                                      'v2.0'      : null,
+                                },
+                                'examples'    : {
+                                      'snippet-console-v2.0-min.html'   : null,
+                                },
+                          };
+                          
+                          
+        var df=true,did='html'
+        ;
 
         var ace;
         var md;
@@ -46,19 +57,26 @@
 
 
         async function init(){
-                                                                                console.log('init');
+                                                                                debug('init');
 
-              md    = markdownit();
+              md    = markdownit({
+                    html          : true,
+                    breaks        : false,
+                    linkify       : true,
+                    linkTarget    : '_blank',
+              });
 
-              await load();
 
               dirtree       = mod['dir-tree'];
               snippet       = mod['snippet-html-console'];
               editor        = mod['web-editor'];
               log           = mod['log-mod'];
 
 
-              await mod.auto();
+              await Promise.all([
+                    load(),
+                    mod.auto()
+              ]);
 
 
               initdom();
@@ -82,58 +100,10 @@
 
             </script>
 
-            <style>
 
+            <link rel=stylesheet href='../css/component.css' crossorigin=anonymous>
 
-  html
-    {height:100%;font-family:arial}
-    
-    
-  body
-    {/*height:calc(100% - 40px);*/display:flex;flex-direction:column;gap:20px;align-items:center;margin:20px;padding-bottom:200px}
-    
-    
-  body>*
-    {max-width:1400px;width:100%;padding:0 20px;}
-    
-  [component],config
-    {display:none}
-    
-  input
-    {font-size:16px;padding:5px 10px}
-  input[type=button]
-    {cursor:pointer}
-  input[type=checkbox]
-    {width:15px;height:15px;margin:0}
-    
-    
-  #demo-tree
-    {margin:20px 0;height:auto !important;overflow:visible;box-sizing:border-box;outline:none;border-radius:5px;
-      border:none !important;
-      /*border:1px solid lightgray !important;*/
-    }
-    
-  #view-hdr
-    {padding:10px;font-weight:bold;background:rgba(173,216,230,0.5);border:1px solid lightgray;border-radius:5px}
-    
-  #view
-    {border:1px solid lightgray;border-radius:5px;padding:10px}
-  web-editor
-    {}
-    
-    
-  .wunderbaum .wb-expander
-    {opacity:1 !important;transition:none !important}
-  .wb-row
-    {cursor:pointer}
-    
-    
-  .icon
-    {border:1px solid gray;border-radius:3px;box-sizing:border-box;width:30px;height:30px;cursor:pointer}
-  .spc
-    {flex:1;max-width:200px}
-    
-    
+            <style>
             </style>
 
       </head>
@@ -190,18 +160,6 @@ <h3>
 
 
 
-        var files    = {
-              'source'    : {
-                    'latest'    : null,
-                    'v2.0'      : null,
-              },
-              'examples'    : {
-                    'snippet-console-v2.0-min.html'   : null,
-              },
-        };
-        
-        
-        
   //:
 
 
@@ -212,8 +170,6 @@ <h3>
               $('#readme').innerHTML        = html;
 
 
-              var node    = $('#demo-tree');
-              
               files   = dirtree.build(files);
               dirtree.display(files,{callback});