javascript:codemirror

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:codemirror [2023/04/09 11:43] – [動作確認] ともやんjavascript:codemirror [2023/04/19 07:52] (現在) – [CodeMirror plugin for DokuWiki] ともやん
行 1069: 行 1069:
  
 ==== 動作確認 ==== ==== 動作確認 ====
 +===== CodeMirror test 🤔 =====
 <WRAP mincode src><code javascript> <WRAP mincode src><code javascript>
-<div class="embed_codemirror">+<div class="embedCodeMirror"> 
 +  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/lib/codemirror.css"> 
 +  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/theme/cobalt.css"> 
 +  
   <style>   <style>
-    /* +    #dokuwiki__content .embedCodeMirror .CodeMirror * { 
-    @import '/_media/javascript/codemirror/5.65.12/lib/codemirror.css'; +      font-family: "HackGen Console NFJ"; 
-    @import '/_media/javascript/codemirror/5.65.12/theme/cobalt.css'; +      font-size: 10px;
-    */ +
- +
-    .dokuwiki pre { +
-      box-shadow: unset;+
     }     }
-    .embed_codemirror .CodeMirror * { +    #dokuwiki__content .embedCodeMirror .CodeMirror { 
-      font-family: "HackGen Console NFJ", Arial, monospace; +      height: 200px;
-      font-size: 11px;+
     }     }
     /*.select-theme .form-control { width: auto; display: inline-block; }*/     /*.select-theme .form-control { width: auto; display: inline-block; }*/
   </style>   </style>
- +  
-  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/lib/codemirror.css"> +
-  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/theme/cobalt.css">+
   <script src="/_media/javascript/codemirror/5.65.12/lib/codemirror.js"></script>   <script src="/_media/javascript/codemirror/5.65.12/lib/codemirror.js"></script>
   <!-- 言語に応じたjsファイルを読み込む -->   <!-- 言語に応じたjsファイルを読み込む -->
   <script src="/_media/javascript/codemirror/5.65.12/mode/javascript/javascript.js"></script>   <script src="/_media/javascript/codemirror/5.65.12/mode/javascript/javascript.js"></script>
      
-  <textarea id="editor_js"> +  <script> 
-  var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), { +    'use strict'; 
-    mode: "javascript", +    window.CodeMirror5 = CodeMirror; // 5.65.12 を保持 
-    theme: "cobalt", +    // DOMContentLoaded 時に実行 
-    lineNumbers: true, +    document.addEventListener('DOMContentLoaded', () => { 
-    indentUnit: 4 +      var jsEditor = CodeMirror5.fromTextArea(document.getElementById('embedCodeMirrorText'), { 
-  }); +        mode: "javascript", 
-  </textarea> +        theme: "cobalt", 
-  CodeMirror Version: <label id="lblCdMirrVer"></label>+        lineNumbers: true, 
 +        indentUnit: 4 
 +      }).setSize(null, "auto"); 
 +      document.getElementById('lblCdMirrVer').innerText = CodeMirror5.version; 
 + 
 +      var input = document.getElementById("select"); 
 +      function selectTheme() { 
 +        var theme = input.options[input.selectedIndex].textContent; 
 +        editor.setOption("theme", theme); 
 +        location.hash = "#" + theme; 
 +      } 
 +    }); 
 +  </script>
      
-  <script> +  <textarea id="embedCodeMirrorText"> 
-  var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), {+  var jsEditor = CodeMirror.fromTextArea(document.getElementById('embedCodeMirrorText'), {
     mode: "javascript",     mode: "javascript",
     theme: "cobalt",     theme: "cobalt",
行 1110: 行 1119:
     indentUnit: 4     indentUnit: 4
   }).setSize(null, "auto");   }).setSize(null, "auto");
-  document.getElementById('lblCdMirrVer').innerText = CodeMirror.version; +  </textarea> 
-  </script>+  <div class="select-theme"> 
 +    <!-- <p>Theme: <select onchange="selectTheme()" id="select"></select></p> --> 
 +    <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p> 
 +  </div>
 </div> </div>
 </code></WRAP> </code></WRAP>
 +
 <html> <html>
-<div class="embed_codemirror">+<div class="embedCodeMirror"> 
 +  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/lib/codemirror.css"> 
 +  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/theme/cobalt.css"> 
 +  
   <style>   <style>
-    /* +    #dokuwiki__content .embedCodeMirror .CodeMirror * { 
-    @import '/_media/javascript/codemirror/5.65.12/lib/codemirror.css'; +      font-family: "HackGen Console NFJ"; 
-    @import '/_media/javascript/codemirror/5.65.12/theme/cobalt.css'; +      font-size: 10px;
-    */ +
-     +
-    .dokuwiki pre { +
-      box-shadow: unset;+
     }     }
