thomas/jobbi-bewerbung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

KI-Chat: Markdown-Tabellen und Trennlinien werden gerendert

Browse Source 
Der Mini-Renderer kannte weder Tabellen noch ---, also landeten beide als
roher Text in einem Absatz: aus einer Anforderung/Erfahrung-Tabelle wurde
eine einzeilige Pipe-Wueste, aus --- blieb ---. Das Modell nutzt aber
gerade fuer Passungs-Vergleiche gern Tabellen.

- GFM-Tabellen inkl. Ausrichtung (:--:), auch ohne Rand-Pipes.
- Krumme Zeilen werden auf die Kopfbreite gezogen (fehlende Zellen leer,
  ueberzaehlige raus), sonst zerreisst eine Zeile das Raster.
- Wrapper scrollt horizontal, damit eine breite Tabelle die Chat-Blase
  auf dem Handy nicht auseinanderzieht.
- Zellinhalte laufen durch dieselbe Escape-/inlineFmt-Kette wie der Rest,
  HTML aus dem Modell kann also weiterhin nichts injizieren.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-14 12:15:25 +02:00
co-authored by Claude Opus 4.8
parent 4a036fe215
commit 4b3e66b4bd
2 changed files with 63 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/chat.ejs
+10
View File
@@ -44,6 +44,16 @@
.dark .chat-md pre { background: rgba(0,0,0,0.35); }
.chat-md pre code { background: none; padding: 0; }
.chat-md a { text-decoration: underline; }
.chat-md hr { border: 0; border-top: 1px solid rgba(0,0,0,0.12); margin: 0.7rem 0; }
.dark .chat-md hr { border-top-color: rgba(255,255,255,0.15); }
/* Tabellen (z. B. Anforderung/Erfahrung-Vergleiche). Der Wrapper scrollt,
damit eine breite Tabelle nicht die Chat-Blase auseinanderzieht. */
.chat-md-table { overflow-x: auto; margin: 0 0 0.5rem 0; }
.chat-md table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.chat-md th, .chat-md td { border: 1px solid rgba(0,0,0,0.12); padding: 0.35rem 0.55rem; text-align: left; vertical-align: top; }
.chat-md th { background: rgba(0,0,0,0.04); font-weight: 600; }
.dark .chat-md th, .dark .chat-md td { border-color: rgba(255,255,255,0.15); }
.dark .chat-md th { background: rgba(255,255,255,0.06); }
</style>
</head>
<body class="min-h-screen flex flex-col transition-colors duration-300 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100" id="body">