Commit cbe75b80a547b6f1bc80d48df21eeb6f57106188
2015-01-21T13:19:33
Merge pull request #481 from vkbansal/plugin Added Highlight Keywords plugin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
diff --git a/components.js b/components.js
index e9483b7..3f640bd 100644
--- a/components.js
+++ b/components.js
@@ -319,6 +319,10 @@ var components = {
"show-language": {
"title": "Show Language",
"owner": "nauzilus"
+ },
+ "highlight-keywords": {
+ "title": "Highlight Keywords",
+ "owner": "vkbansal"
}
}
};
diff --git a/plugins/highlight-keywords/index.html b/plugins/highlight-keywords/index.html
new file mode 100644
index 0000000..b3141b0
--- /dev/null
+++ b/plugins/highlight-keywords/index.html
@@ -0,0 +1,51 @@
+<!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 />
+<script src="prefixfree.min.js"></script>
+<style>
+ /*
+ * Custom keyword styles
+ */
+ .token.keyword.keyword-return, .token.keyword.keyword-if{
+ color: #f92672;
+ }
+</style>
+<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>Highlight Keywords</h2>
+ <p>This plugin adds special CSS classes for each keyword matched in the code. For example, the keyword <code>if</code> will have the class <code>keyword-if</code> as well. You can have fine grained control over the appearance of each keyword by providing your own CSS rules.</p>
+</header>
+
+<section>
+ <h1>Examples</h1>
+
+ <h2>JavaScript</h2>
+ <pre data-src="plugins/highlight-keywords/prism-highlight-keywords.js"></pre>
+
+ <h2>HTML (Markup)</h2>
+ <pre data-src="plugins/highlight-keywords/index.html"></pre>
+</section>
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
+
+<script src="prism.js"></script>
+<script src="plugins/highlight-keywords/prism-highlight-keywords.js"></script>
+<script src="utopia.js"></script>
+<script src="components.js"></script>
+<script src="code.js"></script>
+
+
+</body>
+</html>
diff --git a/plugins/highlight-keywords/prism-highlight-keywords.js b/plugins/highlight-keywords/prism-highlight-keywords.js
new file mode 100644
index 0000000..58c9ad9
--- /dev/null
+++ b/plugins/highlight-keywords/prism-highlight-keywords.js
@@ -0,0 +1,14 @@
+(function(){
+
+if (!self.Prism) {
+ return;
+}
+
+Prism.hooks.add('wrap', function(env) {
+ if (env.type !== "keyword") {
+ return;
+ }
+ env.classes.push('keyword-' + env.content);
+});
+
+})();
diff --git a/plugins/highlight-keywords/prism-highlight-keywords.min.js b/plugins/highlight-keywords/prism-highlight-keywords.min.js
new file mode 100644
index 0000000..3e6a382
--- /dev/null
+++ b/plugins/highlight-keywords/prism-highlight-keywords.min.js
@@ -0,0 +1 @@
+!function(){self.Prism&&Prism.hooks.add("wrap",function(s){"keyword"===s.type&&s.classes.push("keyword-"+s.content)})}();
\ No newline at end of file