Zusammenfassung

Dieses Plugin dient zum Hervorheben einzelner oder mehrerer Zeilen, die zu kennzeichnenden Passagen werden im data-line="" Attribut im <pre> Tag notiert. Die Zeilennummern werden durch Kommas getrennt, Brereiche durch einen Bindestrich angegeben: data-line="2,4-8". Lerzeichen sind möglich und werden entfernt. Line higlight funktioniert nur in <pre><code></code></pre> Blöcken, nicht jedoch bei inline Code.

				
				<!-- die 2. und 4. bis 8. Zeile wird hervorgehoben -->
				<pre class="language-markup" data-line="2,4-8">
					<code>
						div {
							color: #dd4a68;
							background: #669900;
							border: 1px solid #ee9900;
						}
					</code>
				</pre>
				

Wird nur ein Ausschnitt des Quellcodes gezeigt, kann es sinnvoll sein, der Markierung ein Zeilenoffset zu geben und so den markierten Bereich mit höheren Zeilennummern zu versehen.

				
				<!-- die 42. und 44. bis 48. Zeile hervorgehoben, Offset="40" -->
				<pre class="language-markup" data-line-offset="40" data-line="42,44-48">
					<code>
						div {
							color: #dd4a68;
							background: #669900;
							border: 1px solid #ee9900;
						}
					</code>
				</pre>
				

Sehr interessant finde ich die Möglichkeit, dem Codebeispiel eine id (id="play") zu geben und so die Hervorhebung von Zeilen über einen Link zu realisieren, in diesem Beispiel die Zeilen 4-8:

				
				<!-- die 4. bis 8. Zeile wird über einen Link hervorgehoben -->
				<pre id="play" class="language-markup">
					<code>
						div {
							color: #dd4a68;
							background: #669900;
							border: 1px solid #ee9900;
						}
					</code>
				</pre>
				<p><a href="#play.4-8">Link Beispiel</a></p>
				

Link Beispiel

Das Versehen des Code Beispiels mit Zeilennummern erhöht die Lesbarkeit erheblich. Dazu wird im <pre> Tag die Klasse class="line-numbers" notiert. Es funktioniert nur in <pre><code></code></pre> Blöcken, nicht jedoch bei inline Code. Zusätzlich kann mit dem data-start="" Attribut der Beginn der Numerierung verschoben werden.

					
					<pre class="language-markup line-numbers" data-start="10">
						<code>
							#id_name {
					    		color: #fff;
					    		background-color: #000;
					    		width: 200px;
						}
						</code>
					</pre>
					
				

Das Plugin "Show Invilibles" zeigt versteckte Zeichen wie Tabs und Zeilenumbrüche an, kein Code, nicht implementiert.

URLs und E-Mail Links werden in aktive links umgewandelt, das gilt auch für für Abschnitte, die als Kommentare notiert sind. Mit dem implementierten Markdown Tool kann auch normaler Text als aktiver Link angezeigt werden. <!--[Jörg Marzinzick](http://j-marzinzick.de)-->

					<!--
					Links in HTML, woo!
					Lea Verou http://lea.verou.me or, with Markdown, [Lea Verou](http://lea.verou.me)
					-->
					<img src="http://prismjs.com/img/spectrum.png" alt="In attributes too!" />
					<p>Autolinking in raw text: http://prismjs.com</p>
				

Erzeugt aus Schlüsselwörtern - Links zur WebPlatform.org Dokumentation, der Link wird in einem neuen Tab geöffnet. Es sind ausser dem Einbinden der prism Downloads keine weiteren Massnahmen notwendig. Bisher (August 2016) ist es eine beta Version. Links werden erzeugt aus:

• HTML, MathML and SVG tags
• HTML, MathML and SVG non-namespaced attributes
• (Non-prefixed) CSS properties
• (Non-prefixed) CSS @rules
• (Non-prefixed) CSS pseudo-classes
• (Non-prefixed) CSS pseudo-elements (starting with ::)

Sehr angenehme finde ich dieses Plugin, das eine ganze Datei einbindet, die darzustellende Sprache wird direkt aus der Dateiendung erzeugt, kann aber auch separat angegeben werden. Kann die Datei nicht geöffnet werden, wird eine Fehlermeldung angezeigt.

					
					<pre class="line-numbers hl-box"
						data-line="1"
						data-line-offset=""
						data-start="1"
						data-src="prism/prism-include/maz-3-11-prism-code-einbinden.html">
					</pre>
					
				

In der oberen rechten Ecke wird die Scriptsprache angezeit, so wird auf den ersten Blick klar, um welche Scriptsprache es sich handelt. Dieses Plugin funktioniert nur in Codeblöcken <pre><code></code></pre>, nicht jedoch bei der Darstellung von Inline - Code.

Das JSONP Highlight Plugin hebt JSONP Sequenzen hervor, es wird eine komplette Datei eingebunden. Im <pre> Tag wird dazu das data-jonp Attribut verwendet.

Der Plugin Name Highlight Keywords ist fast selbsterklärend, es werden Klassen für jedes Keyword erzeugt. Beispielsweise erhält if die spezielle Klasse keyword-if, so ist es möglich sehr detaillierte Darstellungen des Quelltextes zu realisieren. In diesem Beispiel sind für die Schlüsselworte if und return spezielle Stilregeln notiert worden.

Remove initial Line Feed gilt als veraltet (depricated) und wird zukünftig aus prism entfernt, stattdesssen wird empfohlen, das Plugin Normalize Whitespaces zu verwenden.
Es funktioniert nur bei Code Blöcken <pre><code></code></pre> nicht jedoch bei Inline - Code. Zum Deaktivieren dieser Funktion kann dem <pre> Tag die Klasse keep-initial-line-feed hinzugefügt werden. (carriage return-line feed Substantiv = Wagenrücklauf-Zeilentransport)

Zusammenfassung

Für die Aktivierung des Previewer Plugins für Farben, sind keine besonderen Maßnahmen notwendig, beim Download muss dieses Plugin mit ausgewählt werden, die .css und die .js Datei werden wie gewohnt eingebunden und der Previewer funktioniert, wenn über Farbattribute gehovert wird. Untestützt werden CSS, Markup Attribute, Less, Sass, Scss und Stylus.

CSS

					div {
						color: rgba(255, 0, 0, 0.2);
						background: purple;
						border: 1px solid hsl(100,70%,40%);
					}
				

Markup Attribute

						<table bgcolor="#6E5494">
						<tr style="background: lightblue;">
				

Less

					@nice-blue: #5B83AD;
					#header a {
						color: hsla(102, 53%, 42%, 0.4);
					}
				

