Preview theme in WordPress

In the latest version of WordPress, it gives you the opportunity to view a preview of what your site would look like using a different theme. You basically just click on the theme, it takes over the screen and you have a chance to activate or close it (and return to the previous screen, which is grayed out in the background). I have seen a similar technique used on a number of websites recently for display images as well.

I'm wondering what technology/code they use to do this?

It's open source - use the source, Luke.

Look in wp-admin/js/theme-preview.js

preview_theme()

Start preview theme output buffer.

Description

Will only perform task if the user has permissions and template and preview query variables exist.

Source

function preview_theme() {
	_deprecated_function( __FUNCTION__, '4.3.0' );
}

The Customizer JavaScript API

In WordPress 4.1, newly-expanded JavaScript APIs were introduced for all customizer objects. The entire JavaScript API is currently located in a single file, wp-admin/js/customize-controls.js, which contains models for all objects, core custom controls, and more.

Preview JS and Controls JS

The customizer app is currently split into two distinct areas: the customizer controls “pane” and the customize preview. The preview is currently in an iframe, meaning that all JS runs either in the controls pane or in the preview. The postMessage API is used to communicate between the preview and the controls.

Most themes only implement JavaScript in the customize preview, and use it to implement instant previewing of settings via postMessage. However, JS on the controls side can be used for many things, such as dynamically showing and hiding controls based on the values of other settings, changing the previewed URL, focusing parts of the preview, and more. Here’s an example from core of controls-side JS that interacts with the preview, in this case changing the previewed URL when the page for posts changes:

// Change the previewed URL to the selected page when changing the page_for_posts.
wp.customize(
	'page_for_posts',
	function( setting ) {
		setting.bind( function( pageId ) {
			pageId = parseInt( pageId, 10 );
			if ( pageId > 0 ) {
				api.previewer.previewUrl.set( api.settings.url.home + '?page_id=' + pageId );
			}
		});
	}
);

Similar logic can be used to activate UI objects based on the value of a setting. The Twenty Seventeen theme includes some useful examples for leveraging the customize JS API for improved user experience. Note that there is one JS file for the controls pane, named customize-controls.js and one file for the customize preview, named customize-preview.js. For clarity, all themes and plugins are recommended to follow this naming convention, even if customize JS is only provided in the controls or preview but not both.

The rest of this page is dedicated primarily to the controls-side JS API that was built-out in WordPress 4.1.

Seeking code highlighter recommendation for WordPress

Can anybody recommend a reliable and decently documented code highlighter for WordPress 2.6.1? I have tried Code Snippet by Roman Roan and Developer Formatter by Gilberto Saraiva. But they don't seem to work as described in the documentation and are mangling the code snippets instead of prettifying them. Re-opened...OP is asking about a 'code highlighter' widget...something programmers use on their blogs...seems programming related to me. 5 Answers I use WP-Syntax and it's worked very well for me. It's supported every language I've thrown at it so far, and the colors can be customized for a particular theme (though the defaults look just fine too) Initially, I also used this plugin. Its simplicity and the fact that it is based on a well-established library (GeSHi) are the main arguments. I noticed, however, that it does not make best use of WordPress and GeSHi, and that it was not actively develope…