Merge pull request #12495 from quarto-dev/theme/css-highlight

HTML - fix block vs inline highlighting

Author: cderv

news/changelog-1.7.md

@@ -68,8 +68,9 @@ All changes included in 1.7:
 
 - ([#1325](https://github.com/quarto-dev/quarto-cli/issues/1325)): Dark Mode pages should not flash light on reload. (Nor should Light Mode pages flash dark.)
 - ([#1470](https://github.com/quarto-dev/quarto-cli/issues/1470)): `respect-user-color-scheme` enables checking the media query `prefers-color-scheme` for user dark mode preference. Author preference still influences stylesheet order and NoJS experience. Defaults to `false`, leaving to author preference.
-- ([#10780])(https://github.com/quarto-dev/quarto-cli/issues/10780)): improve `link-external-filter` documentation.
+- ([#10780](https://github.com/quarto-dev/quarto-cli/issues/10780)): improve `link-external-filter` documentation.
 - ([#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.
+- ([#11911](https://github.com/quarto-dev/quarto-cli/issues/11911)): Code highlighting colors for tokens are now the same between code blocks and inline code when using Pandoc's syntax highlighting.
 - ([#12277](https://github.com/quarto-dev/quarto-cli/pull/12277)): Provide light and dark plot and table renderings with `renderings: [light,dark]`
 - ([#12307](https://github.com/quarto-dev/quarto-cli/issues/12307)): Tabsets using `tabby.js` in non-boostrap html (`theme: pandoc`, `theme: none` or `minimal: true`) now correctly render reactive content when `server: shiny` is used.
 - ([#12319](https://github.com/quarto-dev/quarto-cli/pull/12319)): Provide switchable light and dark brands for a page with `brand.light` and `brand.dark`.

src/command/render/pandoc-html.ts

@@ -498,34 +498,67 @@ function generateThemeCssClasses(
     Record<string, unknown>
   >;
   if (textStyles) {
-    const lines: string[] = [];
+    const otherLines: string[] = [];
+    otherLines.push("/* syntax highlight based on Pandoc's rules */");
+    const tokenCssByAbbr: Record<string, string[]> = {};
+
+    const toCSS = function (
+      abbr: string,
+      styleName: string,
+      cssValues: string[],
+    ) {
+      const lines: string[] = [];
+      lines.push(`/* ${styleName} */`);
+      lines.push(`\ncode span${abbr !== "" ? `.${abbr}` : ""} {`);
+      cssValues.forEach((value) => {
+        lines.push(`  ${value}`);
+      });
+      lines.push("}\n");
+
+      // Store by abbreviation for sorting later
+      tokenCssByAbbr[abbr] = lines;
+    };
 
     Object.keys(textStyles).forEach((styleName) => {
       const abbr = kAbbrevs[styleName];
       if (abbr !== undefined) {
         const textValues = textStyles[styleName];
         const cssValues = generateCssKeyValues(textValues);
 
-        if (abbr !== "") {
-          lines.push(`\ncode span.${abbr} {`);
-          lines.push(...cssValues);
-          lines.push("}\n");
-        } else {
+        toCSS(abbr, styleName, cssValues);
+
+        if (abbr == "") {
           [
             "pre > code.sourceCode > span",
-            "code span",
             "code.sourceCode > span",
             "div.sourceCode,\ndiv.sourceCode pre.sourceCode",
           ]
             .forEach((selector) => {
-              lines.push(`\n${selector} {`);
-              lines.push(...cssValues);
-              lines.push("}\n");
+              otherLines.push(`\n${selector} {`);
+              otherLines.push(...cssValues);
+              otherLines.push("}\n");
             });
         }
       }
     });
-    return lines;
+
+    // Sort tokenCssLines by abbr and flatten them
+    // Ensure empty abbr ("") comes first by using a custom sort function
+    const sortedTokenCssLines: string[] = [];
+    Object.keys(tokenCssByAbbr)
+      .sort((a, b) => {
+        // Empty string ("") should come first
+        if (a === "") return -1;
+        if (b === "") return 1;
+        // Otherwise normal alphabetical sort
+        return a.localeCompare(b);
+      })
+      .forEach((abbr) => {
+        sortedTokenCssLines.push(...tokenCssByAbbr[abbr]);
+      });
+
+    // return otherLines followed by tokenCssLines (now sorted by abbr)
+    return otherLines.concat(sortedTokenCssLines);
   }
   return undefined;
 }

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

@@ -13031,29 +13031,31 @@ var require_yaml_intelligence_resources = __commonJS({
               {
                 string: {
                   completions: [
-                    "pygments",
-                    "tango",
-                    "espresso",
-                    "zenburn",
-                    "kate",
-                    "monochrome",
-                    "breezedark",
-                    "haddock",
+                    "a11y",
                     "arrow",
                     "atom-one",
                     "ayu",
                     "ayu-mirage",
                     "breeze",
+                    "breezedark",
                     "dracula",
+                    "espresso",
                     "github",
                     "gruvbox",
-                    "mokokai",
+                    "haddock",
+                    "kate",
+                    "monochrome",
+                    "monokai",
+                    "none",
                     "nord",
                     "oblivion",
                     "printing",
+                    "pygments",
                     "radical",
                     "solarized",
-                    "vim-dark"
+                    "tango",
+                    "vim-dark",
+                    "zenburn"
                   ]
                 }
               }
@@ -23986,7 +23988,7 @@ var require_yaml_intelligence_resources = __commonJS({
         "A url to the full text for this item.",
         {
           short: "Type, class, or subtype of the item",
-          long: "Type, class, or subtype of the item (e.g. \u201CDoctoral dissertation\u201D for\na PhD thesis; \u201CNIH Publication\u201D for an NIH technical report);\nDo not use for topical descriptions or categories (e.g. \uFFFD\uFFFDadventure\u201D\nfor an adventure movie)"
+          long: "Type, class, or subtype of the item (e.g. \u201CDoctoral dissertation\u201D for\na PhD thesis; \u201CNIH Publication\u201D for an NIH technical report);\nDo not use for topical descriptions or categories (e.g. \u201Cadventure\u201D\nfor an adventure movie)"
         },
         "Guest (e.g. on a TV show or podcast).",
         "Host of the item (e.g. of a TV show or podcast).",
@@ -24303,12 +24305,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 195064,
+        _internalId: 195005,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 195056,
+            _internalId: 194997,
             type: "enum",
             enum: [
               "png",
@@ -24324,7 +24326,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 195063,
+            _internalId: 195004,
             type: "anyOf",
             anyOf: [
               {

src/resources/editor/tools/yaml/web-worker.js

@@ -6003,29 +6003,31 @@
           {
             "string": {
               "completions": [
-                "pygments",
-                "tango",
-                "espresso",
-                "zenburn",
-                "kate",
-                "monochrome",
-                "breezedark",
-                "haddock",
+                "a11y",
                 "arrow",
                 "atom-one",
                 "ayu",
                 "ayu-mirage",
                 "breeze",
+                "breezedark",
                 "dracula",
+                "espresso",
                 "github",
                 "gruvbox",
-                "mokokai",
+                "haddock",
+                "kate",
+                "monochrome",
+                "monokai",
+                "none",
                 "nord",
                 "oblivion",
                 "printing",
+                "pygments",
                 "radical",
                 "solarized",
-                "vim-dark"
+                "tango",
+                "vim-dark",
+                "zenburn"
               ]
             }
           }
@@ -16958,7 +16960,7 @@
     "A url to the full text for this item.",
     {
       "short": "Type, class, or subtype of the item",
-      "long": "Type, class, or subtype of the item (e.g. “Doctoral dissertation” for\na PhD thesis; “NIH Publication” for an NIH technical report);\nDo not use for topical descriptions or categories (e.g. ��adventure”\nfor an adventure movie)"
+      "long": "Type, class, or subtype of the item (e.g. “Doctoral dissertation” for\na PhD thesis; “NIH Publication” for an NIH technical report);\nDo not use for topical descriptions or categories (e.g. “adventure”\nfor an adventure movie)"
     },
     "Guest (e.g. on a TV show or podcast).",
     "Host of the item (e.g. of a TV show or podcast).",
@@ -17275,12 +17277,12 @@
     "mermaid": "%%"
   },
   "handlers/mermaid/schema.yml": {
-    "_internalId": 195064,
+    "_internalId": 195005,
     "type": "object",
     "description": "be an object",
     "properties": {
       "mermaid-format": {
-        "_internalId": 195056,
+        "_internalId": 194997,
         "type": "enum",
         "enum": [
           "png",
@@ -17296,7 +17298,7 @@
         "exhaustiveCompletions": true
       },
       "theme": {
-        "_internalId": 195063,
+        "_internalId": 195004,
         "type": "anyOf",
         "anyOf": [
           {

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

@@ -105,29 +105,31 @@
             dark: path
       - string:
           completions:
-            - pygments
-            - tango
-            - espresso
-            - zenburn
-            - kate
-            - monochrome
-            - breezedark
-            - haddock
+            - a11y
             - arrow
             - atom-one
             - ayu
             - ayu-mirage
             - breeze
+            - breezedark
             - dracula
+            - espresso
             - github
             - gruvbox
-            - mokokai
+            - haddock
+            - kate
+            - monochrome
+            - monokai
+            - none
             - nord
             - oblivion
             - printing
+            - pygments
             - radical
             - solarized
+            - tango
             - vim-dark
+            - zenburn
   description:
     short: Specifies the coloring style to be used in highlighted source code.
     long: |

src/resources/schema/document-code.yml

@@ -0,0 +1 @@
+/.quarto/

tests/docs/playwright/html/code-highlight/.gitignore

@@ -0,0 +1,3 @@
+project:
+  type: default
+  title: "Quarto Code Highlighting"

tests/docs/playwright/html/code-highlight/_quarto.yml

@@ -0,0 +1,16 @@
+---
+title: Testing a11y code highlight
+highlight-style: a11y
+theme: 
+  light: flatly
+  dark: darkly
+---
+
+
+```{.julia}
+function divide_floats(x::Float64, y::Float64)
+    return x / y
+end
+```
+
+And here the inline version `function divide_floats(x::Float64, y::Float64)`{.julia}.

tests/docs/playwright/html/code-highlight/code-highlight-a11y.qmd

@@ -0,0 +1,16 @@
+---
+title: Testing arrow code highlight
+highlight-style: arrow
+theme: 
+  light: flatly
+  dark: darkly
+---
+
+
+```{.julia}
+function divide_floats(x::Float64, y::Float64)
+    return x / y
+end
+```
+
+And here the inline version `function divide_floats(x::Float64, y::Float64)`{.julia}.