<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 代碼修飾器文檔 - 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 - 用心與你溝通

      亚洲图色