From e84f91ae3f1b231587b0f8714dc66c6b2373280a Mon Sep 17 00:00:00 2001
From: Yihui Xie <xie@yihui.name>
Date: Sat, 7 Dec 2024 11:42:31 -0600
Subject: [PATCH] change the xref example to a more meaningful one (code
 listing)

---
 docs/03-syntax.Rmd         | 37 ++++++++++++++++++++++++++-----------
 inst/resources/default.css |  2 +-
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/docs/03-syntax.Rmd b/docs/03-syntax.Rmd
index ff6341a..f2335c7 100644
--- a/docs/03-syntax.Rmd
+++ b/docs/03-syntax.Rmd
@@ -52,7 +52,7 @@ i:
 any_character.is-okay: string not quoted
 ```
 
-The TASTY specifications are:
+The TRACY specifications are:
 
 1.  Each line should be of the form `field: value`. The `field` name can use any
     character. The `value` cannot span across multiple lines. If a line starts
@@ -516,32 +516,47 @@ a^2 + b^2 = c^2 \label{eq:pyth-theorem} \tag{PT}
 You can cross-reference any other type of elements by adding empty anchors of
 the form `[](#@ID)` into them, e.g.,
 
-```{md, attr.asis = '.callout-output'}
-::: {#blk:example style="background: ghostwhite; padding: 1px 1em;"}
-[](#@blk:example) This is a numbered block.
+````{md, attr.asis = '.callout-output'}
+:::: {#lst:example .box}
+::: caption
+[](#@lst:example) A code listing demonstrating how to fold code blocks with JS.
 :::
 
-We can cross-reference @blk:example.
+```js
+document.querySelectorAll('pre').forEach(pre => {
+  const d = document.createElement('details');
+  d.innerHTML = '<summary>Details</summary>';
+  pre.before(d);  // insert <details> before <pre>
+  d.append(pre);  // move <pre> into <details>
+});
+```
+::::
+
+We can cross-reference @lst:example.
+````
+
+```{css, echo = FALSE}
+[id^="lst:"] code[class] { background-color: inherit; }
 ```
 
-Note that we also added the ID (`#blk:example`) to the fenced Div to make it the
+Note that we also added the ID (`#lst:example`) to the fenced Div to make it the
 target of the cross reference, i.e., when you click on the reference, the
 browser will navigate to the Div.
 
 For HTML output, we can style the numbers and references with CSS. Element
 numbers are wrapped in `<span class="ref-number-*"></span>`, and references are
 wrapped in `<span class="cross-ref-*"></span>`, where `*` is the ID prefix
-(e.g., `fig`, `tab`, and `eqn`). For example, we can add the label "Block" to
+(e.g., `fig`, `tab`, and `eqn`). For example, we can add the label "Listing" to
 the number and reference of the block above:
 
 ```{css}
-.ref-number-blk::before, .cross-ref-blk::before {
-  content: "Block ";
+.ref-number-lst::before, .cross-ref-lst::before {
+  content: "Listing ";
 }
-.ref-number-blk {
+.ref-number-lst {
   font-style: italic;
 }
-.ref-number-blk::after {
+.ref-number-lst::after {
   content: ". "
 }
 ```
diff --git a/inst/resources/default.css b/inst/resources/default.css
index ba276e0..72f6527 100644
--- a/inst/resources/default.css
+++ b/inst/resources/default.css
@@ -15,7 +15,7 @@ pre { white-space: pre-wrap; word-break: break-word; }
 pre code { display: block; padding: 1em; overflow-x: auto; }
 code { font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace; }
 :not(pre) > code, code[class], .box > .caption { background-color: #f8f8f8; }
-pre > code:not([class]), pre > .language-plain, .box { background-color: inherit; border: 1px solid #eee; }
+pre > code:is(:not([class]), .language-plain, .language-none), .box { background-color: inherit; border: 1px solid #eee; }
 pre > .message { border-color: #9eeaf9; }
 pre > .warning { background: #fff3cd; border-color: #fff3cd; }
 pre > .error { background: #f8d7da; border-color: #f8d7da; }