代碼修飾器文檔 - layui.code

                    code模塊通常針對于程序員,它是layui中一個極其輕量的組成。通俗而言,該模塊就是對你的pre元素進行一個修飾,從而保證你展現的代碼更具可讀性。目前它沒有對不同的語言進行顏色高亮(因為目前感覺沒有太大必要,后面layui全面穩定后,可能會完善該功能),但這絲毫不會影響它對你帶來的便捷。

                    模塊加載名稱:code

                    使用

                    code模塊的使用非常簡單,請直接看代碼,假設你在頁面有這樣一段pre標簽:

                    <pre class="layui-code">
                    //代碼區域
                    var a = 'hello layui';
                    </pre>      
                          

                    那么你只需要經過下面的方式:

                    layui.use('code', function(){ //加載code模塊
                      layui.code(); //引用code方法
                    });
                          

                    就可以將那段pre區塊顯示成你現在看到的這個樣子:

                    //代碼區域
                    var a = 'hello layui';
                          
                    基礎參數

                    方法:layui.code(options)
                    它接受一個對象參數options,支持以下key的設定

                    參數 類型 描述
                    elem string 指定元素的選擇器
                    title string 設定標題
                    height string 設置最大高度
                    encode boolean 是否轉義html標簽,默認false
                    skin string 風格選擇(值見下文)
                    about boolean 是否剔除右上關于

                    特別提示:除了上述方式的設置,我們還允許你直接在pre標簽上設置屬性來替代,如:

                    <pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode="">
                    這樣有木有覺得更方便些
                    </pre>     
                          

                    下面將針對每一個參數做進一步講解。

                    指定元素

                    code模塊會去自動查找class為layui-code的類,如果你初始給的不是該類,僅僅只是一個pre標簽,那么需要通過elem設置選擇器來指向元素:

                    layui.code({
                      elem: 'pre' //默認值為.layui-code
                    });
                          
                    設置標題

                    即左上角顯示的文本,默認值為code

                    layui.code({
                      title: 'JavaScript'
                    });
                          

                    或者直接在pre標簽上設置屬性<pre lay-title="JavaScript"></pre>

                    設置最大高度

                    你可以設置以下key來控制修飾器的最大高度。如果內容低于該高度,則會自適應內容高度;如果內容超過了該高度,則會自動出現滾動條。

                    layui.code({
                      height: '100px' //請注意必須加px。如果該key不設定,則會自適應高度,且不會出現滾動條。
                    });
                     
                     
                     
                     
                     Hi,我是充數的 ^_^
                     
                          

                    或者直接在pre標簽上設置屬性<pre lay-height="100px"></pre>

                    轉義html標簽

                    事實上很多時候你都需要在pre標簽中展現html標簽,而不希望它被瀏覽器解析。那么code模塊允許你這么做,只需要開啟encode即可,如:

                    layui.code({
                      encode: true //是否轉義html標簽。默認不開啟
                    });
                          

                    開啟了encode后的效果如下:

                    • HTML將不會被解析
                    • 有木有感覺非常方便

                    或者直接在pre標簽上設置屬性<pre lay-encode="true"></pre>

                    風格選擇

                    你肯定不會滿足于code的某一種顯示風格,而skin參數則允許你設定許多種顯示風格,我們目前內置了兩種,分別為默認和notepad

                    layui.code({
                      title: 'NotePad++的風格'
                      ,skin: 'notepad' //如果要默認風格,不用設定該key。
                    });
                          

                    上述的設定后,你會看到下面的樣子

                    i'm code.
                    i'm code too.     
                          

                    或者直接在pre標簽上設置屬性<pre lay-skin="notepad"></pre>

                    剔除關于

                    如果你不喜歡出現右上角的layui.code字眼,你是可以剔除的。設置about: false即可,請叫我雷鋒。

                    layui - 用心與你溝通

                    亚洲图色