jaiunblog

Processing code directly in your web page with shortcode is using this technique : 
http://processingjs.org/articles/jsQuickStart.html#processingcodeinwebpage
and adding prismjs (http://www.prismjs.com) for highlight the code
<h4>add processing code in your post</h4>
Just add shortcode
<ul>
<li>[p5js code canvas][/p5js] to show the code and the result</li>
<li>[p5js code][/p5js] to show the code</li>
<li>[p5js canvas][/p5js] to show the result of the code</li>
</ul>
<h4>example</h4>
[p5js code canvas]
<ol>
<li>// Processing code</li>
<li>void setup() {</li>
<li>size(200, 200);</li>
<li>background(100);</li>
<li>stroke(255);</li>
<li>ellipse(50, 50, 25, 25);</li>
<li>println(“hello web!”);</li>
<li>}</li>
</ol>
[/p5js]

Processing code directly

Processing code directly in your web page with shortcode is using this technique :

LABCAT

This plugin allows you to upload Processing (p5.js) Projects to your WordPress website. The Processing Projects you upload should be in a zip file that contains all the files required to run the project.
Uploaded Processing Projects can then be displayed anywhere on your website using the shortcode [pp-shortcode id=”0″]. Make sure to replace “0” in the shortcode with the ID of your project.
The shortcode also accepts width and height arguments. This allows you to set the size of the iframe used to display the Processing Project on your website, eg [pp-shortcode id=”0″ width=”960″ height=”500″].
The shortcodes for all the Processing Projects you upload will be displayed on the Processing Projects table for easy access.
You can view a live demo of the frontend output of this plugin at <a href="http://rocketship.co.nz/portfolio-item/iterative-pattern-genrative-landscape/" rel="nofollow ugc">www.rocketship.co.nz</a>.

Processing Projects

This plugin allows you to upload Processing (p5.js) Projects to your WordPress website. The Processing Projects you upload should be in a zip file tha …

Processing code directly vs Processing Projects