Skip to content

feat: center markdown images in docs by default#40

Merged
Julusian merged 2 commits intobitfocus:mainfrom
arikorn:feat_auto_center_images
Mar 1, 2026
Merged

feat: center markdown images in docs by default#40
Julusian merged 2 commits intobitfocus:mainfrom
arikorn:feat_auto_center_images

Conversation

@arikorn
Copy link
Contributor

@arikorn arikorn commented Mar 1, 2026

This improves readability and simplifies some cases. (A complete search of the repo did not reveal any cases in which this breaks the current text-flow, i.e. by breaking up a single line.)

Note a nice side-effect is that the image will always appear on its own line. (If you need to override this, it should be possible with inline html/style.)

Note: this is prelude to an internal reformat of for-developers (i.e. reformat the files with essentially no change to the built website)

Summary by CodeRabbit

  • Style
    • Markdown content now renders the last image as a centered block element, improving visual alignment for final images.

This improves readability and simplifies some cases.
(A complete search of the repo did not reveal any cases in which this breaks the current text-flow, i.e. by breaking up a single line.)

Note a nice side-effect is that the image will always appear on its own line. (If you need to override this, it should be possible with inline html/style.)

Note: this is prelude to an internal reformat of for-developers (i.e. reformat the files with essentially no change to the built website)
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 1, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5a72cc8 and 4988072.

📒 Files selected for processing (1)
  • src/css/custom.css

📝 Walkthrough

Walkthrough

This pull request adds a CSS rule targeting .markdown img:last-child to render the last image in Markdown content as a block-level element and center it using automatic horizontal margins.

Changes

Cohort / File(s) Summary
Markdown Last-Image Styling
src/css/custom.css
Adds a rule for .markdown img:last-child that sets display: block and margin-left: auto; margin-right: auto; to center the final image in Markdown-rendered content. No other selectors or declarations changed.

Poem

🎨📷
The final picture finds its place,
centered gently, framed with grace.
A tiny rule, a tidy view,
markdown smiles — thanks to you!

🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change: adding CSS to center markdown images in documentation by default.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1


ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b2f2e6c and 5a72cc8.

📒 Files selected for processing (1)
  • src/css/custom.css

Using p > img (suggested in PR bitfocus#42) leads to too many edge-cases that fail. For example, if the image is clickable, i.e. inside `<a>`.  The following is more robust and still overrideable by adding an element after it (such as <span>).
arikorn added a commit to arikorn/companion-website that referenced this pull request Mar 1, 2026
(sync with PR bitfocus#40)

Using p > img (suggested in PR bitfocus#42) leads to too many edge-cases that fail. For example, if the image is clickable, i.e. inside `<a>`.  The following is more robust and still overrideable by adding an element after it (such as <span>).
@Julusian Julusian merged commit 8052dc4 into bitfocus:main Mar 1, 2026
4 checks 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