diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss
index d552e1d467c..4e25df7bc13 100644
--- a/src/resources/formats/revealjs/quarto.scss
+++ b/src/resources/formats/revealjs/quarto.scss
@@ -104,6 +104,21 @@ $dark-bg-link-color: #42affa !default;
 $light-bg-code-color: #4758ab !default;
 $dark-bg-code-color: #ffa07a !default;
 
+// KBD variables
+$kbd-padding-y: 0.4rem !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-font-size: $presentation-font-size-root !default;
+$kbd-color: $body-color !default;
+$kbd-bg: $gray-100 !default; // like in bootstrap style
+
+// variables required by _brand.yml
+$font-family-monospace-block: $font-family-monospace !default;
+$font-family-monospace-inline: $font-family-monospace !default;
+$font-weight-monospace: $font-weight-base !default;
+$font-weight-monospace-block: $font-weight-monospace !default;
+$font-weight-monospace-inline: $font-weight-monospace !default;
+$code-inline-font-size: $code-font-size !default;
+
 // --- derive reveal versions of presentation variables for finer-grained override ---
 
 $revealjs-font-size-root: $presentation-font-size-root !default;
@@ -124,6 +139,9 @@ $revealjs-block-margin: $presentation-block-margin !default;
 $revealjs-line-height: $presentation-line-height !default;
 $revealjs-list-bullet-color: $presentation-list-bullet-color !default;
 
+$revealjs-code-inline-font-size: $code-inline-font-size !default;
+$revealjs-code-block-font-size: $code-block-font-size !default;
+
 // ---- map to reveal scss variables ---
 // ---- This is based from the revealjs setting.scss
 // -- START setting.scss --
@@ -155,8 +173,6 @@ $heading3Size: $revealjs-h3-font-size !default;
 $heading4Size: $revealjs-h4-font-size !default;
 
 $codeFont: $font-family-monospace !default;
-$inlineCodeFont: $font-family-monospace-inline !default;
-$blockCodeFont: $font-family-monospace-block !default;
 
 // Links and actions
 $linkColor: $link-color !default;
@@ -173,21 +189,6 @@ $overlayElementFgColor: 0, 0, 0 !default;
 
 // -- END setting.scss --
 
-// KBD variables
-$kbd-padding-y: 0.4rem !default;
-$kbd-padding-x: 0.4rem !default;
-$kbd-font-size: $presentation-font-size-root !default;
-$kbd-color: $body-color !default;
-$kbd-bg: $gray-100 !default; // like in bootstrap style
-
-// variables required by _brand.yml
-$font-family-monospace-block: $font-family-monospace !default;
-$font-family-monospace-inline: $font-family-monospace !default;
-$font-weight-monospace: $font-weight-base !default;
-$font-weight-monospace-block: $font-weight-monospace !default;
-$font-weight-monospace-inline: $font-weight-monospace !default;
-$code-inline-font-size: $code-font-size !default;
-
 /*-- scss:functions --*/
 
 @function colorToRGB($color) {
@@ -223,6 +224,14 @@ $code-inline-font-size: $code-font-size !default;
   }
 }
 
