wiki:lesscss_test

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
wiki:lesscss_test [2023/04/18 02:05] – [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>
行 784: 行 794:
 </code></WRAP> </code></WRAP>
  
 +==== theme: cobalt ====
 <html> <html>
 <div class="embedCodeMirror"> <div class="embedCodeMirror">
行 810: 行 821:
     document.addEventListener('DOMContentLoaded', () => {     document.addEventListener('DOMContentLoaded', () => {
       var jsEditor = CodeMirror5.fromTextArea(document.getElementById('embedCodeMirrorText'), {       var jsEditor = CodeMirror5.fromTextArea(document.getElementById('embedCodeMirrorText'), {
-        mode: "javascript", +        mode: 'javascript', 
-        theme: "cobalt",+        theme: 'cobalt',
         lineNumbers: true,         lineNumbers: true,
         indentUnit: 4         indentUnit: 4
-      }).setSize(null, "auto");+      }).setSize(null, 'auto');
       document.getElementById('lblCdMirrVer').innerText = CodeMirror5.version;       document.getElementById('lblCdMirrVer').innerText = CodeMirror5.version;
  
-      var input = document.getElementById("select");+      var input = document.getElementById('select');
       function selectTheme() {       function selectTheme() {
         var theme = input.options[input.selectedIndex].textContent;         var theme = input.options[input.selectedIndex].textContent;
行 828: 行 839:
   <textarea id="embedCodeMirrorText">   <textarea id="embedCodeMirrorText">
   var jsEditor = CodeMirror.fromTextArea(document.getElementById('embedCodeMirrorText'), {   var jsEditor = CodeMirror.fromTextArea(document.getElementById('embedCodeMirrorText'), {
-    mode: "javascript", +    mode: 'javascript', 
-    theme: "cobalt",+    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">
     <!-- <p>Theme: <select onchange="selectTheme()" id="select"></select></p> -->     <!-- <p>Theme: <select onchange="selectTheme()" id="select"></select></p> -->
     <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p>     <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p>
 +  </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>
 +    'use strict';
 +    window.CodeMirror5 = CodeMirror; // 5.65.12 を保持
 +    // 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,
 +    indentUnit: 4
 +  }).setSize(null, 'auto');
 +  </textarea>
 +  <div class="select-theme">
 +    <!-- <p>Theme: <select onchange="selectTheme()" id="select"></select></p> -->
 +    <p>CodeMirror Version: <label id="lblCdMirrVer001"></label></p>
   </div>   </div>
 </div> </div>
行 1025: 行 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.1681751120.txt.gz
  • 最終更新: 2023/04/18 02:05
  • by ともやん