Sass

					$color: blue
					@mixin foobar
						color: rgba(147, 32, 34, 0.8)
					.foo
						color: pink
				

Scss

					$color: blue;
					$attr: background;
					.foo {
						#{$attr}-color: rgba(255,255,0,0.75);
					}
				

Stylus

					color = olive
					.foo
						color: #000
				

Zusammenfassung

Für die Aktivierung das Previewer-Gradient Plugins sind ebenfalls keine besonderen Massnahmen notwendig, es wird mit dem Einbinden des Plugins aktiviert. Beim hovern über Gradient-Anweisungen erscheint eine Vorausschau. Vendor-prefixed gradients are converted to W3C-valid ones, except the old Webkit syntax (-webkit-gradient(linear, ...) and -webkit-gradient(radial, ...)) is not supported. This plugin is compatible with CSS, Less, Sass, Scss and Stylus.

CSS

					/* css */
					div {
						background: -moz-linear-gradient(left,  #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
						background: -webkit-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Chrome10+,Safari5.1+ */
						background: -o-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Opera 11.10+ */
						background: -ms-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* IE10+ */
						background: linear-gradient(to right,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* W3C */
					}
				

Less

					/* Less */
					@gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
					#header a {
						background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
						background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
						background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
						background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
						background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
					}
				

Sass

					/* Sass */
					$gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)
					@mixin foobar
						background: -moz-radial-gradient(center, ellipse cover,  #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%)
						background: radial-gradient(ellipse at center,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%)
				

Scss

					/*   */
					$gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
					$attr: background;
					.foo {
						#{$attr}-image: repeating-linear-gradient(10deg, rgba(255,0,0,0), rgba(255,0,0,1) 10px, rgba(255,0,0,0) 20px);
					}
				

Stylus

					/* Stylus */
					gradient = linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)
					.foo
						background-image: repeating-radial-gradient(circle, rgba(255,0,0,0), rgba(255,0,0,1) 10px, rgba(255,0,0,0) 20px)
				

Zusammenfassung

You don't need to do anything. With this plugin loaded, a previewer will appear on hovering the easing values in code blocks. This plugin is compatible with CSS, Less, Sass, Scss und Stylus.

CSS

					div {
						transition: color 0.3s linear;
					}
				

Less

					@easing: cubic-bezier(0.1,0.3,1,.4);
					#header a {
						transition-timing-function: ease;
					}
				

Sass

					$easing: ease-out
					.foo
						transition: color 0.3s ease-in-out
				

Scss

					$easing: linear;
					$attr: background;
					.foo {
						transition: #{$attr}-color 0.3s cubic-bezier(0.9,0.1,.2,.4);
					}
				

Stylus

					easing = ease-in
					.foo
						transition: color 0.3s ease-out
				

Zusammenfassung

Auch der prism Previewer-Time muß nur eingebunden werden, .css und .js, alles andere geht automatisch. Das Plugin arbeitet zusammen mit CSS, Less, Sass, Scss und Stylus.

CSS

					div {
						transition: color 0.3s linear;
					}
				

Less

					@time: 1s;
					#header a {
						transition: all linear 2s;
					}
				

Sass

					$time: 3s
					@mixin foobar
						transition: all linear 800ms
					.foo
						transition: all linear 0.8s
				

Scss

					$time: 1s;
					.foo {
						transition: all linear 10s
					}
				

Stylus

					time = 3s
					.foo
						transition: all linear 0.5s
				

Zusammenfassung

Es sind keine Massnahmen zur Aktivierung erforderlich. Wenn das Plugin geladen ist, wird der Previewer beim hovern über Winkelangaben aktiviert. Unterstützt werden CSS,Less, Sass, Scss und Stylus.

CSS

					div {
						transform: rotate(10deg);
					}
				

Less

					@angle: 3rad;
					#header a {
						transform: rotate(.4turn)
					}
				

Sass

					$angle: 380grad
					@mixin foobar
						transform: rotate(-120deg)
					.foo
						transform: rotate(18rad)
				

Scss

					$angle: 1.8turn;
					.foo {
						transform: rotate(-3rad)
					}
				

Stylus

					angle = 357deg
					.foo
						transform: rotate(100grad)
				

Zusammenfassung

Prevents custom markup from being dropped out during highlighting. You have nothing to do. With this plugin loaded, all markup inside code will be kept.

The following source code

					<pre><code class="language-css">
					@media <mark>screen</mark> {
						div {
							<mark>text</mark>-decoration: <mark><mark>under</mark>line</mark>;
							back<mark>ground: url</mark>('foo.png');
						}
					}
					</code></pre>
				

would render like this:

				@media screen {
					div {
						text-decoration: underline;
						background: url('foo.png');
					}
				}
				

It also works for inline code: var bar = function () { /* foo */ };