feat: add support for stretch tables (#701)

- Updated README.md to include a new section on stretch tables, explaining how to use the feature.
- Enhanced mdsvex preprocessor to apply styles for tables that need to stretch to full width when the special flag is included in the markdown.

Author: mishig25

README.md

@@ -26,6 +26,7 @@ This is the package we use to build the documentation of our Hugging Face repos.
     + [Anchor link](#anchor-link)
     + [LaTeX](#latex)
     + [Code Blocks](#code-blocks)
+    + [Stretch Tables](#stretch-tables)
     + [Inference Snippet](#inference-snippet)
   * [Writing API documentation (Python)](#writing-api-documentation-python)
     + [Autodoc](#autodoc)
@@ -504,6 +505,17 @@ Syntax:
 
 Example: [here](https://github.com/huggingface/text-generation-inference/blob/724199aaf172590c3658018c0e6bc6152cda4c2f/docs/source/basic_tutorials/launcher.md?plain=1#L3)
 
+### Stretch Tables
+
+By default, tables in the documentation are sized to fit their content. If you want tables to stretch to the full width of the content area, you can add a special flag at the top of your mdx file.
+
+Syntax:
+```
+<!-- STRETCH TABLES -->
+```
+
+This will make all tables in that page expand to 100% width of the content container.
+
 ### Inference Snippet
 
 The `InferenceSnippet` component is used to render an interactive interface for AI model inference. It uses [huggingface/huggingface.js](https://github.com/huggingface/huggingface.js) under the hood to get the snippets.

kit/preprocessors/mdsvex/index.js

@@ -22,8 +22,22 @@ function renderCode(code) {
 	);
 }
 
+const STRETCH_TABLES_STYLES = `<style>
+	:global(.prose table) {
+		width: 100% !important;
+		max-width: 100% !important;
+		display: table !important;
+	}
+</style>`;
+
+function addStretchTablesStyles(code) {
+	return code + "\n" + STRETCH_TABLES_STYLES;
+}
+
 const WRAP_CODE_BLOCKS_FLAG = "<!-- WRAP CODE BLOCKS -->";
+const STRETCH_TABLES_FLAG = "<!-- STRETCH TABLES -->";
 let wrapCodeBlocks = false;
+let stretchTables = false;
 
 export const mdsvexPreprocess = {
 	markup: async ({ content, filename }) => {
@@ -33,11 +47,15 @@ export const mdsvexPreprocess = {
 			// 	content = addCourseImports(content);
 			// }
 			wrapCodeBlocks = content.includes(WRAP_CODE_BLOCKS_FLAG);
+			stretchTables = content.includes(STRETCH_TABLES_FLAG);
 			content = markKatex(content, markedKatex);
 			content = escapeSvelteConditionals(content);
 			const processed = await _mdsvexPreprocess.markup({ content, filename });
 			processed.code = renderKatex(processed.code, markedKatex);
 			processed.code = renderCode(processed.code, filename);
+			if (stretchTables) {
+				processed.code = addStretchTablesStyles(processed.code);
+			}
 			return processed;
 		}
 		return { code: content };