From 9fd444313855fbdfef28f9f3191c452dad33421e Mon Sep 17 00:00:00 2001
From: Dave Pagurek <davepagurek@gmail.com>
Date: Mon, 13 Jan 2025 18:24:49 -0500
Subject: [PATCH 1/3] Interleave example between other docs

---
 src/image/loading_displaying.js | 42 ++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js
index a95efdcf0c..e0d94c7ba2 100644
--- a/src/image/loading_displaying.js
+++ b/src/image/loading_displaying.js
@@ -854,6 +854,26 @@ function loadingDisplaying(p5, fn){
    * destination image's top left corner. See
    * <a href="#/p5/imageMode">imageMode()</a> for other ways to position images.
    *
+   * ```js, example
+   * let img;
+   *
+   * // Load the image.
+   * function preload() {
+   *   img = loadImage('assets/laDefense.jpg');
+   * }
+   *
+   * function setup() {
+   *   createCanvas(100, 100);
+   *
+   *   background(50);
+   *
+   *   // Draw the image.
+   *   image(img, 0, 0);
+   *
+   *   describe('An image of the underside of a white umbrella with a gridded ceiling above.');
+   * }
+   * ```
+   *
    * Here's a diagram that explains how optional parameters work in `image()`:
    *
    * <img src="assets/drawImage.png"></img>
@@ -907,28 +927,6 @@ function loadingDisplaying(p5, fn){
    *   background(50);
    *
    *   // Draw the image.
-   *   image(img, 0, 0);
-   *
-   *   describe('An image of the underside of a white umbrella with a gridded ceiling above.');
-   * }
-   * </code>
-   * </div>
-   *
-   * <div>
-   * <code>
-   * let img;
-   *
-   * // Load the image.
-   * function preload() {
-   *   img = loadImage('assets/laDefense.jpg');
-   * }
-   *
-   * function setup() {
-   *   createCanvas(100, 100);
-   *
-   *   background(50);
-   *
-   *   // Draw the image.
    *   image(img, 10, 10);
    *
    *   describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');

From e2dcc337576f3be353b1616352e501713e1af498 Mon Sep 17 00:00:00 2001
From: Dave Pagurek <davepagurek@gmail.com>
Date: Mon, 13 Jan 2025 19:02:25 -0500
Subject: [PATCH 2/3] Handle meta in converter

---
 src/image/loading_displaying.js |  2 +-
 utils/convert.js                | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js
index e0d94c7ba2..677b768464 100644
--- a/src/image/loading_displaying.js
+++ b/src/image/loading_displaying.js
@@ -854,7 +854,7 @@ function loadingDisplaying(p5, fn){
    * destination image's top left corner. See
    * <a href="#/p5/imageMode">imageMode()</a> for other ways to position images.
    *
-   * ```js, example
+   * ```js example
    * let img;
    *
    * // Load the image.
diff --git a/utils/convert.js b/utils/convert.js
index d3b5722bc4..acb5e62293 100644
--- a/utils/convert.js
+++ b/utils/convert.js
@@ -39,6 +39,19 @@ function descriptionString(node, parent) {
     const content = node.children.map(n => descriptionString(n, node)).join('');
     if (parent && parent.children.length === 1) return content;
     return '<p>' + content + '</p>\n';
+  } else if (node.type === 'code') {
+    let classes = [];
+    let attrs = '';
+    if (node.lang) {
+      classes.push(`language-${node.lang}`);
+    }
+    if (node.meta) {
+      classes.push(node.meta);
+    }
+    if (classes.length > 0) {
+      attrs=` class="${classes.join(' ')}"`;
+    }
+    return `<code${attrs}>${node.value}</code>`;
   } else if (node.type === 'inlineCode') {
     return '<code>' + node.value + '</code>';
   } else if (node.type === 'list') {

From 83e7c45a99e46b96177d599ef2c4e300318136c1 Mon Sep 17 00:00:00 2001
From: Dave Pagurek <davepagurek@gmail.com>
Date: Mon, 13 Jan 2025 19:35:26 -0500
Subject: [PATCH 3/3] Add attrs

---
 utils/convert.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/utils/convert.js b/utils/convert.js
index acb5e62293..c44acc5b45 100644
--- a/utils/convert.js
+++ b/utils/convert.js
@@ -51,7 +51,7 @@ function descriptionString(node, parent) {
     if (classes.length > 0) {
       attrs=` class="${classes.join(' ')}"`;
     }
-    return `<code${attrs}>${node.value}</code>`;
+    return `<pre><code${attrs}>${node.value}</code></pre>`;
   } else if (node.type === 'inlineCode') {
     return '<code>' + node.value + '</code>';
   } else if (node.type === 'list') {