Code Block Rendering Issue After Page Refresh in Prismatic 3.5

Hi Jeff,

I downgraded the prismatic plugin to version 3.4.4 and kept using it. I tried again with the new version 3.6 and it has the same bug as version 3.5.

When refreshing the page, there’s a brief moment where the code content appears outside of the code block before it snaps back into place. This behavior wasn’t present in earlier versions.

I installed it in a fresh WP install and I can reproduce this behavior every time.

• I have the default 2025 theme.
• I use prism.js only
• Create a new post and add a new prismatic block and add the code below and save the post.

/* **********************************************
     Begin prism-core.js
********************************************** */

/// <reference lib="WebWorker"/>

var _self = (typeof window !== 'undefined')
	? window   // if in browser
	: (
		(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
			? self // if in worker
			: {}   // if in node js
	);

/**
 * Prism: Lightweight, robust, elegant syntax highlighting
 *
 * @license MIT <https://opensource.org/licenses/MIT>
 * @author Lea Verou <https://lea.verou.me>
 * @namespace
 * @public
 */
var Prism = (function (_self) {

	// Private helper vars
	var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
	var uniqueId = 0;

	// The grammar object for plaintext
	var plainTextGrammar = {};


	var _ = {
		/**
		 * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
		 * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
		 * additional languages or plugins yourself.
		 *
		 * By setting this value to true, Prism will not automatically highlight all code elements on the page.
		 *
		 * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
		 * empty Prism object into the global scope before loading the Prism script like this:
		 *
		 * js<br>		 * window.Prism = window.Prism || {};<br>		 * Prism.manual = true;<br>		 * // add a new <script> to load Prism's script<br>		 *
		 *
		 * @default false
		 * @type {boolean}
		 * @memberof Prism
		 * @public
		 */
		manual: _self.Prism && _self.Prism.manual,
		/**
		 * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
		 * addEventListener to communicate with its parent instance. However, if you're using Prism manually in your
		 * own worker, you don't want it to do this.
		 *
		 * By setting this value to true, Prism will not add its own listeners to the worker.
		 *
		 * You obviously have to change this value before Prism executes. To do this, you can add an
		 * empty Prism object into the global scope before loading the Prism script like this:
		 *
		 * js<br>		 * window.Prism = window.Prism || {};<br>		 * Prism.disableWorkerMessageHandler = true;<br>		 * // Load Prism's script<br>		 *
		 *
		 * @default false
		 * @type {boolean}
		 * @memberof Prism
		 * @public
		 */
		disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,

		/**
		 * A namespace for utility methods.
		 *
		 * All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may
		 * change or disappear at any time.
		 *
		 * @namespace
		 * @memberof Prism
		 */
		util: {
			encode: function encode(tokens) {
				if (tokens instanceof Token) {
					return new Token(tokens.type, encode(tokens.content), tokens.alias);
				} else if (Array.isArray(tokens)) {
					return tokens.map(encode);
				} else {
					return tokens.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
				}
			},

			/**

• Go to the post front-end and refresh the page.

I recorded a GIF with what is happening > GIF (give it some seconds for it to load because I didn’t refresh immediately in the browser).

I uploaded the Prismatic settings > image1 image2 image3 image4 image5

Let me know if you need more information to get to the bottom of this! Thanks.

Thanks for testing it on your end.

I have tried it on Firefox, Edge, and Chrome. I also have tried different languages from the dropdown menu in Prismatic. The result is the same on all of them.

It happens with all themes. All plugins are disabled. I also tested it on a clean WordPress install with only the Prismatic plugin installed. I tested it in both a local environment and a cloud environment.

The last version where this bug did not appear was 3.4.4. After that, it started occurring.

So it is definitely a change in the plugin that is causing this. If you are unable to fix it, please let me know, and I will switch to another plugin.

Thanks.

Jeff, I am using a Windows environment and it might be that. Did you try it on a Windows system for example?

Thanks, Jeff. Can you please add more code to the horizontal lines? Because it’s difficult to test like this.