wiki:lesscss_test

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
wiki:lesscss_test [2023/04/18 00:27] – [CodeMirror test 🤔] ともやんwiki:lesscss_test [2024/04/22 06:02] (現在) – [よだれ] ともやん
行 3: 行 3:
 ===== Dark mode test ===== ===== Dark mode test =====
 <html> <html>
-<style> +<input type="checkbox" id="chkDark"> <span>ダークモード</span>&nbsp; 
-#dw__pagetools ul.nav li a { +<input type="checkbox" id="chkVertical"> <span>縦書き</span>
-  color: inherit; +
-} +
-#dw__pagetools .menuitem svg { +
-  color: var(--text-color); +
-  fill: currentColor !important; +
-} +
-.table-striped>tbody>tr:nth-of-type(odd) { +
-  /*background-color: #f9f9f9;*/ +
-  background-color: unset; +
-} +
- +
-body.default.dw-page-on-panel, +
-div.panel { +
-  color: var(--text-color); +
-  background: var(--background-color); +
-  border-color: var(--border-color); +
-} +
-hr, .panel-default { +
-  border-color: var(--border-color); +
-} +
-.light-mode { +
-  --text-color: #333; +
-  --background-color: #fff; +
-  --border-color: #ddd; +
-} +
-.dark-mode{ +
-  --text-color: #eee; +
-  --background-color: #202124; +
-  --border-color: #666; +
-} +
-</style> +
-<input type="checkbox" id="chkDark"> <span>ダークモード</span>+
 <script> <script>
 jQuery(() =>{ jQuery(() =>{
   const chkDark = document.querySelector("#chkDark");   const chkDark = document.querySelector("#chkDark");
 +  const chkVertical = document.querySelector("#chkVertical");
  
   const setDarkAndLightMode = () => {   const setDarkAndLightMode = () => {
行 49: 行 18:
       document.body.classList.remove('dark-mode');       document.body.classList.remove('dark-mode');
       document.body.classList.add('light-mode');       document.body.classList.add('light-mode');
 +    }
 +  };
 +
 +  const setVerticalMode = () => {
 +    if (chkVertical.checked === true) {
 +      document.body.classList.add('vertical-mode');
 +    }
 +    else {
 +      document.body.classList.remove('vertical-mode');
     }     }
   };   };
行 54: 行 32:
   chkDark.addEventListener("change", () => {   chkDark.addEventListener("change", () => {
     setDarkAndLightMode();     setDarkAndLightMode();
 +  });
 +  chkVertical.addEventListener("change", () => {
 +    setVerticalMode();
   });   });
      
行 65: 行 46:
 ==== ケース 1 (color_term, color_mincode, mincode) ==== ==== ケース 1 (color_term, color_mincode, mincode) ====
 <html><style> <html><style>
-  .wrap_column {+  .wrap_grp_test .wrap_column {
     height: 290px;     height: 290px;
 +    border: 1px solid red;
 +    border-radius: 5px;
   }   }
 </style></html> </style></html>
-<WRAP group>+<WRAP group grp_test>
 <WRAP column 45% mincode> <WRAP column 45% mincode>
 ^ テーマを Dark にする  ^ ^ テーマを Dark にする  ^
行 100: 行 83:
 } }
 </code></WRAP> </code></WRAP>
 +</WRAP>
 +
  
-<WRAP column 45%> 
 ==== Notebook のセルの通し番号を振る ==== ==== Notebook のセルの通し番号を振る ====
 +<WRAP group>
 +
 +<WRAP column 45%>
 **Advanced Settings Editor:** - [Notebook]\\ **Advanced Settings Editor:** - [Notebook]\\
 +
 <WRAP color_term> <WRAP color_term>
 <WRAP color_mincode> <WRAP color_mincode>
行 121: 行 109:
 </code></WRAP> </code></WRAP>
 </WRAP> </WRAP>
 +
 </WRAP> </WRAP>
  
行 527: 行 516:
 </code></WRAP> </code></WRAP>
  
 +==== ケース 6 (.wrap_tip, .wrap_info, .wrap_important, .wrap_alert, .wrap_help 内の pre を 30% 透過) ====
 +<WRAP group>
 +<WRAP round tip column>
 +Python環境が見つかりません。バンドルされたインストーラーを使用してインストールするか、デフォルトの Python 環境を変更します
 +<html><pre>
 +⚠ Python environment not found. <code>Install using the bundled installer</code> or <code>Change the default Python environment</code>
 +</pre></html>
 +</WRAP>
 +<WRAP round info column half>
 +<html><pre>情報枠</pre></html>
 +</WRAP>
 +<WRAP round important column half>
 +<html><pre>重要枠</pre></html>
 +</WRAP>
 +<WRAP round alert column half>
 +<html><pre>警告枠</pre></html>
 +</WRAP>
 +<WRAP round help column half>
 +<html><pre>ヘルプ枠</pre></html>
 +</WRAP>
 +</WRAP>
 ==== GeSHi code test 🤔 ==== ==== GeSHi code test 🤔 ====
 <WRAP color_term> <WRAP color_term>
行 727: 行 737:
  
 ===== CodeMirror test 🤔 ===== ===== CodeMirror test 🤔 =====
-<WRAP mincode_long 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;
-    */ +
- +
-    .embed_codemirror .CodeMirror pre { +
-      box-shadow: unset;+
     }     }
