Jupyter code block style not preserved when `quarto render`

[hodgesmr]

Bug description

Certain code block styles (eg, code-block-border-left and highlight-style) appear properly in quarto preview but are absent in quarto render when rendering a Jupyter notebook.

Steps to reproduce

In posts/_metadata.yml:

freeze: auto
title-block-banner: true
format:
  html:
    link-external-newwindow: true 
    code-block-bg: true
    code-block-border-left: "#3459e6"
    highlight-style: github
title-prefix: ""

In posts/2024-07-21-code-notebook/index.ipynb:

{
 "cells": [
  {
   "cell_type": "raw",
   "metadata": {
    "vscode": {
     "languageId": "raw"
    }
   },
   "source": [
    "---\n",
    "author: \"Firstname Lastname\"\n",
    "title: \"Code Rendering Test\"\n",
    "jupyter: python3\n",
    "date: 2024-07-21\n",
    "---"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def foo(x):\n",
    "    y = 5\n",
    "    return x + y"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}

When running quarto preview:

When running quarto render:

Expected behavior

The output from quarto render should implement the code formatting options.

Actual behavior

The code formatting options are not implemented when quarto render.

Your environment

• macOS Sonoma 14.5

Quarto check output

quarto check
Quarto 1.5.55
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.5.55
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.0
      Path: /Users/hodgesmr/.virtualenvs/lambda_calculus/bin/python3
      Jupyter: 4.11.1
      Kernels: python3

(/) Checking Jupyter engine render....Traceback (most recent call last):
  File "/Applications/quarto/share/jupyter/jupyter.py", line 21, in <module>
    from notebook import notebook_execute, RestartKernel
  File "/Applications/quarto/share/jupyter/notebook.py", line 15, in <module>
    from yaml import safe_load as parse_string
ModuleNotFoundError: No module named 'yaml'
[✓] Checking Jupyter engine render....OK

[mcanouil]

Unfortunately, your example is not reproducible as you omitted nearly all the structure of your project. Please share a small and fully reproducible example.

As of right now, I cannot reproduce. preview = render.

Render	Preview

[hodgesmr]

Let me know if this is a useful way to provide my reproducible structure.

.
├── _quarto.yml
├── index.qmd
├── posts
│   ├── _metadata.yml
│   └── dummy-post
│       └── index.ipynb
└── posts.qmd

_quarto.yml:

project:
  type: website
  output-dir: docs

website:
  title: "Test Site"
  navbar:
    right:
      - posts.qmd

format:
  html:
    theme:
      - cosmo
    header-includes: |
      <link href="https://fonts.googleapis.com/css?family=Overpass:300,900" rel="stylesheet">
    mainfont: Overpass
    toc: true
    link-external-newwindow: true
    title-prefix: ""

index.qmd:

---
title: "Test Home"
pagetitle: "Test Home"
about:
  template: trestles
---

This is a test site.

posts.qmd:

---
title: "Posts"
pagetitle: "Posts on Test Site"
listing:
    contents: posts
    type: default
    sort: "date desc"
    fields: [date, title]
    date-format: iso
    filter-ui: true
---

posts/_metadata.yml:

freeze: auto
title-block-banner: true
format:
  html:
    link-external-newwindow: true 
    code-block-bg: true
    code-block-border-left: "#3459e6"
    highlight-style: github
title-prefix: ""

posts/dummy-post/index.ipynb:

{
 "cells": [
  {
   "cell_type": "raw",
   "metadata": {
    "vscode": {
     "languageId": "raw"
    }
   },
   "source": [
    "---\n",
    "author: \"Firstname Lastname\"\n",
    "title: \"Code Rendering Test\"\n",
    "jupyter: python3\n",
    "date: 2024-07-21\n",
    "---"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def foo(x):\n",
    "    y = 5\n",
    "    return x + y"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}

With the above structure I see with quarto preview:

But with quarto render:

[hodgesmr]

Spotted this too in Firefox webconsole:

[cscheid]

Resource URL: file://...

How are you running these examples? file:// makes me suspect you're double-clicking the HTML file on Windows Explorer or Finder. You should either be using a web server of your own, or quarto preview. The file:// scheme won't work well for a number of reasons we can't avoid.

[cscheid]

Ok, I can repro.

Note one additional bit of strangeness.

If you quarto preview from the top-level with a clean docs folder, navigating to the post shows what you see.

But if you instead quarto preview posts/dummy-post/index.ipynb, you'll find the correct rendering.

I'm not sure what's to blame here.

[cscheid]

Here's a screencap showing the issue:

https://github.com/user-attachments/assets/b26b63b1-2906-4d94-84cc-184a2ec04f2c