Plugin to show highlighted language, per Issue PrismJS#1

nauzilus · Feb 24, 2014 · 79af796 · 79af796
1 parent cc36c85
commit 79af796
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 1 deletion.
diff --git a/components.js b/components.js
@@ -122,6 +122,7 @@ var components = {
 		'file-highlight': {
 			title: 'File Highlight',
 			noCSS: true
-		}
+		},
+		'show-language': 'Show Language'
 	}
 };
diff --git a/plugins/show-language/index.html b/plugins/show-language/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="utf-8" />
+<link rel="shortcut icon" href="favicon.png" />
+<title>Show Language ▲ Prism plugins</title>
+<base href="../.." />
+<link rel="stylesheet" href="style.css" />
+<link rel="stylesheet" href="themes/prism.css" data-noprefix />
+<link rel="stylesheet" href="plugins/show-language/prism-show-language.css" data-noprefix />
+<script src="prefixfree.min.js"></script>
+
+<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
+<script src="http://www.google-analytics.com/ga.js" async></script>
+</head>
+<body>
+
+<header>
+	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
+
+	<h2>Show Language</h2>
+	<p>Display the highlighted language in code blocks (inline code does not show the label).</p>
+</header>
+
+<section>
+	<h1>Examples</h1>
+
+	<h2>JavaScript</h2>
+	<pre data-src="plugins/show-language/prism-show-language.js"></pre>
+
+	<h2>CSS</h2>
+	<pre data-src="plugins/show-language/prism-show-language.css"></pre>
+
+	<h2>HTML (Markup)</h2>
+	<pre data-src="plugins/show-language/index.html"></pre>
+</section>
+
+<section>
+	<h1>Known Issues</h1>
+
+	<ul>
+		<li>Changes the appearence of the Funky theme, to be less 'funky' and more 'black'</li>
+	</ul>
+</section>	
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
+
+<script src="prism.js"></script>
+<script src="plugins/show-language/prism-show-language.js"></script>
+<script src="utopia.js"></script>
+<script src="components.js"></script>
+<script src="code.js"></script>
+
+
+</body>
+</html>
diff --git a/plugins/show-language/prism-show-language.css b/plugins/show-language/prism-show-language.css
@@ -0,0 +1,21 @@
+pre[class*='language-'] {
+	position: relative;
+}
+pre[class*='language-'] > code[data-language] {
+	overflow: scroll;
+	max-height: 28em;
+	display: block;
+}
+pre[class*='language-'] > code[data-language]::before {
+	content: attr(data-language);
+	color: black;
+	background-color: #CFCFCF;
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	font-size: 0.9em;
+	border-radius: 0 0 0 5px;
+	padding: 0 0.5em;
+	text-shadow: none;
+}
diff --git a/plugins/show-language/prism-show-language.js b/plugins/show-language/prism-show-language.js
@@ -0,0 +1,16 @@
+(function(){
+
+if (!self.Prism) {
+	return;
+}
+
+var Languages = {
+	'csharp': 'C#',
+	'cpp': 'C++'
+};
+Prism.hooks.add('before-highlight', function(env) {
+	var language = Languages[env.language] || env.language;
+	env.element.setAttribute('data-language', language);
+});
+
+})();