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 «««

Thank you DropBox for hosting the Zip for free!

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 (syntax highlighting)
		{
			"id": "prism",
			"classID": "Prism",
			"files": [
				"prism.js",
				"prism.css",
				"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 (syntax highlighting)
		{
			"id": "prism",
			"classID": "Prism",
			"files": [
				"prism.js",
				"prism.css",
				"extension.js"
			]
		},
	];

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


	var PRISM_ENABLE = 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!