`<canvas>` tag rendered instead of escaped in `p5.Graphics` reference page

[SableRaf]

Most appropriate sections of the p5.js website?

Reference

What is your operating system?

Mac OS

Web browser and version

147.0.7727.138 (Official Build) (arm64)

Actual Behavior

The <canvas> tag in the p5.Graphics.remove() reference text is being rendered as a real canvas element on the page.

Expected Behavior

The reference page should show the code example as text only. The <canvas> element should be escaped, not inserted into the page as an actual canvas.

Steps to reproduce

Visit https://p5js.org/reference/p5/p5.Graphics/ and scroll down to Methods>remove.

Notes

Whoever works on this issue should audit the website for other reference pages suffering from the same issue.

Would you like to work on the issue?

No, I'm just reporting the issue

[nbogie]

More detail only on the p5 v2 branch:

• The jsdoc does use literal < on the back-ticked <canvas> (in two places).
• In fact there are now NO occurrences of < in any jsdoc in the v2 branch (consistent, great!)
• The same description for the remove() method is rendered in two places:
  • 1. ✅ /p5.Graphics/remove/ - this renders correctly - it is the dedicated page for the method.
  • 2. ❌ /p5/p5.Graphics/ - renders incorrectly (doesn't get escaped). This is the top page for the class.
• Here's the source (link):

/**
 * Removes the graphics buffer from the web page.
 *
 * Calling `myGraphics.remove()` removes the graphics buffer's
 * `<canvas>` element from the web page. The graphics buffer also uses
 */

Also in p5.Graphics() parameter list

In the parameters section of the p5.Graphics() method, on ❌ the p5.Graphics class page, the mention of canvas there also does not get escaped correctly:

Source (link):

/** 
 * @class p5.Graphics
 * ...
 * @param {HTMLCanvasElement} [canvas]     existing `<canvas>` element to use. 
*/

Also in p5.Element, but different!

Looking to see if we see this pattern in other classes and their individual method pages:

• ❌p5.Element#parent method in the class - incorrect render
• ❌p5.Element#parent dedicated page - ALSO incorrect render!

Suggestions for those fixing this:

• Notice https://github.com/processing/p5.js/pull/8661's decision: never manually escape in docs. A fix should avoid breaking that rule, which is now consistently applied across the entire v2 codebase.
• Figure out why the same data from a single piece of jsdoc is rendering correctly /p5.Graphics/remove/ but differently on /p5/p5.Graphics/.
• Bonus: consider if we can automatically scan all generated pages (probably the intermediate .mdx files) to look for these unescaped tags. It's ok if it's not part of CI - it'd still be a big win to have a script to invoke manually.

Reminder: I haven't looked at p5 v1 branch here (on which the original bug is actually raised).