diff --git a/src/services/htmlMarkdownUtils.test.ts b/src/services/htmlMarkdownUtils.test.ts
index e466c35..3fd5eca 100644
--- a/src/services/htmlMarkdownUtils.test.ts
+++ b/src/services/htmlMarkdownUtils.test.ts
@@ -34,4 +34,53 @@ describe('markdownToHtmlNoImages', () => {
const html = markdownToHtmlNoImages(markdown);
expect(html).toMatch(/
\s*My Table<\/caption>/);
});
+
+ it('adds scope="col" to table headers', () => {
+ const markdown = `
+| Header 1 | Header 2 |
+| --- | --- |
+| Cell 1 | Cell 2 |`;
+ const html = markdownToHtmlNoImages(markdown);
+ expect(html).toContain('| Header 1 | ');
+ expect(html).toContain('Header 2 | ');
+ });
+
+ it('does not add an extra empty header row', () => {
+ const markdown = `
+| Header |
+| --- |
+| Cell |`;
+ const html = markdownToHtmlNoImages(markdown);
+ expect(html).not.toContain(' | ');
+ const thCount = (html.match(/ {
+ const markdown = `
+
+
+
+ | Raw Header |
+
+
+
+
+ | Raw Cell |
+
+
+
+
+| MD Header |
+| --- |
+| MD Cell |`;
+ const html = markdownToHtmlNoImages(markdown);
+
+ // Raw table should be untouched (or at least not have scope="col" added if it wasn't there)
+ expect(html).toContain(' | Raw Header | ');
+ expect(html).not.toContain('Raw Header | ');
+
+ // Markdown table should have scope="col"
+ expect(html).toContain('MD Header | ');
+ });
});
diff --git a/src/services/htmlMarkdownUtils.ts b/src/services/htmlMarkdownUtils.ts
index b53ef5d..24209f5 100644
--- a/src/services/htmlMarkdownUtils.ts
+++ b/src/services/htmlMarkdownUtils.ts
@@ -47,6 +47,20 @@ marked.use(
marked.use({ extensions: [mermaidExtension] });
+// We use a custom renderer instead of a regex replace because regex is too aggressive.
+// It would add scope="col" to raw HTML tables (which we want to leave alone).
+// The renderer only applies to markdown tables.
+marked.use({
+ renderer: {
+ tablecell({ text, header, align }) {
+ const type = header ? "th" : "td";
+ const alignAttr = align ? ` align="${align}"` : "";
+ const scopeAttr = header ? ' scope="col"' : "";
+ return `<${type}${scopeAttr}${alignAttr}>${text}${type}>\n`;
+ },
+ },
+});
+
export function extractImageSources(htmlString: string) {
const srcUrls = [];
const regex = /
]+src=["']?([^"'>]+)["']?/g;