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 :

Ny24

I created this plugin, because direct code didn’t work for me with the new WordPress Version. 
The Version Number of this plugin will always be the same as the Processing JS Version.
If you want responsive Processing, try this directly in the .pde file:
void draw(){ 
 size(window.innerWidth, window.innerHeight); 
}
Thanks to: 
– Ramoonus, who did the foundation for this. 
– Processing JS (http://processingjs.org/)

Processing-js-Easy

Includes and executes graphical javascript applications that have been written with processing (.pde)

Processing code directly vs Processing-js-Easy