Merge pull request #7466 from processing/interleaved-examples

Interleave example between other docs

Author: davepagurek

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.');

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 `<pre><code${attrs}>${node.value}</code></pre>`;
   } else if (node.type === 'inlineCode') {
     return '<code>' + node.value + '</code>';
   } else if (node.type === 'list') {