Create your snippet's HTML, CSS and Javascript in the editor tabs

First You will need to include the prism.css and prism.js files.

Prism does its best to encourage good authoring practices. Therefore, it only works with <code> elements, since marking up code without a <code> element is semantically invalid. According to the HTML5 spec, the recommended way to define a code language is a language-xxxx class, which is what Prism uses. To make things easier however, Prism assumes that this language definition is inherited. Therefore, if multiple <code> elements have the same language, you can add the language-xxxx class on one of their common ancestors. This way, you can also define a document-wide default language, by adding a language-xxxx on the <body> or <html> element.

If you want to opt-out of highlighting for a <code> element that is a descendant of an element with a declared code language, you can add the class language-noneto it (or any non-existing language, really).

The recommended way to mark up a code block(both for semantics and for Prism) is a <pre> element with a <code> element inside, like so:


a:active {
 outline: 0;
}
a:hover {
 outline: 0;
}
abbr[title] {
 border-bottom: 1px dotted;
}
b, strong {
 font-weight: bold;
}
dfn {
 font-style: italic;
}
h1 {
 font-size: 2em;
 margin: 0.67em 0;
}

Example of PHP code:


// A php comment
<?php echo get_template_uri( $divvy ) ?>
<?php if( get_theme_mod( 'digimouse_logo') != "" ): ?>
 <img id="logo" src="<?php echo get_theme_mod( 'digimouse_logo' ); ?>">
<?php endif; ?>

Example of JavaScript code:


(function() {
 if ( typeof self !=='undefined' && !self.Prism || typeof global !=='undefined' && !global.Prism) {
 return;
 }
 Prism.hooks.add('before-highlight', function(env) {
 var tokens=env.grammar;
 tokens.tab=/\t/g;
 tokens.crlf=/\r\n/g;
 tokens.lf=/\n/g;
 tokens.cr=/\r/g;
 tokens.space=/ /g;
 }
 );
}
)();

Example of TypeScript code:


/**
 * @license Copyright (c) Microsoft Corporation. All rights reserved.
 */
import * as fs from "fs-extra";
import * as path from "path";
import { sync } from "glob";
import { promisify } from "util";
const copyFilePromise = promisify(fs.copyFile);
async function copyFiles(srcDir: string, destDir: string, files: any) {
 await Promise.all(files.map(f => copyFilePromise(path.join(srcDir, f), path.join(destDir, f))));
}
function createFile(filepath: string, fileContent: string) {
 if (!fs.existsSync(filepath)) {
 fs.writeFileSync(filepath, Buffer.from(JSON.stringify(fileContent, null, 2), "utf-8"));
 }
}