-    .embed_codemirror .CodeMirror * { +    #dokuwiki__content .embedCodeMirror .CodeMirror { 
-      font-family: "HackGen Console NFJ", Arial, monospace; +      height: 200px;
-      font-size: 11px; +
-    } +
-    .embed_codemirror .CodeMirror { +
-      height: 480px;+
     }     }
     /*.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"> 
-  var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), { 
-    mode: "javascript", 
-    theme: "cobalt", 
-    lineNumbers: true, 
-    indentUnit: 4 
-  }); 
-  </textarea> 
-  CodeMirror Version: <label id="lblCdMirrVer"></label> 
      
   <script>   <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",
行 771: 行 786:
     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>
  
 +==== theme: cobalt ====
 <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>
-    @import '/_media/javascript/codemirror/5.65.12/lib/codemirror.css'; +    #dokuwiki__content .embedCodeMirror .CodeMirror * { 
-    @import '/_media/javascript/codemirror/5.65.12/theme/cobalt.css'; +      font-family: "HackGen Console NFJ"; 
-     +      font-size: 10px;
-    div.embed_CodeMirror, +
-    div.embed_CodeMirror div.CodeMirror, +
-    div.embed_CodeMirror div.CodeMirror * { +
-      font-family: "HackGen Console NFJ", Arial, monospace; +
-      font-size: 11px; +
-      position: unset; +
-      overflow: hidden;+
     }     }
-    div.embed_CodeMirror div.CodeMirror { +    #dokuwiki__content .embedCodeMirror .CodeMirror { 
-      height: 480px;+      height: 200px;
     }     }
     /*.select-theme .form-control { width: auto; display: inline-block; }*/     /*.select-theme .form-control { width: auto; display: inline-block; }*/
   </style>   </style>
-  <script> +  
-    //jQuery.mobile.zoom.disable(); +
-     +
-    const loadCSSFromURL = (cssId, url) => { +
-      var head  = document.getElementsByTagName('head')[0]; +
-      var link  = document.createElement('link'); +
-      link.id   = cssId; +
-      link.rel  = 'stylesheet'; +
-      link.type = 'text/css'; +
-      link.href = url; +
-      link.media = 'all'; +
-      head.appendChild(link); +
-    }; +
-     +
-    //loadCSSFromURL('codemirror', '/_media/javascript/codemirror/5.65.12/lib/codemirror.css'); +
-    //loadCSSFromURL('theme_cobalt', '/_media/javascript/codemirror/5.65.12/theme/cobalt.css'); +
-  </script> +
- +
-  <!-- <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 時に実行 
 +    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', 
 +    theme: 'cobalt',
     lineNumbers: true,     lineNumbers: true,
     indentUnit: 4     indentUnit: 4
-  }).setSize(null, "auto");+  }).setSize(null, 'auto');
   </textarea>   </textarea>
   <div class="select-theme">   <div class="select-theme">
行 831: 行 849:
     <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p>     <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p>
   </div>   </div>
 +</div>
 +
 +  <!--<script>
 +    document.querySelector('.wrap_mincode_long.wrap_src pre.code').innerText = document.querySelector('.embedCodeMirror').innerHTML;
 +  </script>-->
 +</html>
 +
 +==== theme: monokai ====
 +<html>
 +<div class="embedCodeMirror001">
 +  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/lib/codemirror.css">
 +  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/theme/monokai.css">
 +  
 +  <style>
 +    #dokuwiki__content .embedCodeMirror001 .CodeMirror * {
 +      font-family: "HackGen Console NFJ";
 +      font-size: 10px;
 +    }
 +    #dokuwiki__content .embedCodeMirror001 .CodeMirror {
 +      height: 200px;
 +    }
 +    /*.select-theme .form-control { width: auto; display: inline-block; }*/
 +  </style>
 +  
 +  <script src="/_media/javascript/codemirror/5.65.12/lib/codemirror.js"></script>
 +  <!-- 言語に応じたjsファイルを読み込む -->
 +  <script src="/_media/javascript/codemirror/5.65.12/mode/javascript/javascript.js"></script>
 +  
   <script>   <script>
-  var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor_js'), { +    'use strict'; 
-    mode: "javascript", +    window.CodeMirror5 = CodeMirror; // 5.65.12 を保持 
-    theme: "cobalt",+    // DOMContentLoaded 時に実行 
 +    document.addEventListener('DOMContentLoaded', () => { 
 +      var jsEditor = CodeMirror5.fromTextArea(document.getElementById('embedCodeMirrorText001'), { 
 +        mode: 'javascript', 
 +        theme: 'monokai', 
 +        lineNumbers: true, 
 +        indentUnit: 4 
 +      }).setSize(null, 'auto'); 
 +      document.getElementById('lblCdMirrVer001').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="embedCodeMirrorText001"> 
 +  var jsEditor = CodeMirror.fromTextArea(document.getElementById('embedCodeMirrorText001'), { 
 +    mode: 'javascript', 
 +    theme: 'monokai',
     lineNumbers: true,     lineNumbers: true,
     indentUnit: 4     indentUnit: 4
-  });//.setSize(null, "auto"); +  }).setSize(null, 'auto'); 
-  document.getElementById('lblCdMirrVer').innerText = CodeMirror.version; +  </textarea> 
-   +  <div class="select-theme"> 
-  var input = document.getElementById("select"); +    <!-- <p>Theme: <select onchange="selectTheme()" id="select"></select></p> --> 
-  function selectTheme() { +    <p>CodeMirror Version: <label id="lblCdMirrVer001"></label></p> 
-    var theme = input.options[input.selectedIndex].textContent; +  </div>
-    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>
行 1034: 行 1098:
 </pre></html></WRAP> </pre></html></WRAP>
 </WRAP> </WRAP>
 +
 +===== 顔文字 =====
 +<html>
 +<span style="font-size: 500px">🤐</span>
 +<span style="font-size: 500px">😷</span>
 +</html>
  
 ===== 参考文献 ===== ===== 参考文献 =====
  • wiki/lesscss_test.1681745251.txt.gz
  • 最終更新: 2023/04/18 00:27
  • by ともやん