From f22a5e9389ad1d633ec68dc1c11218e9a5a63237 Mon Sep 17 00:00:00 2001
From: Christophe Dervieux <christophe.dervieux@gmail.com>
Date: Fri, 25 Oct 2024 20:26:09 +0200
Subject: [PATCH 1/2] Correctly overwrite _reboot.scss to not apply font-size
 twice

This follows up on https://github.com/quarto-dev/quarto-cli/pull/11028 to do it differently in similar manner as in `_reboot.scss` so that code inside pre does not apply font-size a second time
---
 .../formats/html/bootstrap/_bootstrap-rules.scss  | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss
index a4676bee06b..91080707da3 100644
--- a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss
+++ b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss
@@ -2150,15 +2150,26 @@ code.sourceCode a.code-annotation-anchor {
 // override _reboot.scss
 
 // code blocks
-pre code {
+pre {
   font-family: $font-family-monospace-block;
   // I'm really not confident that this is correct
   @include font-size($code-block-font-size);
   font-weight: $font-weight-monospace-block;
+
+  // adding these inherit overrides here
+  // is what `_reboot.scss` does.
+  // we mirror it here for consistency
+  //
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    font-family: inherit;
+    @include font-size(inherit);
+    font-weight: inherit;
+  }
 }
 
 // code inlines
-p code {
+code {
   font-family: $font-family-monospace-inline;
   @include font-size($code-inline-font-size);
   font-weight: $font-weight-monospace-inline;

From 53f4ba38f7a0dbc2771c80534d3940f536eb00aa Mon Sep 17 00:00:00 2001
From: Christophe Dervieux <christophe.dervieux@gmail.com>
Date: Mon, 28 Oct 2024 11:21:05 +0000
Subject: [PATCH 2/2] test - code block font size should not be applied twiced

add a test with playwright to check that we don't modify code fontsize in a way that this is will get a different value for code inside pre than font-size of pre itself
---
 tests/docs/playwright/html/code-font-size.qmd          |  8 ++++++++
 tests/integration/playwright/tests/html-themes.spec.ts | 10 ++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 tests/docs/playwright/html/code-font-size.qmd

diff --git a/tests/docs/playwright/html/code-font-size.qmd b/tests/docs/playwright/html/code-font-size.qmd
new file mode 100644
index 00000000000..b3bb0a94ccb
--- /dev/null
+++ b/tests/docs/playwright/html/code-font-size.qmd
@@ -0,0 +1,8 @@
+---
+title: Testing code font size
+format: html
+---
+
+```python
+1 + 1
+```
diff --git a/tests/integration/playwright/tests/html-themes.spec.ts b/tests/integration/playwright/tests/html-themes.spec.ts
index 84d53f7b866..0ecb43cf809 100644
--- a/tests/integration/playwright/tests/html-themes.spec.ts
+++ b/tests/integration/playwright/tests/html-themes.spec.ts
@@ -19,4 +19,14 @@ test('Dark theming toggle change to dark background ', async ({ page }) => {
   await page.locator("a.quarto-color-scheme-toggle").click();
   const locatr2 = await page.locator('div').filter({ hasText: 'Quarto Playground' }).first()
   await expect(locatr2).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+});
+
+test('Code block font size did not change and still equals to pre size', async ({ page }) => {
+  await page.goto('./html/code-font-size.html');
+  const code = page.getByRole('code')
+  const pre = page.locator('pre')
+  const preFontSize = await pre.evaluate((element) =>
+    window.getComputedStyle(element).getPropertyValue('font-size'),
+  );
+  await expect(code).toHaveCSS('font-size', preFontSize);
 });
\ No newline at end of file