Added plugin descriptions to plugin list (#2076)

This adds plugin descriptions to the plugin lists on the website.
PrismJS · Sep 30, 2019 · cdfa60a · cdfa60a
1 parent 53f07b1
commit cdfa60a
Show file tree

Hide file tree

Showing 29 changed files with 102 additions and 161 deletions.
diff --git a/components.js b/components.js
diff --git a/components.json b/components.json
@@ -1039,109 +1039,141 @@
 			"path": "plugins/{id}/prism-{id}",
 			"link": "plugins/{id}/"
 		},
-		"line-highlight": "Line Highlight",
+		"line-highlight": {
+			"title": "Line Highlight",
+			"description": "Highlights specific lines and/or line ranges."
+		},
 		"line-numbers": {
 			"title": "Line Numbers",
+			"description": "Line number at the beginning of code lines.",
 			"owner": "kuba-kubula"
 		},
 		"show-invisibles": {
 			"title": "Show Invisibles",
+			"description": "Show hidden characters such as tabs and line breaks.",
 			"after": [
 				"autolinker",
 				"data-uri-highlight"
 			]
 		},
-		"autolinker": "Autolinker",
-		"wpd": "WebPlatform Docs",
+		"autolinker": {
+			"title": "Autolinker",
+			"description": "Converts URLs and emails in code to clickable links. Parses Markdown links in comments."
+		},
+		"wpd": {
+			"title": "WebPlatform Docs",
+			"description": "Makes tokens link to <a href=\"https://webplatform.github.io/docs/\">WebPlatform.org documentation</a>. The links open in a new tab."
+		},
 		"custom-class": {
 			"title": "Custom Class",
+			"description": "Allows you to prefix Prism default classes (e.g. <code>.comment</code> will become <code>.namespace--comment</code>) or replace them with your defined ones (like <code>.editor__comment</code> or <code>.comment_7sh3a</code>).",
 			"owner": "dvkndn",
 			"noCSS": true
 		},
 		"file-highlight": {
 			"title": "File Highlight",
+			"description": "Fetch external files and highlight them with Prism. Used on the Prism website itself.",
 			"noCSS": true
 		},
 		"show-language": {
 			"title": "Show Language",
+			"description": "Display the highlighted language in code blocks (inline code does not show the label).",
 			"owner": "nauzilus",
 			"noCSS": true,
 			"require": "toolbar"
 		},
 		"jsonp-highlight": {
 			"title": "JSONP Highlight",
+			"description": "Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",
 			"noCSS": true,
 			"owner": "nauzilus"
 		},
 		"highlight-keywords": {
 			"title": "Highlight Keywords",
+			"description": "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.",
 			"owner": "vkbansal",
 			"noCSS": true
 		},
 		"remove-initial-line-feed": {
 			"title": "Remove initial line feed",
+			"description": "Removes the initial line feed in code blocks.",
 			"owner": "Golmote",
 			"noCSS": true
 		},
 		"inline-color": {
 			"title": "Inline color",
+			"description": "Adds a small inline preview for colors in style sheets.",
 			"require": "css-extras",
 			"owner": "RunDevelopment"
 		},
 		"previewers": {
 			"title": "Previewers",
+			"description": "Previewers for angles, colors, gradients, easing and time.",
 			"require": "css-extras",
 			"owner": "Golmote"
 		},
 		"autoloader": {
 			"title": "Autoloader",
+			"description": "Automatically loads the needed languages to highlight the code blocks.",
 			"owner": "Golmote",
 			"noCSS": true
 		},
 		"keep-markup": {
 			"title": "Keep Markup",
+			"description": "Prevents custom markup from being dropped out during highlighting.",
 			"owner": "Golmote",
 			"after": "normalize-whitespace",
 			"noCSS": true
 		},
 		"command-line": {
 			"title": "Command Line",
+			"description": "Display a command line with a prompt and, optionally, the output/response from the commands.",
 			"owner": "chriswells0"
 		},
