Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve inline code and code block support in RTL languages #525

Merged
merged 6 commits into from
Aug 21, 2023

Conversation

delucis
Copy link
Member

@delucis delucis commented Aug 16, 2023

What kind of changes does this PR include?

  • Changes to Starlight code

Description

This PR applies a rehype plugin to Starlight Markdown and MDX content to improve appearance in RTL languages.

  • Code blocks have dir="ltr" added to the <pre> tag.
  • Inline code has dir="auto" added to the <code> tag.
  • For code blocks this may be an interim solution until we migrate to Expressive Code.
  • Research CodePen while working out the best set-up: https://codepen.io/delucis/pen/vYvBmKx

We don’t currently have an RTL language in our docs site to test with, so I added some Arabic content locally to test these changes.

Before After
RTL Starlight page where code content is misaligned to the right RTL Starlight page where code content is correctly aligned to the left

Note that in the second image, the code blocks are left-aligned even though page content is right-aligned and that the inline code reads correctly as @astrojs/* instead of */astrojs@.

@changeset-bot
Copy link

changeset-bot bot commented Aug 16, 2023

🦋 Changeset detected

Latest commit: 10b17f9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@astrojs/starlight Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Aug 16, 2023

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit 10b17f9
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/64e3451b199f270008c5f9e5
😎 Deploy Preview https://deploy-preview-525--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label Aug 16, 2023
@astrobot-houston
Copy link
Collaborator

astrobot-houston commented Aug 16, 2023

size-limit report 📦

Path Size
/index.html 9.58 KB (+0.09% 🔺)
/_astro/*.js 16.33 KB (0%)
/_astro/*.css 8.43 KB (0%)

delucis and others added 2 commits August 17, 2023 23:20
Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com>
@delucis delucis added the 🌟 patch Change that triggers a patch release label Aug 21, 2023
@delucis delucis merged commit 87caf21 into main Aug 21, 2023
9 checks passed
@delucis delucis deleted the chris/rtl-code branch August 21, 2023 11:16
@astrobot-houston astrobot-houston mentioned this pull request Aug 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟 core Changes to Starlight’s main package 🌟 patch Change that triggers a patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants