Skip to content

fix(layer): add proper code block styling with Tailwind import#7

Merged
amondnet merged 2 commits intomainfrom
fix/code-block-styling
Dec 4, 2025
Merged

fix(layer): add proper code block styling with Tailwind import#7
amondnet merged 2 commits intomainfrom
fix/code-block-styling

Conversation

@amondnet
Copy link
Copy Markdown
Contributor

@amondnet amondnet commented Dec 4, 2025

Summary

Fixes code block styling issues by adding missing Tailwind CSS base import and implementing comprehensive code block styling with proper backgrounds, borders, and overflow handling.

Changes

  • Tailwind Import: Added @import "tailwindcss" to fix Alert/Callout color variables
  • Code Block CSS Variables: Added theme colors for code blocks (--code, --code-foreground, --code-highlight, --code-number)
  • Shiki Styling: Updated selectors to work with [data-pretty-code-figure] and [data-line] attributes
  • Scrollbar Hiding: Properly hidden scrollbars on code blocks using standard CSS properties
  • Line Styling: Fixed .line and [data-line] styling for proper spacing and alignment
  • Tabs Fix: Removed overflow-x-auto from tabs-item to eliminate unwanted horizontal scrollbar

Issues Fixed

  1. Missing Tailwind base import causing Alert/Callout colors not working
  2. Code blocks without proper background/border-radius styling
  3. Unwanted horizontal scrollbar on short code content
  4. Inconsistent line height and padding in code blocks

Test Plan

  • Verify code blocks display with proper background and border-radius
  • Check that code block scrollbars are hidden on short content
  • Confirm Alert/Callout components display correct colors
  • Test tabs component without unwanted horizontal scrollbar
  • Verify both light and dark theme colors are applied correctly

@amondnet
fix(layer): add proper code block styling with Tailwind import
628a930 
- Import Tailwind CSS base to fix Alert/Callout color variables
- Add code block CSS variables (--code, --code-foreground, --code-highlight, --code-number)
- Add [data-pretty-code-figure] styling with proper border-radius and overflow handling
- Replace [data-shiki] selectors with Shiki-compatible selectors
- Hide scrollbars on code blocks with -ms-overflow-style and scrollbar-width
- Add [data-line] styling for proper line height and padding
- Remove overflow-x-auto from tabs-item to eliminate unwanted scrollbar on short content

Fixes code block display issues with missing backgrounds and improper styling.
@gemini-code-assist
Copy link
Copy Markdown

gemini-code-assist bot commented Dec 4, 2025

Summary of Changes

Hello @amondnet, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refines the visual presentation and functionality of code blocks and related components across the application. It resolves several styling inconsistencies, ensuring a more polished and user-friendly experience, particularly concerning theme integration, code readability, and scroll behavior.

Highlights

  • Tailwind Integration: Ensured proper Tailwind CSS base import to resolve color variable issues in components like Alert/Callout.
  • Code Block Theming: Introduced new CSS variables for comprehensive code block styling, covering background, foreground, highlight, and line number colors for both light and dark themes.
  • Enhanced Code Block Styling: Implemented detailed styling for code blocks, including proper backgrounds, borders, overflow handling, and updated selectors to support [data-pretty-code-figure] and [data-line] attributes for better control over code presentation.
  • Scrollbar Management: Addressed unwanted horizontal scrollbars in code blocks by hiding them using standard CSS properties and removed overflow-x-auto from tabs-item to prevent unnecessary scrolling.
  • Line Numbering and Highlighting: Improved styling for individual code lines and line numbers, including proper spacing, alignment, and visual cues for highlighted lines and characters.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist[bot]
gemini-code-assist bot reviewed Dec 4, 2025
View reviewed changes
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request effectively resolves code block styling issues by adding the necessary Tailwind CSS import and implementing a comprehensive set of new styles. The use of CSS variables for theming and modern CSS features is well done. The related fix in index.md to remove overflow-x-auto is also a good change. My review includes a couple of minor suggestions for the new CSS to improve conciseness and consistency, but overall this is a solid improvement.

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Dec 4, 2025 •
edited
Loading

Deploying docs-please with  Cloudflare Pages  Cloudflare Pages

Latest commit: 2997e6d
Status:🚫  Deploy failed.

View logs

@amondnet amondnet self-assigned this Dec 4, 2025
@amondnet
chore: apply AI code review suggestions
2997e6d 
- Combine border-bottom properties into shorthand for conciseness
- Add !important to light mode Shiki color rule for consistency with dark mode
- Add explanatory comment for !important usage
@amondnet amondnet merged commit 450599c into main Dec 4, 2025
1 check failed
This was referenced Dec 4, 2025
Closed
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@gemini-code-assist gemini-code-assist[bot] gemini-code-assist[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

@amondnet amondnet

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@amondnet