-		"unescaped-markup": "Unescaped Markup",
+		"unescaped-markup": {
+			"title": "Unescaped Markup",
+			"description": "Write markup without having to escape anything."
+		},
 		"normalize-whitespace": {
 			"title": "Normalize Whitespace",
+			"description": "Supports multiple operations to normalize whitespace in code blocks.",
 			"owner": "zeitgeist87",
 			"after": "unescaped-markup",
 			"noCSS": true
 		},
 		"data-uri-highlight": {
 			"title": "Data-URI Highlight",
+			"description": "Highlights data-URI contents.",
 			"owner": "Golmote",
 			"noCSS": true
 		},
 		"toolbar": {
 			"title": "Toolbar",
+			"description": "Attach a toolbar for plugins to easily register buttons on the top of a code block.",
 			"owner": "mAAdhaTTah"
 		},
 		"copy-to-clipboard": {
 			"title": "Copy to Clipboard Button",
+			"description": "Add a button that copies the code block to the clipboard when clicked.",
 			"owner": "mAAdhaTTah",
 			"require": "toolbar",
 			"noCSS": true
 		},
 		"download-button": {
 			"title": "Download Button",
+			"description": "A button in the toolbar of a code block adding a convenient way to download a code file.",
 			"owner": "Golmote",
 			"require": "toolbar",
 			"noCSS": true
 		},
 		"match-braces": {
 			"title": "Match braces",
+			"description": "Highlights matching braces.",
 			"owner": "RunDevelopment"
 		},
 		"diff-highlight": {
 			"title": "Diff Highlight",
+			"description": "Highlights the code inside diff blocks.",
 			"owner": "RunDevelopment",
 			"require": "diff"
 		}

diff --git a/index.html b/index.html
@@ -158,7 +158,7 @@ <h1>Basic usage</h1>
 window.Prism.manual = true;
 &lt;/script>
 &lt;script src="prism.js">&lt;/script></code></pre>
-	
+
 	<h2>Usage with CDNs</h2>
 
 	<p>In combination with CDNs, we recommend using the <a href="plugins/autoloader">Autoloader plugin</a> which automatically loads languages when necessary.</p>
@@ -239,7 +239,7 @@ <h1>Supported languages</h1>
 <section id="plugins">
 	<h1>Plugins</h1>
 	<p>Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality.</p>
-	<ul class="plugin-list"></ul>
+	<ul class="plugin-list language-none"></ul>
 
 	<p>No assembly required to use them. Just select them in the <a href="download.html">download</a> page.</p>
 	<p>It’s very easy to <a href="extending.html#writing-plugins">write your own Prism plugins</a>. Did you write a plugin for Prism that you want added to this list? <a href="https://github.com/LeaVerou/prism" target="_blank">Send a pull request</a>!</p>

diff --git a/plugins/autolinker/index.html b/plugins/autolinker/index.html
@@ -16,12 +16,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Autolinker</h2>
-	<p>Converts URLs and emails in code to clickable links. Parses <a href="https://daringfireball.net/projects/markdown/">Markdown</a> links in comments.</p>
-</header>
+<header data-plugin-header="autolinker"></header>
 
 <section>
 	<h1>How to use</h1>
@@ -44,8 +39,8 @@ <h2>JavaScript</h2>
 var foo = 5;
 // And a single line comment http://google.com</code></pre>
 
