Skip to content

feat(ui): add native github-flavored markdown tables with typography styling#330

Merged
jordan-dalby merged 1 commit intojordan-dalby:mainfrom
jospaquim:feature/markdown-tables
Mar 8, 2026
Merged

feat(ui): add native github-flavored markdown tables with typography styling#330
jordan-dalby merged 1 commit intojordan-dalby:mainfrom
jospaquim:feature/markdown-tables

Conversation

@jospaquim
Copy link
Contributor

This PR significantly enhances the Markdown rendering capabilities of ByteStash by introducing native support for GitHub-Flavored Markdown (GFM) tables and fixing layout breaking issues caused by plain text/ASCII tables.

Changes Made

  • Native GFM Tables: Integrated remark-gfm into the React MarkdownRenderer component allowing standard Markdown tables to be parsed into actual HTML table elements.
  • Typography Auto-Styling: Added the official @tailwindcss/typography plugin to the Tailwind configuration. This automatically applies beautiful, cohesive styles (borders, alternating rows, paddings) to the newly rendered Markdown tables through the .prose class wrapper.
  • ASCII Tables Layout Fix: Removed the destructive word-break: break-all behavior from FullCodeBlock and PreviewCodeBlock. Replaced it with native horizontal scrolling (overflow-x: auto), which prevents long lines of code, logs, and wide ASCII text-tables from breaking their structural shape when reaching the container's edge.

Testing Instructions

  1. Open or create a Code Snippet and set its language to "Markdown".
  2. Paste a standard GFM table (| Header | Header |) and save.
  3. Open the "Full View" and verify the table renders natively with Tailwind typography styles.
  4. Paste a wide line of un-wrapped plain text or an ASCII design and verify that a horizontal scrollbar appears, strictly preserving the text format without line-breaks.

Type of Change

  • New feature (non-breaking change which adds functionality)
  • Bug fix (Fixed text breaking behavior for pre-formatted blocks)

@jordan-dalby
Copy link
Owner

jordan-dalby commented Mar 7, 2026

Very nice! Would you mind rebasing this branch with the current version of main, I merged your other PR separately. Thanks! :)

@jospaquim jospaquim force-pushed the feature/markdown-tables branch from ebea5dd to c75d7eb Compare March 8, 2026 14:17
@jospaquim
Copy link
Contributor Author

All set! I've rebased the branch with the current main as requested. Let me know if you need anything else. @jordan-dalby

@jordan-dalby
Copy link
Owner

All set! I've rebased the branch with the current main as requested. Let me know if you need anything else. @jordan-dalby

Hi! I think you kept the wrong commit, this commit is from the previous PR.

@jospaquim jospaquim force-pushed the feature/markdown-tables branch from c75d7eb to bfd3f50 Compare March 8, 2026 17:46
@jospaquim
Copy link
Contributor Author

You're right, thanks for catching that. I've removed the unrelated commit and updated the PR.

@jordan-dalby jordan-dalby merged commit b05c631 into jordan-dalby:main Mar 8, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants