pretty-print

panel/admin.tsx

@@ -1244,6 +1244,31 @@ const AdminPage: Component<AdminPageProps> = (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<AdminPageProps> = (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

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,