Wordpress + Highlighter

Modified on Mon, 19 Dec, 2022 at 3:54 PM

With the release of Schema App Advanced 1.9.0, Schema App has simplified the setup for highlighter users. Instead of manually adding scripts using a tag manager or in your theme files, when you enable the Schema App highlighter, those scripts are automatically added to your pages.

This means you can follow the normal steps of installation without the need to use a tag manager or otherwise manually add scripts to your site.

Already deploying highlight.js or schemaFunctions separately?

No problem, while you should remove your scripts (or tag if using tag manager), the highlighter will not duplicate markup. Each time the script loads it checks for an existing instance and will go dormant if another is detected. This means it is safe to update your plugin with this setting enabled and then remove the tag separately at a later time.

How does it work?

The highlighter javascript is setup in such a way so it produces markup and sends it to Schema App's servers, we will run QA and also detect any changes in the markup produced.

If a change is detected, a webhook will notify your WordPress installation that markup has changed and the cache will be updated. In short, highlight.js produces the markup, schema app notifies on change, and WordPress adds it to the page on page load.

If you do not want to add markup to the page via WordPress in this way, and would rather add the markup from the client-side, see "Insert markup from client-side" below and ensure your plugins are up to date.

Where do I find the JavaScript? Does it work with Caching Plugins?

The Schema App Advanced WordPress plugin will insert the highlight.js library from our CDN.

<script async src="https://cdn.schemaapp.com/javascript/highlight.js"></script>

However, if you have common speed improving optimizations plugins installed, those plugins may defer the loading and / or rewrite the JavaScript src. This is expected and should have no effect on the highlighter performance. For example, on our website the src is rewritten as

<script data-async="" data-minify="1" type="text/javascript" data-cfasync="false" src="https://www.schemaapp.com/wp-content/cache/min/1/javascript/highlight.js?ver=1655995920"></script>

Text

Insert markup from client-side

In If you need to add markup to your pages on the client-side rather than using the standard deployment as described above, an option "Insert Highlighter markup from client-side" is available. if selected, this will insert the markup into your site's HTML from highlight.js directly, and will disable the server-side insertion of this markup.

Note: This option is available in Schema App Advanced 1.12.0, and requires version 1.20.0 the base plugin.