seancarmody

Protovis Loader is a plugin which faciliates the use of <a href="http://vis.stanford.edu/protovis/" rel="nofollow ugc">Protovis</a> scripts. Protovis is a javascript data visualisation library being developed at Stanford, which allows the creation of interactive charts on web pages.
Incorporating Javascript code into WordPress posts can be tricky as it (deliberately) sanitises text typed into posts, which interferes with Javascript. When I first began experimenting with Javascript, this cause me some difficulties, as described in this post. In the end, I decided to roll up my sleeves and write a plugin to make the whole process a lot easier. Protovis Loader was the result.
Protovis Loader makes the whole process a lot easier in two ways:
<ol>
<li>It ships with a copy of the Protovis javascript library and once the plugin is activated, links to the library will automatically be included in page headers.</li>
<li>It creates a shortcode called [pvis] which makes it very easy to include Protovis scripts in blog posts and pages.</li>
</ol>
Usage:
Simply use the [pvis] shortcode in your posts and pages where you want to include a Protovis chart. There are a number of optional parameters:
<ul>
<li>type: ‘chart’ (default) displays a chart in a box with an optional caption, ‘inline’ has no box (e.g. useful for sparklines)</li>
<li>src: path to a Protovis (javascript) code file</li>
<li>height: height of canvas box for the chart</li>
<li>width: width of canvas box for the chart</li>
<li>img: path to a fallback image to use when scripts are blocked or the browser does not support Protovis</li>
<li>alt: alt text for the fallback image</li>
<li>caption: image caption</li>
</ul>
If any content is supplied between the opening [pvis] tag and the closing [/pvis] tag, it is taken to be javascript for inclusion. It may also be interpreted as a caption, but only if a caption field is not supplied and a src field is supplied.
Here is an example of use of the tag:
[pvis src=”http://www.example.com/chart.js” img=”fails.png” height=”125px”]My Caption![/pvis]
You can see the plugin in action on <a href="http://www.stubbornmule.net/resources/protovis-loader/" rel="nofollow ugc">the Stubborn Mule</a>.
<h3>To-Do List</h3>
This list is not really prioritised yet.
<ol>
<li>Improve user-agent (browser) detection</li>
<li>Create an options page</li>
<li>Allow custom CSS files</li>
<li>Allow for alterntive specification of the protovis js library</li>
<li>Replace tags in the imported script to allow shortcode parameters to be used in the script</li>
</ol>
I’m sure there’ll be a lot more!

Protovis Loader

Creates a shortcode to faciliate the use of Protovis data visualization scripts in blog posts.

neffff

<blockquote>
“Markdeep is ideal for design documents, specifications, README files, code documentation, lab reports, blogs, and technical web pages. Because the source is plain text, Markdeep works well with software development toolchains.” 
 — http://casual-effects.com/markdeep/
“Markdeep is a text formatting syntax that extends Markdown, and a JavaScript program for making it work in browsers. The two most powerful features are its ability to run in any web browser on the client side and the inclusion of diagrams.” 
 — https://casual-effects.com/markdeep/features.md.html
</blockquote>
This plugin adds a gutenberg block supporting the <a href="http://casual-effects.com/markdeep/" rel="nofollow ugc">markdeep</a> language. The editor shows both a plaintext 
area for composing the text, and a preview area to display the rendered block.
<h3>MathJax & CDN</h3>
In order to support <a href="https://www.mathjax.org/" rel="nofollow ugc">MathJax</a> features, the MathJax library is loaded from an external <a href="https://cdnjs.cloudflare.com/" rel="nofollow ugc">CDN (cdnjs/cloudflare)</a>.
<blockquote>
MathJax.org does not collect, maintain, distribute, purchase, or sell personal data of any kind, and uses no cookies or other tracking 
 or advertising techniques.
Likewise, the MathJax software does not track you, and uses local storage only to maintain your preferences as set by the MathJax contextual menu.
— https://www.mathjax.org/#privacy-statement
</blockquote>
If you do not change the CDN you will be subject to cloudflare’s <a href="https://www.cloudflare.com/website-terms/" rel="nofollow ugc">terms</a> & <a href="https://www.cloudflare.com/privacypolicy/" rel="nofollow ugc">privacy policy</a>.
This CDN can be changed with a one-line script. (Alternately, use the WordPress plugin file editor to uncomment a similar line in 
 markdeep-block.php). In the future this should be an exposed configuration option.
To override the CDN use:
<pre><code>`php
</code></pre>
// Markdeep currently uses version 2.7.6 
add_filter( ‘markdeepblock_mathjax_url’, fn($u) => ‘https://cdn.jsdelivr.net/npm/mathjax@2.7.6/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML’ ); 
 `
<h3>Planned features</h3>
<ul>
<li>UI to configure CDN for JS resources (Markdeep, MathJax).</li>
<li>Configurable style per block.</li>
<li>Drop-down style selection of styles (globally & per-block).</li>
<li>Get MathJax commands working in editor. (MathJax currently works in posts).</li>
<li>Markdeep specific LaTeX/MathJax macros. (e.g. θ₀, θ₁, etc.)</li>
<li>Configurable MathJax macros.</li>
<li>Optional Table of Contents (currently suppressed)</li>
</ul>
<h3>Logo</h3>
The logo is derived from <a href="https://dustincurtis.com" rel="nofollow ugc">Dustin Curtis’s</a> https://github.com/dcurtis/markdown-mark.

Markdeep Block

Markdeep Block is a WordPress plugin for adding Gutenberg blocks supporting Markdeep syntax.

Protovis Loader vs Markdeep Block