<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>代码修饰</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../res/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../res/adminui/dist/css/admin.css" media="all">
</head>
<body>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>代码修饰</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">语法高亮</div>
          <div class="layui-card-body">
            <pre id="test" class="layui-test">
              <textarea class="layui-hide">
<div class="layui-btn-container">
  <button type="button" class="layui-btn">默认按钮</button>
</div>

<p class="layui-padding-3">
AaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaA
</p>

<div class="layui-btn-container">
  <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
</div>
<script type="text/html">
<h3>{{= d.title }}</h3>
<ul>
{{#  layui.each(d.list, function(index, item){ }}
  <li>
    <span>{{= item.modname }}</span>
    <span>{{= item.alias }}：</span>
    <span>{{= item.site || '' }}</span>
  </li>
{{#  }); }}
<p>{{#  if(d.list.length === 0){ }}
无数据
{{#  } }}</p>
</ul>
</script>
<script>
  layui.use(function () {
    var layer = layui.layer;
    const a = '1'
    function aa(a, b) {
      return '11'
    }
    layer.msg(layui.v)
  })
</script>
              </textarea>
            </pre>
          </div>
        </div>


        <div class="layui-card">
          <div class="layui-card-header">默认修饰</div>
          <div class="layui-card-body">
            <pre class="layui-code">// 在里面放置任意的文本内容
test
test
            </pre>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">深色模式</div>
          <div class="layui-card-body">
            <pre class="layui-code" lay-options="{title: 'Custom Title', skin: 'dark'}">// 在里面放置任意的文本内容
test
test
            </pre>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">固定高度</div>
          <div class="layui-card-body">
            <pre class="layui-code" lay-options="{height: '160px'}">// 在里面放置任意的文本内容
test
test
test
code line
code line
code line
code line
code line
            </pre> 
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">不显示行号</div>
          <div class="layui-card-body">
            <pre class="layui-code" lay-options="{ln: false}">// 不显示行号（注：v2.7.3 新增）
test
test
            </pre>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  
  <script src="../../../res/layui/layui.js"></script>  
  <script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
  <script src="https://cdn.staticfile.org/prism/1.29.0/prism.min.js"></script>
  <script>
  layui.use(['code', 'dropdown'], function(){
    var dropdown = layui.dropdown;
    var $ = layui.$;

    // return;

    // 高亮主题 css 库
    var themeData = $.map([
      // hljs 主题库
      'https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs2015.min.css',
      'https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css',
      'https://cdn.staticfile.org/highlight.js/11.8.0/styles/github-dark.min.css',
      'https://cdn.staticfile.org/highlight.js/11.8.0/styles/github.min.css',
      'https://cdn.staticfile.org/highlight.js/11.8.0/styles/base16/google-dark.min.css',
      'https://cdn.staticfile.org/highlight.js/11.8.0/styles/base16/google-light.min.css',
      'https://cdn.staticfile.org/highlight.js/11.8.0/styles/monokai-sublime.min.css',
      '-',
      // prism 主题库
      'https://cdn.staticfile.org/prism/1.29.0/themes/prism-dark.min.css',
      'https://cdn.staticfile.org/prism/1.29.0/themes/prism.min.css'
    ], function(v, index) {
      return {
        title: v,
        link: v,
        highlighter: v.indexOf('prism') === -1 ? 'hljs' : 'prism',
        type: v === '-' ? '-' : 'normal'
      };
    });

    var codeInst = layui.code({
      elem: '#test',
      preview: true,
      codeStyle: 'height: 510px;',
      previewStyle: 'word-wrap: break-word;',
      // theme: 'dark',
      // header: true,
      // wordWrap: false, // 是否自动换行
      /*
      lang: 'html',
      highlighter: "hljs",
      codeRender: function (code, opts) {
        layui.link(themeData[1].link, 'layui-code-theme');
        return hljs.highlight(code, {language: opts.lang}).value;
      },*/
      tools: [
        'full',
        {
          title: ['文字换行'],
          type: 'form',
          event: function(obj) {
            dropdown.render({
              elem: obj.elem,
              data: [ {title: '自动换行', wordWrap: true}, {title: '不自动换行', wordWrap: false}],
              show: true,
              click: function(data, othis) {
                codeInst.reload({
                  wordWrap: data.wordWrap
                });
              }
            });
          }
        },
        {
          title: ['切换高亮主题'],
          type: 'theme',
          event: function(obj) {
            dropdown.render({
              elem: obj.elem,
              data: themeData,
              show: true,
              click: function(data, othis) {
                $('#layuicss-layui-code-theme').remove();
                layui.link(data.link, 'layui-code-theme');

                // 若高亮器有变化，则重载
                if (data.highlighter !== codeInst.config.highlighter) {
                  var highlighter = {
                    hljs: function(code, opts) {
                      return hljs.highlight(code, {
                        language: opts.lang
                      }).value;
                    },
                    prism: function(code, opts) {
                      return Prism.highlight(
                        code,
                        Prism.languages[opts.lang],
                        opts.lang
                      );
                    }
                  };
                  // 重载
                  codeInst.reload({
                    highlighter: data.highlighter,
                    codeRender: function (code, opts) {
                      return highlighter[data.highlighter](code, opts);
                    }
                  });
                }
              }
            });
          }
        }
      ]
    });

    // 重载 code
    layui.debounce(function() {
      codeInst.reload({
        lang: 'html',
        highlighter: "hljs",
        codeRender: function(code, opts) {
          layui.link(themeData[1].link, 'layui-code-theme');
          return hljs.highlight(code, {language: opts.lang}).value;
        }
      });
    }, 300)();

    // 通用实例，根据元素属性定制化参数
    layui.code({
      elem: '.layui-code'
    });
  });
  </script>
</body>
</html>