next up previous contents
Next: Moodle 使用 Codemirror Up: CodeMirror 程式編輯 Previous: 準備 CodeMirror 套件   Contents

Codemirror 程式修改

  1. 先列出修改前後,有那些檔案被更動,再逐一說明。結果只有二個檔被更動過。
    [root@dywang moodle23]# diff -qrwbBE mod_tmp/codemirror-3.19 lib/form/codemirror-3.19/
    Files mod_tmp/codemirror-3.19/lib/codemirror.css and lib/form/codemirror-3.19/lib/codemirror.css differ
    Files mod_tmp/codemirror-3.19/mode/python/index.html and lib/form/codemirror-3.19/mode/python/index.html differ
    
  2. 修改 CodeMirror CSS 顯示樣版,增加捲軸設定,最小高度 4 行,最大高度 30 行。
    [root@dywang moodle23]# diff -urN -wbBE mod_tmp/codemirror-3.19/lib/codemirror.css lib/form/codemirror-3.19/lib/codemirror.css
    --- mod_tmp/codemirror-3.19/lib/codemirror.css	2013-10-21 16:19:59.000000000 +0800
    +++ lib/form/codemirror-3.19/lib/codemirror.css	2013-11-22 08:20:28.000000000 +0800
    @@ -252,6 +252,16 @@
       background: rgba(255, 255, 0, .4);
     }
     
    +.CodeMirror {
    +  border: 1px solid #eee;
    +  height: auto;
    +}
    +.CodeMirror-scroll {
    +  overflow-y: hidden!important;
    +  overflow-x: auto;
    +  min-height: 4em;
    +  max-height: 30em; 
    +}
     /* IE7 hack to prevent it from returning funny offsetTops on the spans */
     .CodeMirror span { *vertical-align: text-bottom; }
    
  3. 因 python 程式以內縮判讀程式區塊,建議以 TAB 內縮對齊。所以先修改 index.html 增加 enterMode: "flat",讓 codearea 按下 enter 產生新的一行時,不會自動加入「空白內縮」。
    [root@dywang moodle23]# diff -urN -wbBE  mod_tmp/codemirror-3.19/mode/python/index.html lib/form/codemirror-3.19/mode/python/index.html
    --- mod_tmp/codemirror-3.19/mode/python/index.html	2013-10-21 16:19:59.000000000 +0800
    +++ lib/form/codemirror-3.19/mode/python/index.html	2014-03-02 10:41:27.283706055 +0800
    @@ -151,6 +151,7 @@
             lineNumbers: true,
             indentUnit: 4,
             tabMode: "shift",
    +        enterMode: "flat",
             matchBrackets: true
         });
     
    @@ -161,6 +162,7 @@
             lineNumbers: true,
             indentUnit: 4,
             tabMode: "shift",
    +        enterMode: "flat",
             matchBrackets: true
           });
         </script>
    



2018-08-14