Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Enhancement] `:root {font-family: system-ui;}` should be the default.

Open Beginner friendly
  • Is something wrong?
#876 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
css, typescript
Domain
frontend

Research direction

No source file or test is named. Start by locating where the preview's default page styling is defined and compare it with the CommonMark renderer behavior described here. Done means rendered previews use a system-ui root font by default, while the supplied HTML example displays with the intended font.

Written by the indexing model from the issue text.

Description

The Problem

As orgs/quarto-dev/discussions/14935#discussioncomment-18568454 explains, I have:

<!docType HTML>
<HTML>
	<head>
		<title>Page tltlmx</title>
		<meta charSet="UTF-8">
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		>
		<style>
			section
				{
					margin-inline-start: 2em;
				}
			[role="heading"]
				{
					font-weight: bold;
				}
			body
				{
					max-width: 21cm;
				}
		</style>
		<script
			defer
			type="text/javaScript"
			src="./js.js"
		></script>
	</head>
	<body>
		<p role="heading">Heading Text</p>
		<section>
			<p role="heading">Heading Text</p>
			<section>
				<p>Lorem ipsum dolor sit amet consectetur adipiscing elit reprehenderit nisi. In pariatur qui dolore aliquip sunt irure labore. At cumque temporibus aute officia quidem. Ea atque eos minim quod non nulla pariatur. Sunt quod adipiscing nulla sunt ut imperdiet dolor possimus accusamus. Aut mollitia quidem cum aliquip corrupti imperdiet dolore tempore quas quibusdam molestias. Atque qui pariatur reprehenderit dignissimos quos dignissimos esse ea repellendus. Qui cum quidem cum omnis est et dolore et anim id expedita ut. Deleniti molestias excepturi quibusdam consequat occaecat ipsum occaecat.</p>
			</section>
			<p role="heading">Heading Text</p>
			<section>
				<p>Lorem ipsum dolor sit amet consectetur adipiscing elit reprehenderit nisi. In pariatur qui dolore aliquip sunt irure labore. At cumque temporibus aute officia quidem. Ea atque eos minim quod non nulla pariatur. Sunt quod adipiscing nulla sunt ut imperdiet dolor possimus accusamus. Aut mollitia quidem cum aliquip corrupti imperdiet dolore tempore quas quibusdam molestias. Atque qui pariatur reprehenderit dignissimos quos dignissimos esse ea repellendus. Qui cum quidem cum omnis est et dolore et anim id expedita ut. Deleniti molestias excepturi quibusdam consequat occaecat ipsum occaecat:</p>
				<section>
					<p>Lorem ipsum dolor sit amet consectetur adipiscing elit reprehenderit nisi. In pariatur qui dolore aliquip sunt irure labore. At cumque temporibus aute officia quidem. Ea atque eos minim quod non nulla pariatur. Sunt quod adipiscing nulla sunt ut imperdiet dolor possimus accusamus. Aut mollitia quidem cum aliquip corrupti imperdiet dolore tempore quas quibusdam molestias. Atque qui pariatur reprehenderit dignissimos quos dignissimos esse ea repellendus. Qui cum quidem cum omnis est et dolore et anim id expedita ut. Deleniti molestias excepturi quibusdam consequat occaecat ipsum occaecat.</p>
					<p>Lorem ipsum dolor sit amet consectetur adipiscing elit reprehenderit nisi. In pariatur qui dolore aliquip sunt irure labore. At cumque temporibus aute officia quidem. Ea atque eos minim quod non nulla pariatur. Sunt quod adipiscing nulla sunt ut imperdiet dolor possimus accusamus. Aut mollitia quidem cum aliquip corrupti imperdiet dolore tempore quas quibusdam molestias. Atque qui pariatur reprehenderit dignissimos quos dignissimos esse ea repellendus. Qui cum quidem cum omnis est et dolore et anim id expedita ut. Deleniti molestias excepturi quibusdam consequat occaecat ipsum occaecat.</p>
				</section>
				<p role="heading">Heading Text</p>
				<section>
					<p role="heading">Heading Text</p>
					<section>
						<p>Lorem ipsum dolor sit amet consectetur adipiscing elit reprehenderit nisi. In pariatur qui dolore aliquip sunt irure labore. At cumque temporibus aute officia quidem. Ea atque eos minim quod non nulla pariatur. Sunt quod adipiscing nulla sunt ut imperdiet dolor possimus accusamus. Aut mollitia quidem cum aliquip corrupti imperdiet dolore tempore quas quibusdam molestias. Atque qui pariatur reprehenderit dignissimos quos dignissimos esse ea repellendus. Qui cum quidem cum omnis est et dolore et anim id expedita ut. Deleniti molestias excepturi quibusdam consequat occaecat ipsum occaecat.</p>
					</section>
					<p role="heading">Heading Text</p>
					<section>
						<p>Lorem ipsum dolor sit amet consectetur adipiscing elit reprehenderit nisi. In pariatur qui dolore aliquip sunt irure labore. At cumque temporibus aute officia quidem. Ea atque eos minim quod non nulla pariatur. Sunt quod adipiscing nulla sunt ut imperdiet dolor possimus accusamus. Aut mollitia quidem cum aliquip corrupti imperdiet dolore tempore quas quibusdam molestias. Atque qui pariatur reprehenderit dignissimos quos dignissimos esse ea repellendus. Qui cum quidem cum omnis est et dolore et anim id expedita ut. Deleniti molestias excepturi quibusdam consequat occaecat ipsum occaecat.</p>
					</section>
				</section>
			</section>
		</section>
	</body>
</HTML>

This renders with a variable-width, serif font:

Image

…whereas it should adhere to:

beedell.roke_julian_lockhart@beedell:~$ fc-match -f '%{family}\t%{style}\t%{file}\n' \
  "$(kreadconfig6 --group General --key font | cut -d, -f1)" |
python3 -c '
import json
import sys

family, style, file = sys.stdin.readline().rstrip("\n").split("\t", 2)
print(json.dumps({"family": family, "style": style, "file": file}))
' |
yq -P
family: Noto Sans Mono
style: Regular
file: /usr/share/fonts/google-noto/NotoSansMono-Regular.ttf

…as the default CommonMark renderer does.

Adding :root {font-family: system-ui;} resolves this:

Image

However, it should be the default.

This may have previously been discussed at issues/661#event-1840092122, and issues which link to there.

My Environment
  • The Extension
    Version: 0.5.2026092301
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
  • VSC
    Version: 1.140.0-insider
Commit: 4a6a3612a562c50f54c2bd5211f0ea42915b974e
Date: 2026-09-25T10:57:28Z
Electron: 43.7.3
ElectronBuildId: 15386805
Chromium: 150.0.7871.250
Node.js: 24.21.0
V8: 15.0.245.31-electron.0
@github/copilot: 1.0.89-3
@github/copilot-sdk: 1.0.15-preview.3
OS: Linux x64 7.2.7-200.fc44.x86_64
Dominant language
TypeScript
Stars
596
Forks
119
Avg merge
3d 5h
Merged PRs (30d)
4

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/vscode-livepreview

All issues in microsoft/vscode-livepreview

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.