unwanted html in the code/ wordpress

[tchoi8]

This widget has been incredibly helpful for the signing coders workshop. Much thanks to Atul. One problem I've been having is specific to use in wordpress blog. I think this might be wordpress-specific issue, with a reasonable workaround. However, I think it's worth pointing out for future use.

My use cas scenario has been: write some code in the p5 desktop editor and paste it in the wordpress Text mode.

and the

and

shows up in side of the widget.

I've been able to manage so far by manually deleting it, but it's hard to find out where they are. Not having full control over the code results in some awkward code structures. This is related to the previous issue.

[toolness]

Oh! I just found out this can be avoided by using the <pre> tag in Wordpress. So for example, the following works on my Wordpress installation:

<pre>
<script type="text/p5">
var result;

function preload() {
  results = loadStrings('assets/beforeSleep.txt');
}

function setup() {
  background(200);
  createCanvas(500, 500);
  txt = join(result, '\n');
}

/* And so on... */
</script>
</pre>

Because the <script> content is wrapped in a <pre>, Wordpress won't auto-format any of it.

There's some ways I can address this:

• Document the workaround in the documentation.
• The p5 widget can detect to see if the first line of the sketch ends with a </p>, in which case it will know (A) that it's not valid JS, and (B) that it was likely inserted by a tool like Wordpress. It can then log the warning and information about the workaround to the Web console. Or, if the author isn't likely to have the console open, it could write it directly into the web page itself.
• Actually just use a <pre> tag for widget embeds, and deprecate the use of <script type="text/p5"> (or, alternatively, document and allow both). The only thing I don't like about the <pre> solution is that it means that the browser will actually interpret everything inside it as HTML, which could lead to some weird behavior (it's actually the reason I didn't use <pre> to begin with). Alternatively, however, one benefit of using <pre> is that the p5 code will still at least be readable and visible to browsers with JS disabled, to "read it later" tools like Pocket and Readability, and so on.

Thoughts?

[tchoi8]

Superb. Thanks so much. pre works for the sketches I had. I think first documenting and suggesting the workaround, or have FAQ section with it, would be a first good step. Also, it will be great to note the possible behaviors and edge case scenarios.