diff --git a/news/changelog-1.8.md b/news/changelog-1.8.md index 51572044710..0e49185e472 100644 --- a/news/changelog-1.8.md +++ b/news/changelog-1.8.md @@ -20,6 +20,7 @@ All changes included in 1.8: - ([#726](https://github.com/quarto-dev/quarto-cli/issues/726)): a11y - Provide `.screen-reader-only` callout type when callout text doesn't naturally include the type. - ([#5538](https://github.com/quarto-dev/quarto-cli/issues/5538)): Fix code-copy button style so that scrolling behaves properly. - ([#5879](https://github.com/quarto-dev/quarto-cli/issues/5879)): Improve font rendering of `kbd` shortcode on macOS. `kbd` will now also be stricter in converting keyboard shortcuts to macOS icons. +- ([#8568](https://github.com/quarto-dev/quarto-cli/issues/8568)) Default inline code background color to the code block background color if not specified; foreground color is `$pre-color` in dark mode and (remains) purple in light mode. - ([#10983](https://github.com/quarto-dev/quarto-cli/issues/10983)): Fix spacing inconsistency between paras and first section headings. - ([#12259](https://github.com/quarto-dev/quarto-cli/issues/12259)): Fix conflict between `html-math-method: katex` and crossref popups (author: @benkeks). - ([#12341](https://github.com/quarto-dev/quarto-cli/issues/12341)): Enable light and dark logos for html formats (sidebar, navbar, dashboard). @@ -108,7 +109,7 @@ All changes included in 1.8: - ([#12753](https://github.com/quarto-dev/quarto-cli/issues/12753)): Support change in IPython 9+ and import `set_matplotlib_formats` from `matplotlib_inline.backend_inline` in the internal `setup.py` script used to initialize rendering with Jupyter engine. - ([#12839](https://github.com/quarto-dev/quarto-cli/issues/12839)): Support for `plotly.py` 6+ which now loads plotly.js using a cdn in script as a module. -- ([#13026](https://github.com/quarto-dev/quarto-cli/pulls/13026), [#13151](https://github.com/quarto-dev/quarto-cli/pulls/13151)), [#13184](https://github.com/quarto-dev/quarto-cli/pull/13184): Use `jsdelivr` CDN for jupyter widgets dependencies. +- ([#13026](https://github.com/quarto-dev/quarto-cli/pull/13026), [#13151](https://github.com/quarto-dev/quarto-cli/pull/13151)), [#13184](https://github.com/quarto-dev/quarto-cli/pull/13184): Use `jsdelivr` CDN for jupyter widgets dependencies. ### `knitr` diff --git a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss index 07d982073db..8aba5b288bc 100644 --- a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss +++ b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss @@ -923,6 +923,26 @@ pre { border: initial; } +p code.sourceCode, +li code.sourceCode, +td code.sourceCode { + $calculated-bg: if( + variable-exists(code-bg), + if( + $code-bg == $gray-100 and variable-exists(code-block-bg-color), + $code-block-bg-color, + $code-bg + ), + null + ); + + @if variable-exists(mono-background-color) { + background-color: $mono-background-color; + } @else if variable-exists(calculated-bg) { + background-color: $calculated-bg; + } +} + // Maps the pandoc 'monobackgroundcolor' to bootstrap // Note this only targets code outside of sourceCode blocks @if variable-exists(mono-background-color) { @@ -942,14 +962,23 @@ pre code:not(.sourceCode) { background-color: initial; } -// Default padding if background is set p code:not(.sourceCode), li code:not(.sourceCode), td code:not(.sourceCode) { + $calculated-bg: if( + variable-exists(code-bg), + if( + $code-bg == $gray-100 and variable-exists(code-block-bg-color), + $code-block-bg-color, + $code-bg + ), + null + ); + @if variable-exists(mono-background-color) { background-color: $mono-background-color; - } @else if variable-exists(code-bg) { - background-color: $code-bg; + } @else if variable-exists(calculated-bg) { + background-color: $calculated-bg; } @if variable-exists(code-padding) { @@ -2197,12 +2226,12 @@ a { // screen-reader-only, cf https://github.com/quarto-dev/quarto-cli/issues/726#issuecomment-1112486100 .screen-reader-only { - position: absolute; - clip: rect(0 0 0 0); - border: 0; - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - width: 1px; -} \ No newline at end of file + position: absolute; + clip: rect(0 0 0 0); + border: 0; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + width: 1px; +} diff --git a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss index c698781fb66..330f403c49d 100644 --- a/src/resources/formats/html/bootstrap/_bootstrap-variables.scss +++ b/src/resources/formats/html/bootstrap/_bootstrap-variables.scss @@ -38,7 +38,11 @@ $code-block-theme-dark-threshhold: 40% !default; /* Inline Code Formatting */ // $code-bg, $code-color, $code-padding -$code-color: #7d12ba !default; +$code-color: if( + variable-exists(pre-color) and $pre-color != null, + $pre-color, + #7d12ba +) !default; // Set a default body emphasis color $code-bg: $gray-100 !default; diff --git a/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd b/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd index 47729714248..2fd453a26d6 100644 --- a/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd +++ b/tests/docs/playwright/html/dark-brand/syntax-highlighting/a11y-syntax-highlighting.qmd @@ -5,16 +5,22 @@ execute: warning: false theme: light: [cosmo, theme.scss] - dark: [cosmo, theme-dark.scss] + dark: [solar, theme-dark.scss] highlight-style: a11y --- +### Inline code + +* No syntax highlighting: `foo(bar)` +* Python: `def identity(x): return x`{.python} +* R: `identity <- function(x) x`{.r} + +### Code blocks ```markdown ![asdf](asd.png) ``` - ```python #| label: fig-polar #| fig-cap: "A line plot on a polar axis" diff --git a/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd b/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd index 344fd955c72..df8c5d38ad2 100644 --- a/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd +++ b/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd @@ -12,13 +12,18 @@ _quarto: - ["link[href*=\"-dark-\"]"] --- -## Hello +### Inline code + +* No syntax highlighting: `foo(bar)` +* Python: `def identity(x): return x`{.python} +* R: `identity <- function(x) x`{.r} + +### Code blocks ```markdown ![asdf](asd.png) ``` - ```python #| label: fig-polar #| fig-cap: "A line plot on a polar axis" diff --git a/tests/integration/playwright/tests/html-dark-mode.spec.ts b/tests/integration/playwright/tests/html-dark-mode.spec.ts index ddc2fb7c8e8..8df7c3601c2 100644 --- a/tests/integration/playwright/tests/html-dark-mode.spec.ts +++ b/tests/integration/playwright/tests/html-dark-mode.spec.ts @@ -43,9 +43,18 @@ test('Syntax highlighting, a11y, with JS', async ({ page }) => { await expect(locatr).toHaveClass('fullcontent quarto-light'); await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)'); const importKeyword = await page.locator('span.im').first(); + // light inline code + const pythonCode = await page.locator('li code.sourceCode.r'); + await expect(pythonCode).toHaveCSS('background-color', 'rgba(233, 236, 239, 0.65)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)'); // light highlight stylesheet await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)'); + await page.locator("a.quarto-color-scheme-toggle").click(); + + // dark inline code + await expect(pythonCode).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(192, 128, 216)'); // dark highlight stylesheet await expect(importKeyword).toHaveCSS('color', 'rgb(248, 248, 242)'); }); @@ -58,6 +67,16 @@ test('Syntax highlighting, arrow, with JS', async ({ page }) => { const locatr = await page.locator('body').first(); await expect(locatr).toHaveClass('fullcontent quarto-light'); await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)'); + // light inline code + const pythonCode = await page.locator('li code.sourceCode.python'); + await expect(pythonCode).toHaveCSS('background-color', 'rgba(233, 236, 239, 0.65)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(125, 18, 186)'); + // alert const link = await page.locator('span.al').first(); - await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); + await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); // transparent + + await page.locator("a.quarto-color-scheme-toggle").click(); + // dark inline code + await expect(pythonCode).toHaveCSS('background-color', 'rgba(37, 41, 46, 0.65)'); + await expect(pythonCode).toHaveCSS('color', 'rgb(122, 130, 136)'); });