P5.js: HTML Tags actually get rendered in docs

[NagariaHussain]

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [x] Dom
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version: 1.1.9
• Web browser and version: 84.0.4147.89 (Official Build) (64-bit) (cohort: Experimental (No-Diff)) and Microsoft Edge 84.0.522.40 (Official build) (64-bit)
• Operating System: Windows 10
• Steps to reproduce this:
  Go to the p5.js reference page and take a look at the documentation of createX() functions.
  
  The input tags in the dom.js docs are getting rendered on the page. Here is a screenshot for the documentation of the createCheckbox() function:
  
  The above is also happening in the docs of other DOM element creation functions like createInput, createSelect etc.
  I have tried this in two browsers: Google Chrome and Microsoft Edge.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[ishandotsh]

I'll try to fix as many as I can. Should be as simple as replacing the "<" with <

[limzykenneth]

@ishandotsh The tags are already escaped in the source. The problem here is that the markdown parser is unescaping the escaped tags, then the reference render the unescaped tags.

[NagariaHussain]

Yes, @limzykenneth. I think the same. Maybe the docs generator has some configuration that is causing this to happen.

[outofambit]

Here's an example of the escaped tags in our reference source (took me a minute to figure out what we're talking about here, just sharing for others):
https://github.com/processing/p5.js/blob/d84724736c256693007e3f97e683535620beea93/src/dom/dom.js#L490-L496

Maybe the docs generator has some configuration that is causing this to happen.

@NagariaHussain You are right! In https://github.com/processing/p5.js/pull/4673 @yukienomiya and I made a change to prevent escaped html markup from appearing in the translation files so it would be easier for translators to read and edit.

Since were still using a markdown parser, could we use the markdown backtick (`) approach to keep these from getting rendered?

[limzykenneth]

Something like

`<input></input>\`

will work in this case.

[NagariaHussain]

So, if we change every tag in the domjs (docs) to the above format and this will fix the issue?

And if that is the case, I will be really happy to do that and send a PR.

[NagariaHussain]

I replaced:

with

and it worked. The result:

Is it ok?
If it is, I have made the necessary changes and created a PR, can you please review it?