feat: add side-by-side layout for previewed code blocks

[3w36zj6]

close #1

This pull request introduces a side-by-side layout for previewed code blocks.

[Copilot]

Pull Request Overview

This PR adds support for displaying code blocks in a side-by-side layout with their preview output. The implementation uses CSS flexbox to show code and preview content adjacently.

Key Changes

• Added CSS classes for side-by-side code/preview layout using flexbox
• Modified background color declaration to use !important to override external styles

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[YDX-2147483647]

Could the modification be limited to wide screens? On narrow screens, the original layout is easier to read.

Screenshots

Official:

Before (typst-jp):

After (this PR):

Update: The example for place.flush also looks better in the original layout.

[YDX-2147483647]

Most examples now look neat also on narrow screens!

However, the example for place.flush contains two pages, and it still overflows.

If you accept both of my suggestions, then it would be like this:

[3w36zj6]

I found something strange.

Regarding Identifiers on the Syntax page, in the official docs, the pre element which is a child of the previewed-code element has class="big". However, at least in the typst-docs JSON distributed with Typst dev builds v0.14.0, it seems this is not included.

[YDX-2147483647]

Interesting, the source code does not have anything related to big either.

The official docs only uses the typst-docs library (lib.rs), but does not use its CLI (main.rs). (2025-09-11, Discord)
I guess that the closed source part counts the number of characters per line and determines if it is big.

You can ask the typst team on Discord if you care.
However, I don't think we need to be exactly the same as the official docs.

[3w36zj6]

Let's move forward by considering this out of scope for this PR for now.

[ultimatile]

Likely related to the discussion above: on my ultrawide monitor, the code font appears small.
This is just a reference note on how it appears on my monitor.

(from model/bibliography)

Great PR, thank you!

[YDX-2147483647]

I have some codes with horizontal scroll bars.

Maybe it could be improved by

• adding lg:flex-wrap for .previewed-code,
• adding lg:flex-[1_0_auto] for .previewed-code pre,
• and adding lg:min-w-1/2 for .previewed-code .preview (or lg:min-w-2/5 to be more flexible).

Edit: I realize that flex-[1_0_auto] doesn't look good on narrow screens, because it will make the whole page overflow horizontally… Fixed.

Explanation:
flex-[1_0_auto] means the base size is the original width, and it can grow but not shrink.
When the browser displays .previewed-code, it first puts <pre> in its original size and puts .preview as 1/2 = 50%.
If their total width is smaller than that of container, then both <pre> and .preview grow to fit all width in the container.
Otherwise, .preview is wrapped into the next line, and <pre> and .preview still grow, but they fit each one's own width.

Before:

After:

[YDX-2147483647]

Could you merge main to this branch? Ideally it will trigger the netlify deploy preview.

git merge origin/main  # or upstream/main, depending on your local settings

[netlify]

✅ Deploy Preview for typst-docs-web ready!

Name	Link
🔨 Latest commit	0426ec8
🔍 Latest deploy log	https://app.netlify.com/projects/typst-docs-web/deploys/69078d9dab98a800089e61de
😎 Deploy Preview	https://deploy-preview-27--typst-docs-web.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[YDX-2147483647]

After adding whitespace-pre, the <pre> may cause the page to overflow horizontally on narrow screens.

Example: (en-US v0.14.0 /reference/styling/, window.innerWidth = 450)

Suggested change

	@apply flex-1 m-0 rounded-none whitespace-pre lg:flex-[1_0_auto];
	@apply flex-1 m-0 rounded-none whitespace-pre overflow-x-auto lg:flex-[1_0_auto];

typst-docs-web/src/components/templates/BaseTemplate.tsx

Line 179 in 2ae7f83

<div class="container mx-auto max-w-8xl px-4 sm:px-6 lg:px-8 flex relative">

Adding overflow-x-auto here, and changing this flex in <BaseTemplate> to lg:flex would make <pre> scrollable and avoid the page from overflowing horizontally.

[3w36zj6]

Added margin-bottom to ensure proper spacing when multiple previewed code blocks appear consecutively. This matches the style used on GitHub Web. For reference, see /guides/accessibility/#maintaining-semantics.