Prism Extension

Note: I have no affiliation with the creators of Prism. You can visit their official website here!

Highlight the <code> blocks on your page. Great if you're writing tutorials or sharing code. Supports a ton of languages, including HTML, CSS, JS, C/C++, PHP, Python, Lua and many more.

So basically, it turns this...


	<!doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>My Webpage</title>
		</head>
		<body>
			<h1>My Webpage</h1>
			<p>It sure is.</p>
		</body>
	</html>

...into this:


	<!doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>My Webpage</title>
		</head>
		<body>
			<h1>My Webpage</h1>
			<p>It sure is.</p>
		</body>
	</html>

Download

»»» Download «««

Install Instructions

Download the Static Ultra Prism extension using the link above.

Go to your site's root directory.

If you don't have an su-extensions folder, create one now.

Inside your su-extensions folder, create a prism folder (all lower case).

Upload or paste the contents of the downloaded prism folder into the prism folder you just created.

Open up your su-config.js.

Look for the this.EXTENSIONS block

If Prism is your first extension, adjust it as follows:


	this.EXTENSIONS = 
	[
		// Prism
		{
			"id": "prism",
			"classID": "Prism",
			"files": [
				"prism.css",
				"prism.js",
				"my-prism.js",
				"extension.js"
			]
		}
	];

If Prism is NOT your first extension, adjust it as follows:


	this.EXTENSIONS = 
	[
		// SomeExistingExtension
		{
			"id": "whatever",
			"classID": "Whatever",
			"files": [
				"extension.css",
				"extension.js"
			]
		},

		// Prism
		{
			"id": "prism",
			"classID": "Prism",
			"files": [
				"prism.css",
				"prism.js",
				"my-prism.js",
				"extension.js"
			]
		}
	];

Go to the very very end of your su-config file, and add the following:


	// Prism
	var scPrismCfg = {}
	scPrismCfg.ENABLE = true;
	scPrismCfg.ENABLE_CONSOLE_LOGS = true;

Go to the top of your su-config.js, and increase this.SITE_VERSION.

Prism is now installed, but you'll need to add the appropriate class names to your code blocks to get it to work. So, if you have a code block like follows:

<code>...some HTML</code>

You'll need to change it to the following to get Prism/the extension to highlight it:

<code class="language-html">...some HTML</code>

For JavaScript blocks, use class="language-javascript"
For CSS blocks, use class="language-css"

You can find more in the documentation on the linked website above.

And you're done!