-    .embed_codemirror .CodeMirror * { +    #dokuwiki__content .embedCodeMirror .CodeMirror { 
-      font-family: "HackGen Console NFJ", Arial, monospace; +      height: 200px;
-      font-size: 11px;+
     }     }
     /*.select-theme .form-control { width: auto; display: inline-block; }*/     /*.select-theme .form-control { width: auto; display: inline-block; }*/
   </style>   </style>
- +  
-  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/lib/codemirror.css"> +
-  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/theme/cobalt.css">+
   <script src="/_media/javascript/codemirror/5.65.12/lib/codemirror.js"></script>   <script src="/_media/javascript/codemirror/5.65.12/lib/codemirror.js"></script>
   <!-- 言語に応じたjsファイルを読み込む -->   <!-- 言語に応じたjsファイルを読み込む -->
   <script src="/_media/javascript/codemirror/5.65.12/mode/javascript/javascript.js"></script>   <script src="/_media/javascript/codemirror/5.65.12/mode/javascript/javascript.js"></script>
      
-  <textarea id="editor_js"> +  <script> 
-  var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), {+    'use strict'; 
 +    window.CodeMirror5 = CodeMirror; // 5.65.12 を保持 
 +    // DOMContentLoaded 時に実行 
 +    document.addEventListener('DOMContentLoaded', () => { 
 +      var jsEditor = CodeMirror5.fromTextArea(document.getElementById('embedCodeMirrorText'), { 
 +        mode: "javascript", 
 +        theme: "cobalt", 
 +        lineNumbers: true, 
 +        indentUnit: 4 
 +      }).setSize(null, "auto"); 
 +      document.getElementById('lblCdMirrVer').innerText = CodeMirror5.version; 
 + 
 +      var input = document.getElementById("select"); 
 +      function selectTheme() { 
 +        var theme = input.options[input.selectedIndex].textContent; 
 +        editor.setOption("theme", theme); 
 +        location.hash = "#" + theme; 
 +      } 
 +    }); 
 +  </script> 
 +   
 +  <textarea id="embedCodeMirrorText"> 
 +  var jsEditor = CodeMirror.fromTextArea(document.getElementById('embedCodeMirrorText'), {
     mode: "javascript",     mode: "javascript",
     theme: "cobalt",     theme: "cobalt",
行 1150: 行 1181:
     <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p>     <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p>
   </div>   </div>
-  <script> 
-  var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), { 
-    mode: "javascript", 
-    theme: "cobalt", 
-    lineNumbers: true, 
-    indentUnit: 4 
-  }).setSize(null, "auto"); 
-  document.getElementById('lblCdMirrVer').innerText = CodeMirror.version; 
-   
-  var input = document.getElementById("select"); 
-  function selectTheme() { 
-    var theme = input.options[input.selectedIndex].textContent; 
-    editor.setOption("theme", theme); 
-    location.hash = "#" + theme; 
-  } 
-  </script> 
 </div> </div>
  
   <!--<script>   <!--<script>
-    document.querySelector('.wrap_mincode_long.wrap_src pre.code').innerText = document.querySelector('.embed_codemirror').innerHTML;+    document.querySelector('.wrap_mincode_long.wrap_src pre.code').innerText = document.querySelector('.embedCodeMirror').innerHTML;
   </script>-->   </script>-->
 </html> </html>
行 1175: 行 1190:
 ===== CodeMirror plugin for DokuWiki ===== ===== CodeMirror plugin for DokuWiki =====
 [[https://www.dokuwiki.org/plugin:codemirror|plugin:codemirror [DokuWiki]]]\\ [[https://www.dokuwiki.org/plugin:codemirror|plugin:codemirror [DokuWiki]]]\\
-ソースコード: [[https://gitlab.com/albertgasset/dokuwiki-plugin-codemirror|Albert Gasset / dokuwiki-plugin-codemirror · GitLab]]\\+ソースコード: [[glb>albertgasset/dokuwiki-plugin-codemirror|Albert Gasset / dokuwiki-plugin-codemirror · GitLab]]\\ 
 +　　　　　　 [[git>cosmocode/dokuwiki-plugin-codemirror|GitHub - cosmocode/dokuwiki-plugin-codemirror: This project is now hosted on GitLab https://gitlab.com/albertgasset/dokuwiki-plugin-codemirror]]\\
  
 <WRAP color_term> <WRAP color_term>
  • javascript/codemirror.txt
  • 最終更新: 2023/04/19 07:52
  • by ともやん