diff --git a/panel/admin.tsx b/panel/admin.tsx index 7d80174a..51137577 100644 --- a/panel/admin.tsx +++ b/panel/admin.tsx @@ -1244,6 +1244,31 @@ const AdminPage: Component = (props) => { return 'plaintext' } + /** + * Форматирует XML/HTML с отступами + */ + function prettyFormatXML(xml: string): string { + let formatted = ''; + const reg = /(>)(<)(\/*)/g; + xml = xml.replace(reg, '$1\r\n$2$3'); + let pad = 0; + xml.split('\r\n').forEach((node) => { + let indent = 0; + if (node.match(/.+<\/\w[^>]*>$/)) { + indent = 0; + } else if (node.match(/^<\//)) { + if (pad !== 0) pad -= 2; + } else if (node.match(/^<\w([^>]*[^/])?>.*$/)) { + indent = 2; + } else { + indent = 0; + } + formatted += ' '.repeat(pad) + node + '\r\n'; + pad += indent; + }); + return formatted.trim(); + } + /** * Форматирует и подсвечивает код */ @@ -1259,8 +1284,9 @@ const AdminPage: Component = (props) => { return content } } else if (language === 'markup') { - // Для HTML используем как есть - return Prism.highlight(content, Prism.languages[language], language) + // Форматируем XML/HTML с отступами + const formatted = prettyFormatXML(content) + return Prism.highlight(formatted, Prism.languages[language], language) } return content diff --git a/panel/styles.css b/panel/styles.css index e5eeaf2f..a0b661bc 100644 --- a/panel/styles.css +++ b/panel/styles.css @@ -63,6 +63,14 @@ --z-modal: 1000; --z-dropdown: 100; --z-header: 50; + + --code-bg: #fff; + --code-text: #222; + --code-comment: #888; + --code-keyword: #a626a4; + --code-property: #005cc5; + --code-string: #22863a; + --code-operator: #b76e00; } body { @@ -469,19 +477,24 @@ tr:hover { flex: 1; } +.body-content, +.body-content code { + white-space: pre-wrap; + word-break: break-word; + overflow-x: auto; +} + .body-content { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5; tab-size: 2; hyphens: none; - white-space: pre-wrap; - word-break: break-word; margin: 0; padding: var(--spacing-4); background-color: var(--code-bg); border-radius: var(--border-radius-md); - overflow-x: auto; + color: var(--code-text); } .language-badge { @@ -554,6 +567,7 @@ tr:hover { .body-content { color: var(--code-text); + background-color: var(--code-bg); } .token.comment,