Feature: cell renderings, light and dark

news/changelog-1.7.md

@@ -43,6 +43,7 @@ All changes included in 1.7:
 
 ## `html` format
 
+- ([#12277](https://github.com/quarto-dev/quarto-cli/pull/12277)): Provide light and dark plot and table renderings with `renderings: [light,dark]`
 - ([#11860](https://github.com/quarto-dev/quarto-cli/issues/11860)): ES6 modules that import other local JS modules in documents with `embed-resources: true` are now correctly embedded.
 
 ## `pdf` format

src/format/html/format-html-bootstrap.ts

@@ -1060,6 +1060,18 @@ function bootstrapHtmlFinalizer(format: Format, flags: PandocFlags) {
       }
     }
 
+    // start body with light or dark class for proper display when JS is disabled
+    let initialLightDarkClass = "quarto-light";
+    // some logic duplicated from resolveThemeLayer
+    const theme = format.metadata.theme;
+    if (theme && !Array.isArray(theme) && typeof theme === "object") {
+      const keys = Object.keys(theme);
+      if(keys.length > 1 && keys[0] === "dark") {
+        initialLightDarkClass = "quarto-dark";
+      }
+    }
+    doc.body.classList.add(initialLightDarkClass);
+
     // If there is no margin content and no toc in the right margin
     // then lower the z-order so everything else can get on top
     // of the sidebar

src/resources/editor/tools/vs-code.mjs

@@ -7041,6 +7041,13 @@ var require_yaml_intelligence_resources = __commonJS({
           schema: "string",
           description: "Classes to apply to cell container"
         },
+        {
+          name: "renderings",
+          schema: {
+            arrayOf: "string"
+          },
+          description: "Array of rendering names"
+        },
         {
           name: "tags",
           tags: {
@@ -19887,6 +19894,13 @@ var require_yaml_intelligence_resources = __commonJS({
           },
           errorMessage: "type key not supported at project type-level. Use `project: type: ...` instead.",
           description: "internal-schema-hack"
+        },
+        {
+          name: "engines",
+          schema: {
+            arrayOf: "string"
+          },
+          description: "List execution engines you want to give priority when determining which engine should render a notebook. If two engines have support for a notebook, the one listed earlier will be chosen. Quarto's default order is 'knitr', 'jupyter', 'markdown', 'julia'."
         }
       ],
       "schema/schema.yml": [
@@ -23967,7 +23981,9 @@ var require_yaml_intelligence_resources = __commonJS({
         },
         "Disambiguating year suffix in author-date styles (e.g. \u201Ca\u201D in \u201CDoe,\n1999a\u201D).",
         "Manuscript configuration",
-        "internal-schema-hack"
+        "internal-schema-hack",
+        "Array of rendering names",
+        "List execution engines you want to give priority when determining\nwhich engine should render a notebook. If two engines have support for a\nnotebook, the one listed earlier will be chosen. Quarto\u2019s default order\nis \u2018knitr\u2019, \u2018jupyter\u2019, \u2018markdown\u2019, \u2018julia\u2019."
       ],
       "schema/external-schemas.yml": [
         {
@@ -24196,12 +24212,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 194269,
+        _internalId: 194327,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 194261,
+            _internalId: 194319,
             type: "enum",
             enum: [
               "png",
@@ -24217,7 +24233,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 194268,
+            _internalId: 194326,
             type: "anyOf",
             anyOf: [
               {
@@ -33253,11 +33269,22 @@ var jupyterEngineSchema = defineCached(
   },
   "engine-jupyter"
 );
+var juliaEnginesSchema = defineCached(
+  // deno-lint-ignore require-await
+  async () => {
+    return {
+      schema: makeEngineSchema("julia"),
+      errorHandlers: []
+    };
+  },
+  "engine-julia"
+);
 async function getEngineOptionsSchema() {
   const obj = {
     markdown: await markdownEngineSchema(),
     knitr: await knitrEngineSchema(),
-    jupyter: await jupyterEngineSchema()
+    jupyter: await jupyterEngineSchema(),
+    julia: await juliaEnginesSchema()
   };
   return obj;
 }

src/resources/editor/tools/yaml/yaml-intelligence-resources.json

@@ -13,6 +13,13 @@
       "schema": "string",
       "description": "Classes to apply to cell container"
     },
+    {
+      "name": "renderings",
+      "schema": {
+        "arrayOf": "string"
+      },
+      "description": "Array of rendering names"
+    },
     {
       "name": "tags",
       "tags": {
@@ -12859,6 +12866,13 @@
       },
       "errorMessage": "type key not supported at project type-level. Use `project: type: ...` instead.",
       "description": "internal-schema-hack"
+    },
+    {
+      "name": "engines",
+      "schema": {
+        "arrayOf": "string"
+      },
+      "description": "List execution engines you want to give priority when determining which engine should render a notebook. If two engines have support for a notebook, the one listed earlier will be chosen. Quarto's default order is 'knitr', 'jupyter', 'markdown', 'julia'."
     }
   ],
   "schema/schema.yml": [
@@ -16939,7 +16953,9 @@
     },
     "Disambiguating year suffix in author-date styles (e.g. “a” in “Doe,\n1999a”).",
     "Manuscript configuration",
-    "internal-schema-hack"
+    "internal-schema-hack",
+    "Array of rendering names",
+    "List execution engines you want to give priority when determining\nwhich engine should render a notebook. If two engines have support for a\nnotebook, the one listed earlier will be chosen. Quarto’s default order\nis ‘knitr’, ‘jupyter’, ‘markdown’, ‘julia’."
   ],
   "schema/external-schemas.yml": [
     {
@@ -17168,12 +17184,12 @@
     "mermaid": "%%"
   },
   "handlers/mermaid/schema.yml": {
-    "_internalId": 194269,
+    "_internalId": 194327,
     "type": "object",
     "description": "be an object",
     "properties": {
       "mermaid-format": {
-        "_internalId": 194261,
+        "_internalId": 194319,
         "type": "enum",
         "enum": [
           "png",
@@ -17189,7 +17205,7 @@
         "exhaustiveCompletions": true
       },
       "theme": {
-        "_internalId": 194268,
+        "_internalId": 194326,
         "type": "anyOf",
         "anyOf": [
           {

src/resources/filters/main.lua

@@ -61,6 +61,7 @@ import("./quarto-init/knitr-fixup.lua")
 import("./quarto-post/render-asciidoc.lua")
 import("./quarto-post/book.lua")
 import("./quarto-post/cites.lua")
+import("./quarto-post/cell-renderings.lua")
 import("./quarto-post/delink.lua")
 import("./quarto-post/docx.lua")
 import("./quarto-post/fig-cleanup.lua")
@@ -393,6 +394,10 @@ local quarto_post_filters = {
     },
     traverser = 'jog',
   },
+  { name = "post-choose-cell_renderings",
+    filter = choose_cell_renderings(),
+    flags = { "has_renderings" },
+  },
   { name = "post-landscape-div",
     filter = landscape_div(),
     flags = { "has_landscape" },

src/resources/filters/normalize/flags.lua

@@ -109,6 +109,11 @@ function compute_flags()
             flags.needs_output_unrolling = true
           end
         end
+
+        -- cell-renderings.lua
+        if node.attributes["renderings"] then
+          flags.has_renderings = true
+        end
       end
     end,
     CodeBlock = function(node)

src/resources/filters/quarto-post/cell-renderings.lua

@@ -0,0 +1,57 @@
+function choose_cell_renderings()
+  function jsonDecodeArray(json)
+    if json:sub(1, 1) == '[' then
+      return quarto.json.decode(json)
+    elseif json:sub(1, 1) == '{' then
+      quarto.log.warning('expected array or scalar', json)
+    else
+      return {json}
+    end
+  end
+
+  return {
+    Div = function(div)
+      -- Only process cell div with renderings attr
+      if not div.classes:includes("cell") or not div.attributes["renderings"] then
+        return nil
+      end
+      local renderingsJson = div.attributes['renderings']
+      local renderings = jsonDecodeArray(renderingsJson)
+      if not type(renderings) == "table" or #renderings == 0 then
+        quarto.log.warning("renderings expected array of rendering names, got", renderings)
+        return nil
+      end
+      local cods = {}
+      local firstCODIndex = nil
+      for i, cellOutput in ipairs(div.content) do
+        if cellOutput.classes:includes("cell-output-display") then
+          if not firstCODIndex then
+            firstCODIndex = i
+          end
+          table.insert(cods, cellOutput)
+        end
+      end
+
+      if #cods ~= #renderings then
+        quarto.log.warning("need", #renderings, "cell-output-display for renderings", table.concat(renderings, ",") .. ";", "got", #cods)
+        return nil
+      end
+
+      local outputs = {}
+      for i, r in ipairs(renderings) do
+        outputs[r] = cods[i]
+      end
+      local lightDiv = outputs['light']
+      local darkDiv = outputs['dark']
+      local blocks = pandoc.Blocks({table.unpack(div.content, 1, firstCODIndex - 1)})
+      if quarto.format.isHtmlOutput() and lightDiv and darkDiv then
+        blocks:insert(pandoc.Div(lightDiv.content, pandoc.Attr("", {'light-content'}, {})))
+        blocks:insert(pandoc.Div(darkDiv.content, pandoc.Attr("", {'dark-content'}, {})))
+      else
+        blocks:insert(lightDiv or darkDiv)
+      end
+      div.content = blocks
+      return div
+    end
+  }
+end

src/resources/formats/html/bootstrap/dist/scss/_light-dark.scss

@@ -0,0 +1,7 @@
+body.quarto-light .dark-content {
+  display: none;
+}
+
+body.quarto-dark .light-content {
+  display: none;
+}

src/resources/formats/html/bootstrap/dist/scss/bootstrap.scss

@@ -1,7 +1,6 @@
 @import "mixins/banner";
 @include bsBanner("");
 
-
 // scss-docs-start import-stack
 // Configuration
 @import "variables-dark";
@@ -14,6 +13,7 @@
 @import "type";
 @import "images";
 @import "containers";
+@import "light-dark";
 @import "grid";
 @import "tables";
 @import "forms";

src/resources/schema/cell-attributes.yml

@@ -10,6 +10,11 @@
   schema: string
   description: "Classes to apply to cell container"
 
+- name: renderings
+  schema:
+    arrayOf: string
+  description: "Array of rendering names"
+
 - name: tags
   tags:
     engine: jupyter