panel/public/res/views/component/code/index.html

<title>代码修饰</title>

<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 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">// 在里面放置任意的文本内容
test
test
test
      <pre class="layui-code">// 在里面放置任意的文本内容
test
test
test
      <pre class="layui-code" lay-options="{ln: false}">// 不显示行号（注：v2.7.3 新增）
test
test
test
            </pre>
            </pre>
            </pre>

                    <pre class="layui-code" lay-options="{skin: 'dark'}">// 在里面放置任意的文本内容
test
test
test
      <pre class="layui-code" lay-options="{skin: 'dark'}">// 在里面放置任意的文本内容
test
test
test
<pre class="layui-code" lay-options="{skin: 'dark', ln: false}">// 不显示行号（注：v2.7.3 新增）
test
test
test
            </pre>
            </pre>
            </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: '150px'}">// 在里面放置任意的文本内容
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 class="layui-card">
                <div class="layui-card-header">自定义右上角内容</div>
                <div class="layui-card-body">
            <pre class="layui-code" lay-options="{about: 'code'}">// 在里面放置任意的文本内容
test
test
            </pre>
                    <div id="custom1">
                        自定义右上角内容，以便实现个性化操作
                        此处仅为演示，右上角实际功能需自主完成
                        😄
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
  layui.use('code', function () {
    // 执行渲染
    layui.code({
      elem: 'pre'
    })

    // custom more about
    layui.code({
      elem: '#custom1',
      about: [
        '<a href="javascript:;">复制</a>',
        '<a href="about:blank" target="_blank">跳转</a>'
      ].join('')
    })
  })
</script>