layui/examples/code.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Code blocks adorn - Layui</title>

  <link href="../src/css/layui.css" rel="stylesheet">
  <style>
    body{padding: 32px;}
    pre{margin: 16px 0;}
  </style>
</head>
<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>

<pre><code class="layui-code" lay-options="{header: true}">
code line
code line
code line
</code></pre>

<pre class="layui-code" lay-options="{style: 'height: 300px'}" id="ID-multi-line"></pre>
<script type="module">
  // 生成批量行，测试行结构
  const elem = document.getElementById('ID-multi-line');
  elem.innerHTML = Array(1001).fill().map(v => {
    return Math.random().toString(32).substring(2).toUpperCase();
  }).join('\n');
</script>

<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
code line
code line
code line
code line
code line
code line
</pre>

<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
code line
code line
code line
code line
code line
code line
</pre>

<pre class="layui-code" lay-options="{title: '嵌套', encode: false}">
code line
code line
code line
code line
<pre class="layui-code" lay-options="{ln: false, encode: false}">
code line
code line
code line
<pre class="layui-code">
code line
code line
code line
  </pre>
</pre>
</pre>

<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
code line
code line
code line
code line
code line
code line
<pre class="layui-code" lay-options="{skin: 'dark', encode: false}">
code line
code line
code line
code line
code line
code line
<pre class="layui-code" lay-options="{skin: 'dark', ln: false, encode: false}">
code line
code line
code line
code line
code line
code line
</pre>
</pre>
</pre>
</pre>

<pre class="layui-code" lay-options="{encode: true}">
<div>
  123
</div>
</pre>

<pre class="layui-code" lay-options="{about: 'AboutInfo'}">
  About
</pre>

<!-- 第三方语法高亮库 -->
<script src="https://cdn.staticfile.net/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdn.staticfile.net/prism/1.29.0/prism.min.js"></script>

<!-- layui -->
<script src="../src/layui.js"></script>
<script>
layui.use(['code', 'dropdown'], function(){
  var dropdown = layui.dropdown;
  var layer = layui.layer;
  var $ = layui.$;

  // return;

  // 高亮主题 css 库
  var themeData = $.map([
    // hljs 主题库
    'https://cdn.staticfile.net/highlight.js/11.8.0/styles/vs2015.min.css',
    'https://cdn.staticfile.net/highlight.js/11.8.0/styles/vs.min.css',
    'https://cdn.staticfile.net/highlight.js/11.8.0/styles/github-dark.min.css',
    'https://cdn.staticfile.net/highlight.js/11.8.0/styles/github.min.css',
    'https://cdn.staticfile.net/highlight.js/11.8.0/styles/base16/google-dark.min.css',
    'https://cdn.staticfile.net/highlight.js/11.8.0/styles/base16/google-light.min.css',
    'https://cdn.staticfile.net/highlight.js/11.8.0/styles/monokai-sublime.min.css',
    '-',
    // prism 主题库
    'https://cdn.staticfile.net/prism/1.29.0/themes/prism-dark.min.css',
    'https://cdn.staticfile.net/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",
    // code: '<div class="layui-btn">初始按钮</div>',
    /*codeRender: function (code, opts) { // 初始高亮
      layui.link(themeData[1].link, 'layui-code-theme');
      return hljs.highlight(code, {language: opts.lang}).value;
    },*/
    tools: [
      'full',
      'window',
      {
        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);
                  }
                });
              }
            }
          });
        }
      },
      {
        title: ['编辑'],
        type: 'edit',
        event: function(obj) {
          layer.prompt({
            formType: 2,
            value: obj.rawCode,
            title: '编辑代码',
            area: ['800px', '500px'],
            maxlength: 9999999999
          }, function(value, index) {
            layer.close(index);
            // 重载 code
            codeInst.reloadCode({
              code: value
            });
          });
        }
      }
    ]
  });

  // 语法高亮重载
  codeInst.reloadCode({
    codeRender: function(code, opts) {
      layui.link(themeData[1].link, 'layui-code-theme');
      return hljs.highlight(code, {language: opts.lang}).value;
    }
  });


  // 通用实例，根据元素属性定制化参数
  layui.code({
    elem: '.layui-code',
    tools: ['tips'],
    langMarker: true,
    lang: 'html',
    // preview: true
  });
});
</script>
</body>
</html>