Embedding Kontrast visualizations into web pages
If you have access to a web space, you can simply upload the HTML and
via the HTML
<script> tags and you are done. More information on
the files distributed within this Kontrast standalone distribution can
be found in the documentation article on the
Note that you do not require any permissions to run server-side scripts (such as PHP, for example) and you do not require access to any databases.
If you only have permissions to include other content via the
<iframe> element, you can create your visualization
as a standalone HTML file without any additional text content.
An example is provided in
site/examples/minimal-iframe.html. It can be embedded as
shown in the following snippet:
iframe looks like this:
The disadvantage of using
iframes is that it is more
difficult to use interactive elements (such as sliders, for example)
outside of the
iframe. If you are able to
include all interactive elements within the
the slider in the example above) this is not a problem.
In order to embed Kontrast visualizations into WordPress posts, you
snippets into WordPress. While there are several ways to achieve this,
the simplest way is to enter arbitrary HTML using the
HTML block in the Gutenberg editor. If you find a different way
to include the code snippets detailed below, it should work as well.
All steps described below take place on an individual post. Click
Edit within the
Posts menu to edit a post.
Step 1: Insert the figure in the post
Edit your post as HTML. In the Gutenberg editor, simply add a
Custom HTML block. In the older editor, click the three dots
More tools & options) →
Code editor (or press
Ctrl + Shift + Alt + M).
An editor should appear where you now see your post as HTML. To insert your figure, insert something like the following:
As usual, the names
point, no WordPress-specific considerations need to be made, you can
simply copy and paste your code from your visualizations created
within the Kontrast distribution or the example files.
Using the Gutenberg
Custom HTML block, you can directly enter
your script. Alternatively, you can enter your code using a script
plugin (such as
Scripts n Styles,
https://wordpress.org/plugins/scripts-n-styles/). Again, no WordPress-specific modifications need to be made, you
can simply use your original code as-is.
Finally, you need to include
kontrast.css files (and perhaps the KaTeX files for
mathematical formulae). Within the
Scripts n Styles plugin
settings for your post, navigate to
HTML for the head element. In the Gutenberg
Custom HTML block, you can enter the following snippet
You can of course host the above files for Kontrast on your own domain
or within the
wp-admin/uploads directory: Simply upload
kontrast.js somewhere on your server and modify the above
You can use KaTeX for LaTeX-style math typesetting. You can take the
KaTeX files either from ext.soengen-dev.de, host it on your own
somewhere, or use the KaTeX
Content delivery network (CDN) as
shown above and described in the