diff --git a/src/theme/css/general.css b/src/theme/css/general.css index 5c9d4fa0..ba899143 100644 --- a/src/theme/css/general.css +++ b/src/theme/css/general.css @@ -31,6 +31,11 @@ code { word-break: break-word; } +/* make wide tables scroll if they overflow */ +.table-wrapper { + overflow-x: auto; +} + /* Don't change font size in headers. */ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { font-size: unset; diff --git a/src/utils/mod.rs b/src/utils/mod.rs index 44494a8b..174fcceb 100644 --- a/src/utils/mod.rs +++ b/src/utils/mod.rs @@ -177,12 +177,28 @@ pub fn render_markdown_with_path(text: &str, curly_quotes: bool, path: Option<&P let p = new_cmark_parser(text, curly_quotes); let events = p .map(clean_codeblock_headers) - .map(|event| adjust_links(event, path)); + .map(|event| adjust_links(event, path)) + .flat_map(|event| { + let (a, b) = wrap_tables(event); + a.into_iter().chain(b) + }); html::push_html(&mut s, events); s } +/// Wraps tables in a `.table-wrapper` class to apply overflow-x rules to. +fn wrap_tables(event: Event<'_>) -> (Option>, Option>) { + match event { + Event::Start(Tag::Table(_)) => ( + Some(Event::Html(r#"
"#.into())), + Some(event), + ), + Event::End(Tag::Table(_)) => (Some(event), Some(Event::Html(r#"
"#.into()))), + _ => (Some(event), None), + } +} + fn clean_codeblock_headers(event: Event<'_>) -> Event<'_> { match event { Event::Start(Tag::CodeBlock(CodeBlockKind::Fenced(ref info))) => {