Merge branch 'main' of github.com:sveltejs/svelte.dev

Author: Rich-Harris

apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte

@@ -172,7 +172,7 @@
 	.text :global(.filename) {
 		background-position: 1rem 54%;
 		background-size: 1rem 1rem;
-		padding-left: 2.5rem;
+		padding-left: 2.5rem !important;
 	}
 
 	@media (prefers-color-scheme: dark) {

apps/svelte.dev/src/routes/tutorial/[slug]/markdown.server.js

@@ -42,8 +42,6 @@ const default_renderer = {
 		/** @type {Record<string, string>} */
 		const options = {};
 
-		let html = '';
-
 		let source = text
 			.replace(/\/\/\/ (.+?)(?:: (.+))?\n/gm, (_, key, value) => {
 				options[key] = value;
@@ -64,6 +62,14 @@ const default_renderer = {
 			})
 			.replace(/\*\\\//g, '*/');
 
+		let html = '<div class="code-block"><div class="controls">';
+
+		if (options.file) {
+			html += `<span class="filename">${options.file}</span>`;
+		}
+
+		html += '</div>';
+
 		if (lang === 'diff') {
 			const lines = source.split('\n').map((content) => {
 				let type = null;
@@ -78,23 +84,23 @@ const default_renderer = {
 				};
 			});
 
-			html = `<div class="code-block"><pre class="language-diff"><code>${lines
+			html += `<pre class="language-diff"><code>${lines
 				.map((line) => {
 					if (line.type) return `<span class="${line.type}">${line.content}\n</span>`;
 					return line.content + '\n';
 				})
-				.join('')}</code></pre></div>`;
+				.join('')}</code></pre>`;
 		} else {
 			const plang = languages[/** @type {keyof languages} */ (lang)];
 			const highlighted = plang
 				? PrismJS.highlight(source, PrismJS.languages[plang], lang)
 				: escape_html(source);
 
-			html = `<div class="code-block">${
-				options.file ? `<span class="filename">${options.file}</span>` : ''
-			}<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
+			html += `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
 		}
 
+		html += '</div>';
+
 		return html
 			.replace(/ {13}([^ ][^]+?) {13}/g, (_, content) => {
 				return highlight_spans(content, 'highlight add');

packages/site-kit/src/lib/components/Text.svelte

@@ -105,7 +105,7 @@
 					display: block;
 					flex: 1;
 					font-family: var(--sk-font-mono);
-					font-size: 1.2rem;
+					font-size: var(--sk-font-size-code);
 					font-weight: 400;
 					padding: 0 1rem;
 					color: var(--sk-text-2);