ui/test.md

<div class="code-box">
  <header class="title">
    <section><i></i><i></i><i></i></section>
    <section>${this.lang}</section>
    <wc-icon
      title="复制"
      class="act"
      name="doc"
      @click=${this.copyCode}
    ></wc-icon>
  </header>
  <div class="code-block">
    ${this.#code.map(s => html`<code>${raw(s)}</code>`)}
  </div>
</div>

import { html, raw, css, Component, nextTick } from '@bd/core'
import { colorHtml, colorJs, colorCss, colorMd } from './colorful.js'
import '../icon/index.js'
import '../layer/index.js'

function trim(str) {
  return str
    .trim()
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&amp;/g, '&')
}

class Code extends Component {
  static props = {
    code: {
      type: String,
      default: '',
      attribute: false,
      observer(v) {
        this.setCode(v.trim())
      }
    },
    lang: ''
  }

  

  #code = []

  setCode(txt, a) {
    let lang = this.lang

    switch (lang) {
      case 'js':
      case 'javascript':
      case 'ts':
      case 'typescript':
        txt = colorJs(txt)
        break

      case 'html':
        txt = colorHtml(txt)
        break

      case 'css':
      case 'scss':
      case 'less':
        txt = colorCss(txt)
        break

      case 'md':
      case 'markdown':
        txt = colorMd(txt)
        break
    }

    this.#code = txt.split('\n')
  }

  copyCode() {
    navigator.clipboard.writeText(this.code)
    layer.toast('复制到粘贴板成功', 'success')
  }

  mounted() {
    var txt = this.innerHTML || this.textContent
    txt = txt.trim().replace(/^[\r\n]|\s{2,}$/g, '')

    if (txt.startsWith('<xmp>') && txt.endsWith('</xmp>')) {
      txt = txt.slice(5, -6).trim()
    } else if (this.firstElementChild?.tagName === 'TEXTAREA') {
      txt = this.firstElementChild.value.trim()
    } else if (txt.startsWith('<pre>') && txt.endsWith('</pre>')) {
      txt = trim(txt.slice(5, -6))
    } else {
      txt = trim(txt)
    }

    this.textContent = ''
    if (txt) {
      nextTick(_ => {
        this.code = txt
      })
    }
  }

  render() {
    let foo = html`<section>${this.#code.map(s => html`<a>${s}</a>`)}</section>`

    return html`
      <div class="code-box">
        <header class="title">
          <section><i></i><i></i><i></i></section>
          <section>${this.lang}</section>
          <wc-icon
            title="复制"
            class="act"
            name="doc"
            @click=${this.copyCode}
          ></wc-icon>
        </header>
        <div class="code-block">
          ${this.#code.map(s => html`<code>${raw(s)}</code>`)}
        </div>
      </div>
    `
  }
}

Code.reg('code')