1
import MarkdownIt from 'markdown-it-async'
2

3
const md = MarkdownIt()
4

5
// ...
6

7
/**
8
 * 将 markdown 字符串通过 markdown-it 渲染为 html 字符串
9
 * @param content markdown 字符串
10
 * @returns html 字符串
11
 */
12
export async function renderMarkdown(content: string) {
13
  const htmlContent = await md.render(content)
14
  return htmlContent
15
}

1
import { MarkdownItAsync } from 'markdown-it-async'
2
import highlight from 'markdown-it-highlightjs'
3
import CodeBlockWrapper from './CodeBlockWrapper'
4
import linkAttr from 'markdown-it-link-attributes'
5
import mathjax3 from 'markdown-it-mathjax3'
6

7
/** markdown-it 实例 */
8
let _md: MarkdownItAsync
9

10
/** 获取并初始化 markdown-it 实例 */
11
export async function getMarkdownItInstance(): Promise<MarkdownItAsync> {
12
  if (_md) return _md
13
  _md = new MarkdownItAsync()
14
  // 代码高亮
15
  _md.use(highlight)
16
  // 代码块使用自定义组件包裹
17
  _md.use(CodeBlockWrapper)
18
  // 链接在新窗口打开
19
  _md.use(linkAttr, { attrs: { target: '_blank', rel: 'noopener'} })
20
  // 渲染数学公式
21
  _md.use(mathjax3, {
22
    tex: {
23
      tags: 'ams',
24
      inlineMath: [
25
        // start/end delimiter pairs for in-line math
26
        ["$", "$"],
27
        ["\\(", "\\)"]
28
      ],
29
      displayMath: [
30
        // start/end delimiter pairs for display math
31
        ["$$", "$$"],
32
        ["\\[", "\\]"]
33
      ],
34
    }
35
  })
36
  return _md
37
}
38

39
/**
40
 * 将 markdown 字符串通过 markdown-it 渲染为 html 字符串
41
 * @param content markdown 字符串
42
 * @returns html 字符串
43
 */
44
export async function renderMarkdown(content: string) {
45
  const processedContent = getProcessedContent(content)
46
  const md = await getMarkdownItInstance()
47
  const htmlContent = await md.renderAsync(processedContent)
48
  return htmlContent
49
}
50

51
/**
52
 * 将 markdown 字符串进行预处理, 将 `\\[` 和 `\\]` 替换为 `$$`
53
 * @param content markdown 字符串
54
 */
55
export function getProcessedContent(content: string) {
56
  return content.replace(/\\\[|\\\]/g, '$$')
57
}

1
import type { MarkdownItAsync } from "markdown-it-async";
2
import hljs from "highlight.js";
3

4
/**
5
 * 自定义插件: 添加复制按钮
6
 * @param md markdown-it 实例
7
 */
8
export default function CodeBlockWrapper(md: MarkdownItAsync) {
9
  const defaultRenderer = md.renderer.rules.fence || ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));
10

11
  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
12
    const token = tokens[idx];
13
    const code = token.content.trim();
14
    const lang = token.info.trim();
15

16
    let highlightedCode = '';
17
    if (lang && hljs.getLanguage(lang)) {
18
      highlightedCode = hljs.highlight(code, { language: lang }).value;
19
    } else {
20
      highlightedCode = md.utils.escapeHtml(code);
21
    }
22

23
    // const copyButtonHtml = '<button class="copy-button" title="Copy to clipboard">Copy</button>';
24
    const preHtml = `<pre class="hljs"><code>${highlightedCode}</code></pre>`;
25
    // const html = `<div class="code-block">${copyButtonHtml}${preHtml}</div>`;
26
    const html = `<hyosan-chat-code-block-wrapper language="${lang}">${preHtml}</hyosan-chat-code-block-wrapper>`
27

28
    return html;
29
  };
30
}

1
import ShoelaceElement from '@/internal/shoelace-element'
2
import { LocalizeController } from '@/utils/localize'
3
import { css, html } from 'lit'
4
import { customElement, property, state } from 'lit/decorators.js'
5

6
/** 发送 组件 */
7
@customElement('hyosan-chat-code-block-wrapper')
8
export class HyosanChatCodeBlockWrapper extends ShoelaceElement {
9
  static styles? = css`
10
    :host {
11
      display: block;
12
      margin: 1rem 0;
13
    }
14
    .code-block-container {
15
      display: block;
16
      border-radius: var(--hy-container-radius);
17
      border: 1px solid rgba(60, 60, 60, 0.1);
18
      background-color: var(--sl-color-neutral-500);
19
      header {
20
        margin: 0.3rem 0.5rem;
21
        color: #EEE;
22
        display: flex;
23
        justify-content: space-between;
24
        button {
25
          display: block;
26
          cursor: pointer;
27
        }
28
      }
29
    }
30
    ::slotted(pre) {
31
      padding: var(--hy-container-padding);
32
      margin: 0;
33
      border-bottom-left-radius: var(--hy-container-radius);
34
      border-bottom-right-radius: var(--hy-container-radius);
35
    }
36
  `
37

38
  @property({ type: String })
39
  language = 'javascript'
40

41
  @state()
42
  private _copyButtonContent = ''
43

44
  /** 本地化控制器 */
45
  private _localize = new LocalizeController(this)
46

47
  private _handleCopy() {
48
    const pre = this.querySelector('pre')
49
    if (pre) {
50
      const text = pre.textContent
51
      if (text) {
52
        navigator.clipboard.writeText(text)
53
        this._copyButtonContent = this._localize.term('copySuccessfully')
54
        setTimeout(() => {
55
          this._copyButtonContent = this._localize.term('copy')
56
          this.requestUpdate()
57
        }, 2000)
58
      }
59
    }
60
  }
61

62
  render() {
63
    const copyButtonContent = this._copyButtonContent || this._localize.term('copy')
64
    return html`
65
      <div class="code-block-container">
66
        <header>
67
          <div class="lang">${this.language}</div>
68
          <div class="button-group">
69
            <button @click=${this._handleCopy}>${copyButtonContent}</button>
70
          </div>
71
        </header>
72
        <main>
73
          <slot></slot>
74
        </main>
75
      </div>
76
    `
77
  }
78
}
79

80
declare global {
81
  interface HTMLElementTagNameMap {
82
    'hyosan-chat-code-block-wrapper': HyosanChatCodeBlockWrapper
83
  }
84
}