+@mixin make-smaller-font-size($element) {
+  font-size: calc(#{$element} * #{$presentation-font-smaller});
+}
+
+@mixin undo-smaller-font-size($element) {
+  font-size: calc(#{$element} / #{$presentation-font-smaller});
+}
+
 // -- START setting.scss --
 
 // Generates the presentation background, can be overridden
@@ -310,8 +319,26 @@ div.reveal div.slides section.quarto-title-block {
   background-color: $code-block-bg;
   border: none;
   margin: 0;
-  font-size: $code-block-font-size;
+  font-size: $revealjs-code-block-font-size;
   line-height: $code-block-line-height;
+  font-family: $font-family-monospace-block;
+
+  code {
+    background-color: $body-bg; // Insure we color output and code cell differently
+    font-size: inherit;
+    color: $code-block-color;
+    font-family: inherit;
+  }
+
+  &.sourceCode code {
+    color: $code-block-color;
+    font-size: inherit;
+    background-color: inherit;
+    white-space: pre;
+    font-family: inherit;
+    padding: 6px 9px;
+    max-height: $code-block-height;
+  }
 }
 
 // Inside code-file-name div, we want to use the same background color as decorated codeblock header
@@ -322,25 +349,10 @@ div.reveal div.slides section.quarto-title-block {
 
 .reveal code {
   color: $code-color;
-  font-size: $code-inline-font-size;
+  font-size: $revealjs-code-inline-font-size;
   background-color: $code-bg;
   white-space: pre-wrap;
-}
-
-.reveal pre.sourceCode code {
-  @if variable-exists(code-block-color) {
-    color: $code-block-color;
-  }
-  background-color: $code-block-bg;
-  padding: 6px 9px;
-  max-height: $code-block-height;
-  white-space: pre;
-}
-
-.reveal pre code {
-  background-color: $body-bg;
-  font-size: $code-block-font-size;
-  color: $code-block-color;
+  font-family: $font-family-monospace-inline;
 }
 
 .reveal .column-output-location {
@@ -456,29 +468,100 @@ $panel-sidebar-padding: 0.5em;
   line-height: $revealjs-line-height;
 }
 
-.reveal.smaller .slides section,
-.reveal .slides section.smaller,
-.reveal .slides section .callout {
-  font-size: #{$presentation-font-smaller}em;
-}
-// avoid applying twice the reduction when using nested section
-.reveal.smaller .slides section section {
-  font-size: inherit;
-}
-
-.reveal.smaller .slides h1,
-.reveal .slides section.smaller h1 {
-  font-size: calc(#{$revealjs-h1-font-size} / #{$presentation-font-smaller});
-}
+// Smaller font size logic
+.reveal {
+  // When smaller is set globally
+  &.smaller {
+    .slides {
+      // We make the all slide font-size smaller by a factor of $presentation-font-smaller
+      section {
+        font-size: #{$presentation-font-smaller}em;
+
+        // avoid applying twice the reduction when using nested section
+        section {
+          font-size: inherit;
+        }
+      }
+
+      // But we don't want headers to change size and they are in em
+      h1 {
+        @include undo-smaller-font-size($revealjs-h1-font-size);
+      }
+      h2 {
+        @include undo-smaller-font-size($revealjs-h2-font-size);
+      }
+      h3 {
+        @include undo-smaller-font-size($revealjs-h3-font-size);
+      }
+      // Though we want pre and code to be smaller and they are in px
+      pre {
+        @include make-smaller-font-size($revealjs-code-block-font-size);
+        // Make sure code inside pre use code block font size
+        code {
+          font-size: inherit;
+        }
+      }
+      code {
+        @include make-smaller-font-size($revealjs-code-inline-font-size);
+      }
+    }
+  }
 
-.reveal.smaller .slides h2,
-.reveal .slides section.smaller h2 {
-  font-size: calc(#{$revealjs-h2-font-size} / #{$presentation-font-smaller});
-}
+  .slides section {
+    // when  smaller is set on slide
+    &.smaller {
+      font-size: #{$presentation-font-smaller}em;
+
+      // But we don't want headers to change size and they are in em
+      h1 {
+        @include undo-smaller-font-size($revealjs-h1-font-size);
+      }
+      h2 {
+        @include undo-smaller-font-size($revealjs-h2-font-size);
+      }
+      h3 {
+        @include undo-smaller-font-size($revealjs-h3-font-size);
+      }
+      // Though we want pre and code to be smaller and they are in px
+      pre {
+        @include make-smaller-font-size($revealjs-code-block-font-size);
+        // Make sure code inside pre use code block font size
+        code {
+          font-size: inherit;
+        }
+      }
+      code {
+        @include make-smaller-font-size($revealjs-code-inline-font-size);
+      }
+    }
 
-.reveal.smaller .slides h3,
-.reveal .slides section.smaller h3 {
-  font-size: calc(#{$revealjs-h3-font-size} / #{$presentation-font-smaller});
+    // On callout we want to make the font-size smaller too
+    .callout {
+      font-size: #{$presentation-font-smaller}em;
+
+      // But we don't want headers to change size and they are in em
+      h1 {
+        @include undo-smaller-font-size($revealjs-h1-font-size);
+      }
+      h2 {
+        @include undo-smaller-font-size($revealjs-h2-font-size);
+      }
+      h3 {
+        @include undo-smaller-font-size($revealjs-h3-font-size);
+      }
+      // Though we want pre and code to be smaller and they are in px
+      pre {
+        @include make-smaller-font-size($revealjs-code-block-font-size);
+        // Make sure code inside pre use code block font size
+        code {
+          font-size: inherit;
+        }
+      }
+      code {
+        @include make-smaller-font-size($revealjs-code-inline-font-size);
+      }
+    }
+  }
 }
 
 .reveal .columns > .column > :not(ul, ol) {
@@ -583,30 +666,34 @@ $panel-sidebar-padding: 0.5em;
   z-index: 1;
 }
 
-.reveal .callout.callout-style-simple .callout-body,
-.reveal .callout.callout-style-default .callout-body,
-.reveal .callout.callout-style-simple div.callout-title,
-.reveal .callout.callout-style-default div.callout-title {
-  font-size: inherit;
-}
-
-.reveal .callout.callout-style-default .callout-icon::before,
-.reveal .callout.callout-style-simple .callout-icon::before {
-  height: 2rem;
-  width: 2rem;
-  background-size: 2rem 2rem;
-}
+/* Callout styles */
+.reveal .callout {
+  &.callout-style-simple,
+  &.callout-style-default {
+    .callout-body,
+    div.callout-title {
+      font-size: inherit;
+    }
+    .callout-icon::before {
+      height: 2rem;
+      width: 2rem;
+      background-size: 2rem 2rem;
+    }
+  }
 
-.reveal .callout.callout-titled .callout-title p {
-  margin-top: 0.5em;
-}
+  &.callout-titled {
+    .callout-title p {
+      margin-top: 0.5em;
+    }
 
-.reveal .callout.callout-titled .callout-icon::before {
-  margin-top: 1rem;
-}
+    .callout-icon::before {
+      margin-top: 1rem;
+    }
 
-.reveal .callout.callout-titled .callout-body > .callout-content > :last-child {
-  margin-bottom: 1rem;
+    .callout-body > .callout-content > :last-child {
+      margin-bottom: 1rem;
+    }
+  }
 }
 
 .reveal .panel-tabset [role="tab"] {
@@ -814,14 +901,8 @@ kbd {
 }
 
 :root {
-  --r-inline-code-font: #{$inlineCodeFont};
-  --r-block-code-font: #{$blockCodeFont};
-}
-
-.reveal code {
-  font-family: var(--r-inline-code-font);
-}
-
-.reveal pre code {
-	font-family: var(--r-block-code-font);
+  --r-inline-code-font: #{$font-family-monospace-inline};
+  --r-block-code-font: #{$font-family-monospace-block};
+  --r-inline-code-font-size: #{$revealjs-code-inline-font-size};
+  --r-block-code-font-size: #{$revealjs-code-block-font-size};
 }
diff --git a/tests/docs/playwright/revealjs/code-font-size.qmd b/tests/docs/playwright/revealjs/code-font-size.qmd
new file mode 100644
index 00000000000..0627f0b4d24
--- /dev/null
+++ b/tests/docs/playwright/revealjs/code-font-size.qmd
@@ -0,0 +1,50 @@
+---
+title: "Code font size"
+format: revealjs
+---
+
+## Callouts
+
+:::{.callout-tip}
+
+## Example test file
+
+- Every test is a call to `testthat::test_that()` function.
+
+````{.python}
+1 + 1
+````
+
+:::
+
+## No callout inline 
+
+Every test is a call to `testthat::test_that()` function.
+
+- And inside a list : `1+1`
+
+## Highlited Cell
+
+````{.python}
+1 + 1
+````
+
+## Non Highligted
+
+````
+1 + 1
+````
+
+## Smaller slide {.smaller}
+
+### With a h3 
+
+Some inline code: `1 + 1`
+
+And block code:
+
+```{.r}
+1 + 1
+```
+
+
diff --git a/tests/integration/playwright/tests/revealjs-themes.spec.ts b/tests/integration/playwright/tests/revealjs-themes.spec.ts
new file mode 100644
index 00000000000..4f21f77da62
--- /dev/null
+++ b/tests/integration/playwright/tests/revealjs-themes.spec.ts
@@ -0,0 +1,97 @@
+import { test, expect, Locator } from '@playwright/test';
+
+async function getCSSProperty(loc: Locator, variable: string, asNumber = false): Promise<string | number> {
+  const property = await loc.evaluate((element, variable) =>
+    window.getComputedStyle(element).getPropertyValue(variable),
+    variable
+  );
+  if (asNumber) {
+    return parseFloat(property);
+  } else {
+    return property;
+  }
+}
+
+async function checkFontSizeIdentical(loc1: Locator, loc2: Locator) {
+  const loc1FontSize = await getCSSProperty(loc1, 'font-size', false) as string;
+  await expect(loc2).toHaveCSS('font-size', loc1FontSize);
+}
+
+async function getRevealMainFontSize(page: any): Promise<number> {
+  return await getCSSProperty(page.locator('body'), "--r-main-font-size", true) as number;
+}
+
+async function getRevealCodeBlockFontSize(page: any): Promise<number> {
+  return await getCSSProperty(page.locator('body'), "--r-block-code-font-size", true) as number;
+}
+
+async function getRevealCodeInlineFontSize(page: any): Promise<number> {
+  return await getCSSProperty(page.locator('body'), "--r-inline-code-font-size", true) as number;
+}
+
+test('Code font size in callouts and smaller slide is scaled down', async ({ page }) => {
+  await page.goto('./revealjs/code-font-size.html');
+  await page.locator('body').press('ArrowRight');
+  // Get smaller slide scale factor
+  const calloutsFontSize = await getCSSProperty(page.locator('#callouts div.callout'), "font-size", true) as number;
+  const mainFontSize = await getRevealMainFontSize(page);
+  const scaleFactor = calloutsFontSize / mainFontSize;
+  expect(scaleFactor).toBeLessThan(1);
+  // Font size in callout for inline code should be scaled smaller than default inline code
+  const codeInlineFontSize = await getRevealCodeInlineFontSize(page);
+  const computedInlineFontSize = scaleFactor * codeInlineFontSize;
+  expect(await getCSSProperty(page.locator('#callouts').getByText('testthat::test_that()'), 'font-size', true)).toBeCloseTo(computedInlineFontSize);
+  // Font size in callout for inline code should be same size as text by default
+  await checkFontSizeIdentical(
+    page.locator('#callouts').getByText('Every test is a call to'), 
+    page.locator('#callouts').getByText('testthat::test_that()')
+  );
+  // Font size for code block in callout should be scaled smaller that default code block
+  const codeBlockFontSize = await getRevealCodeBlockFontSize(page)
+  const computedBlockFontSize = scaleFactor * codeBlockFontSize;
+  expect(await getCSSProperty(page.locator('.callout pre code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
+});
+
+test('Code font size in smaller slide is scaled down', async ({ page }) => {
+  await page.goto('./revealjs/code-font-size.html#/smaller-slide');
+  // Get smaller slide scale factor
+  const smallerFontSize = await getCSSProperty(page.getByText('And block code:', { exact: true }), "font-size", true) as number;
+  const mainFontSize = await getRevealMainFontSize(page);
+  const scaleFactor = smallerFontSize / mainFontSize;
+  expect(scaleFactor).toBeLessThan(1);
+  // Code Font size in smaller slide for inline code should be scaled smaller than default inline code
+  const codeInlineFontSize = await getRevealCodeInlineFontSize(page);
+  const computedInlineFontSize = scaleFactor * codeInlineFontSize;
+  expect(
+    await getCSSProperty(
+      page.locator('#smaller-slide p').filter({ hasText: 'Some inline code' }).getByRole('code'),
+       'font-size', true
+    )
+  ).toBeCloseTo(computedInlineFontSize);
+  // Font size for code block in callout should be scaled smaller that default code block
+  const codeBlockFontSize = await getRevealCodeBlockFontSize(page)
+  const computedBlockFontSize = scaleFactor * codeBlockFontSize;
+  expect(await getCSSProperty(page.locator('#smaller-slide pre').getByRole('code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
+});
+
+test('Code font size is correctly set', async ({ page }) => {
+  await page.goto('./revealjs/code-font-size.html');
+  await page.locator('body').press('ArrowRight');
+  await page.locator('body').press('ArrowRight');
+  const codeInlineFontSize = await getRevealCodeInlineFontSize(page);
+  expect(
+    await getCSSProperty(page.locator('#no-callout-inline').getByText('testthat::test_that()'), 'font-size', true)
+  ).toBeCloseTo(codeInlineFontSize);
+  expect(
+    await getCSSProperty(page.getByText('1+1', { exact: true }), 'font-size', true)
+  ).toBeCloseTo(codeInlineFontSize);
+  await page.locator('body').press('ArrowRight');
+  const codeBlockFontSize = await getRevealCodeBlockFontSize(page);
+  expect(
+    await getCSSProperty(page.locator("#highlited-cell div.sourceCode pre code"), 'font-size', true)
+  ).toBeCloseTo(codeBlockFontSize);
+  await page.locator('body').press('ArrowRight');
+  expect(
+    await getCSSProperty(page.locator("#non-highligted pre code"), 'font-size', true)
+  ).toBeCloseTo(codeBlockFontSize);
+});
\ No newline at end of file