- 	<h2>CSS</h2>
- 	<pre><code class="language-css">@font-face {
+	<h2>CSS</h2>
+	<pre><code class="language-css">@font-face {
 	src: url(http://lea.verou.me/logo.otf);
 	font-family: 'LeaVerou';
 }</code></pre>

diff --git a/plugins/autoloader/index.html b/plugins/autoloader/index.html
@@ -29,12 +29,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Autoloader</h2>
-	<p>Automatically loads the needed languages to highlight the code blocks.</p>
-</header>
+<header data-plugin-header="autoloader"></header>
 
 <section class="language-javascript">
 	<h1>How to use</h1>

diff --git a/plugins/command-line/index.html b/plugins/command-line/index.html
@@ -16,12 +16,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Command Line</h2>
-	<p>Display a command line with a prompt and, optionally, the output/response from the commands.</p>
-</header>
+<header data-plugin-header="command-line"></header>
 
 <section class="language-markup">
 	<h1>How to use</h1>

diff --git a/plugins/copy-to-clipboard/index.html b/plugins/copy-to-clipboard/index.html
@@ -16,12 +16,7 @@
 </head>
 <body class="language-markup">
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Copy to Clipboard</h2>
-	<p>Add a button that copies the code block to the clipboard when clicked.</p>
-</header>
+<header data-plugin-header="copy-to-clipboard"></header>
 
 <section>
 	<h1>How to use</h1>

diff --git a/plugins/custom-class/index.html b/plugins/custom-class/index.html
@@ -14,12 +14,7 @@
 </head>
 <body class="language-javascript">
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Custom Class</h2>
-	<p>This plugin allows you to prefix Prism default classes (<code>.comment</code> will become <code>.namespace--comment</code>) or replace them with your defined ones (like <code>.editor__comment</code> or <code>.comment_7sh3a</code>).</p>
-</header>
+<header data-plugin-header="custom-class"></header>
 
 <section>
 	<h1>Motivation</h1>

diff --git a/plugins/data-uri-highlight/index.html b/plugins/data-uri-highlight/index.html
@@ -16,12 +16,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Data-URI Highlight</h2>
-	<p>Highlights data-URI contents.</p>
-</header>
+<header data-plugin-header="data-uri-highlight"></header>
 
 <section>
 	<h1>How to use</h1>

diff --git a/plugins/diff-highlight/index.html b/plugins/diff-highlight/index.html
@@ -17,12 +17,7 @@
 
 <body class="language-none">
 
-	<header>
-		<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-		<h2>Diff Highlight</h2>
-		<p>Highlights the code inside diff blocks.</p>
-	</header>
+	<header data-plugin-header="diff-highlight"></header>
 
 	<section>
 		<h1>How to use</h1>

diff --git a/plugins/download-button/index.html b/plugins/download-button/index.html
@@ -16,12 +16,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Download Button</h2>
-	<p>A button in the toolbar of a code block adding a convenient way to download a code file.</p>
-</header>
+<header data-plugin-header="download-button"></header>
 
 <section class="language-markup">
 	<h1>How to use</h1>

diff --git a/plugins/file-highlight/index.html b/plugins/file-highlight/index.html
@@ -15,12 +15,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>File Highlight</h2>
-	<p>Fetch external files and highlight them with Prism. Used on the Prism website itself.</p>
-</header>
+<header data-plugin-header="file-highlight"></header>
 
 <section class="language-markup">
 	<h1>How to use</h1>

diff --git a/plugins/highlight-keywords/index.html b/plugins/highlight-keywords/index.html
@@ -22,12 +22,7 @@
 </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>
+<header data-plugin-header="highlight-keywords"></header>
 
 <section>
 	<h1>Examples</h1>

diff --git a/plugins/inline-color/index.html b/plugins/inline-color/index.html
@@ -23,12 +23,7 @@
 
 <span style="display: none; color: blue;"></span>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Inline color</h2>
-	<p>This plugin adds a small inline preview for colors in style sheets.</p>
-</header>
+<header data-plugin-header="inline-color"></header>
 
 <section>
 	<h1>Examples</h1>

diff --git a/plugins/jsonp-highlight/index.html b/plugins/jsonp-highlight/index.html
@@ -15,12 +15,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>JSONP Highlight</h2>
-	<p>Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).</p>
-</header>
+<header data-plugin-header="jsonp-highlight"></header>
 
 <section class="language-markup">
 	<h1>How to use</h1>

diff --git a/plugins/keep-markup/index.html b/plugins/keep-markup/index.html
@@ -29,12 +29,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Keep markup</h2>
-	<p>Prevents custom markup from being dropped out during highlighting.</p>
-</header>
+<header data-plugin-header="keep-markup"></header>
 
 <section>
 

diff --git a/plugins/line-highlight/index.html b/plugins/line-highlight/index.html
@@ -16,12 +16,7 @@
 </head>
 <body>
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Line highlight</h2>
-	<p>Highlights specific lines and/or line ranges.</p>
-</header>
+<header data-plugin-header="line-highlight"></header>
 
 <section class="language-markup">
 	<h1>How to use</h1>

diff --git a/plugins/line-numbers/index.html b/plugins/line-numbers/index.html
@@ -16,12 +16,7 @@
 </head>
 <body>
 
-<header>
-  <div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-  <h2>Line Numbers</h2>
-  <p>Line number at the beginning of code lines.</p>
-</header>
+<header data-plugin-header="line-numbers"></header>
 
 <section class="language-markup">
   <h1>How to use</h1>

diff --git a/plugins/match-braces/index.html b/plugins/match-braces/index.html
@@ -16,12 +16,7 @@
 </head>
 <body class="language-none">
 
-<header>
-	<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
-
-	<h2>Match braces</h2>
-	<p>Highlights matching braces.</p>
-</header>
+<header data-plugin-header="match-braces"></header>
 
 <section class="language-markup">
 	<h1>How to use</h1>