Code blocks in docs showing up as single line

[davepagurek]

Not sure if we plan on publishing the docs in the out/ folder somewhere, but if so, it looks like multiline code blocks aren't displaying properly. Looks like it's only treating double newlines as a paragraph break, and is squishing single newlines into one outputted line?

[tmartinez88]

confirming the yuidoc html output still looks very strange (worse even, now running the local yuidoc package with npx yuidoc .) when viewing the output html files, not sure what to make of it, will investigate - do you have any clue?

[davepagurek]

I think in p5.js, they use yuidoc to generate a json file with all the metadata, and then (in the 1.x main branch anyway) use Backbone.js to render that custom as an editable live sketch. Here, I think yuidoc is directly generating output with a default theme, which seems to be adding paragraphing inside the <code> tag. It looks like replacing <div><code>...</code></div> with <pre><code>...</code></pre> will at least make the output have line breaks:

/**
 * Get the current volume of a sound.
 * @class Amplitude
 * @constructor
 *
 * @example
 * <pre>
 * <code>
 * let sound, amp, cnv;
 *   
 * function preload() {
 *   //replace this sound with something local with rights to distribute
 *   sound = loadSound('https://tonejs.github.io/audio/berklee/gong_1.mp3');
 * }
 * 
 * function setup() {
 *   cnv = createCanvas(100, 100);
 *   cnv.mousePressed(playSound);
 *   textAlign(CENTER);
 *   fill(255);
 *   amp = new Amplitude();
 *   sound.connect(amp);
 * }
 * 
 * function playSound() {
 *   sound.play();
 * }
 * 
 * function draw() {
 *   let level = amp.getLevel();
 *   level = map(level, 0, 0.2, 0, 255);
 *   background(level, 0, 0);
 *   text('tap to play', width/2, 20);
 *   describe('The color of the background changes based on the amplitude of the sound.');
 * }
 * </code>
 * </pre>
 */
class Amplitude {

...so if we're OK with having just written code examples and not live interactive sketches, then using a pre tag looks like it'll do the trick. If we want live code examples like in the p5.js repo, we'll maybe have to do a custom theme.