feat(reveal.js): add support for fragment indices in line highlighting

news/changelog-1.9.md

@@ -68,6 +68,7 @@ All changes included in 1.9:
 ### `revealjs`
 
 - ([#13722](https://github.com/quarto-dev/quarto-cli/issues/13722)): Fix `light-content` / `dark-content` SCSS rules not included in Reveal.js format. (author: @mcanouil)
+- ([#7378](https://github.com/quarto-dev/quarto-cli/issues/7378)): Add `code-line-fragment-indices` attribute to control fragment order when using stepped code line highlighting. (author: @mcanouil)
 
 ## Projects
 

src/config/constants.ts

@@ -97,6 +97,7 @@ export const kFigEnv = "fig-env";
 export const kFigPos = "fig-pos";
 export const kCodeFold = "code-fold";
 export const kCodeLineNumbers = "code-line-numbers";
+export const kCodeLineFragmentIndices = "code-line-fragment-indices";
 export const kCodeOverflow = "code-overflow";
 export const kCodeLink = "code-link";
 export const kCodeTools = "code-tools";

src/core/jupyter/jupyter.ts

@@ -106,6 +106,7 @@ import {
   kCellTblColumn,
   kCellWidth,
   kCodeFold,
+  kCodeLineFragmentIndices,
   kCodeLineNumbers,
   kCodeOverflow,
   kCodeSummary,
@@ -228,6 +229,7 @@ export const kJupyterCellInternalOptionKeys = [
   kCellMdIndent,
   kCodeFold,
   kCodeLineNumbers,
+  kCodeLineFragmentIndices,
   kCodeSummary,
   kCodeOverflow,
   kHtmlTableProcessing,
@@ -1506,6 +1508,11 @@ async function mdFromCodeCell(
       if (typeof cell.options[kCodeLineNumbers] !== "undefined") {
         md.push(` code-line-numbers=\"${cell.options[kCodeLineNumbers]}\"`);
       }
+      if (typeof cell.options[kCodeLineFragmentIndices] !== "undefined") {
+        md.push(
+          ` code-line-fragment-indices=\"${cell.options[kCodeLineFragmentIndices]}\"`,
+        );
+      }
     }
     md.push("}\n");
     let source = typeof cell.source === "string"

src/core/jupyter/types.ts

@@ -36,6 +36,7 @@ import {
   kCellTblColumn,
   kCellUserExpressions,
   kCodeFold,
+  kCodeLineFragmentIndices,
   kCodeLineNumbers,
   kCodeOverflow,
   kCodeSummary,
@@ -216,6 +217,7 @@ export interface JupyterCellOptions extends JupyterOutputFigureOptions {
   [kCellColumn]?: string;
   [kCodeFold]?: string;
   [kCodeLineNumbers]?: boolean | string;
+  [kCodeLineFragmentIndices]?: string;
   [kCodeSummary]?: string;
   [kCodeOverflow]?: string;
   [kCellMdIndent]?: string;

src/resources/editor/tools/attrs.yml

@@ -315,6 +315,8 @@
       doc: Show line numbers for code block
     - value: 'code-line-numbers="false"'
       doc: Do not show line numbers for code block
+    - value: 'code-line-fragment-indices="$0"'
+      doc: Custom fragment indices for code line highlighting steps (revealjs only)
     - value: 'shortcodes="false"'
       doc: Do not process shortcodes in this code block
 

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

@@ -7453,6 +7453,22 @@ var require_yaml_intelligence_resources = __commonJS({
             long: "Include line numbers in code block output (`true` or `false`).\n\nFor revealjs output only, you can also specify a string to highlight\nspecific lines (and/or animate between sets of highlighted lines).\n\n* Sets of lines are denoted with commas:\n  * `3,4,5`\n  * `1,10,12`\n* Ranges can be denoted with dashes and combined with commas:\n  * `1-3,5` \n  * `5-10,12,14`\n* Finally, animation steps are separated by `|`:\n  * `1-3|1-3,5` first shows `1-3`, then `1-3,5`\n  * `|5|5-10,12` first shows no numbering, then 5, then lines 5-10\n    and 12\n"
           }
         },
+        {
+          name: "code-line-fragment-indices",
+          tags: {
+            contexts: [
+              "document-code"
+            ],
+            formats: [
+              "revealjs"
+            ]
+          },
+          schema: "string",
+          description: {
+            short: "Custom fragment indices for code line highlighting steps (Reveal.js only)",
+            long: 'Custom fragment indices for code line highlighting steps (Reveal.js only).\n\nWhen using `code-line-numbers` with animation steps (separated by `|`),\nyou can control the fragment index of each step using this attribute.\nProvide a comma-separated list of integers, one for each highlighting step.\n\nFor example, with `code-line-numbers="|2|3"` (3 steps), you could use\n`code-line-fragment-indices="1,2,4"` to make:\n\n* The first step appear at fragment-index 1.\n* The second step appear at fragment-index 2.\n* The third step appear at fragment-index 4.\n\nThis allows interleaving code highlighting with other fragments on the slide.\n\nThe number of fragment indices must match the number of highlighting steps.\nIf they do not match, the attribute is ignored and default sequential\nindexing is used.\n'
+          }
+        },
         {
           name: "lst-label",
           schema: "string",
@@ -22892,6 +22908,10 @@ var require_yaml_intelligence_resources = __commonJS({
           short: "Include line numbers in code block output (<code>true</code> or\n<code>false</code>)",
           long: "Include line numbers in code block output (<code>true</code> or\n<code>false</code>).\nFor revealjs output only, you can also specify a string to highlight\nspecific lines (and/or animate between sets of highlighted lines)."
         },
+        {
+          short: "Custom fragment indices for code line highlighting steps (Reveal.js\nonly)",
+          long: 'Custom fragment indices for code line highlighting steps (Reveal.js\nonly).\nWhen using <code>code-line-numbers</code> with animation steps\n(separated by <code>|</code>), you can control the fragment index of\neach step using this attribute. Provide a comma-separated list of\nintegers, one for each highlighting step.\nFor example, with <code>code-line-numbers="|2|3"</code> (3 steps),\nyou could use <code>code-line-fragment-indices="1,2,4"</code> to\nmake:'
+        },
         "Unique label for code listing (used in cross references)",
         "Caption for code listing",
         "Whether to reformat R code.",
@@ -23772,6 +23792,10 @@ var require_yaml_intelligence_resources = __commonJS({
           short: "Shift heading levels by a positive or negative integer. For example,\nwith <code>shift-heading-level-by: -1</code>, level 2 headings become\nlevel 1 headings.",
           long: "Shift heading levels by a positive or negative integer. For example,\nwith <code>shift-heading-level-by: -1</code>, level 2 headings become\nlevel 1 headings, and level 3 headings become level 2 headings. Headings\ncannot have a level less than 1, so a heading that would be shifted\nbelow level 1 becomes a regular paragraph. Exception: with a shift of\n-N, a level-N heading at the beginning of the document replaces the\nmetadata title."
         },
+        {
+          short: "Schema to use for numbering pages, e.g.&nbsp;<code>1</code> or\n<code>i</code>, or <code>false</code> to omit page numbering.",
+          long: 'Schema to use for numbering pages, e.g.&nbsp;<code>1</code> or\n<code>i</code>, or <code>false</code> to omit page numbering.\nSee <a href="https://typst.app/docs/reference/model/numbering/">Typst\nNumbering</a> for additional information.'
+        },
         {
           short: "Sets the page numbering style and location for the document.",
           long: 'Sets the page numbering style and location for the document using the\n<code>\\setuppagenumbering</code> command.\nSee <a href="https://wiki.contextgarden.net/Command/setuppagenumbering">ConTeXt\nPage Numbering</a> for additional information.'
@@ -24903,11 +24927,7 @@ var require_yaml_intelligence_resources = __commonJS({
         "Disambiguating year suffix in author-date styles (e.g.&nbsp;\u201Ca\u201D in \u201CDoe,\n1999a\u201D).",
         "Manuscript configuration",
         "internal-schema-hack",
-        "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.",
-        {
-          short: "Schema to use for numbering pages, e.g.&nbsp;<code>1</code> or\n<code>i</code>, or <code>false</code> to omit page numbering.",
-          long: 'Schema to use for numbering pages, e.g.&nbsp;<code>1</code> or\n<code>i</code>, or <code>false</code> to omit page numbering.\nSee <a href="https://typst.app/docs/reference/model/numbering/">Typst\nNumbering</a> for additional information.'
-        }
+        "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": [
         {
@@ -25136,12 +25156,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 218561,
+        _internalId: 219291,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 218553,
+            _internalId: 219283,
             type: "enum",
             enum: [
               "png",
@@ -25157,7 +25177,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 218560,
+            _internalId: 219290,
             type: "anyOf",
             anyOf: [
               {