Jörg Marzinzick

Im Entenpfuhl 3
34630 Gilserberg
Handy: 0152 2752 4177
E-Mail: j.marzinzick@googlemail.com
joerg-marzinzick.de
html5 und css3 spielereien
Im Entenpfuhl 3 34630 Gilserberg
Prev 1. 1 ... ... 2 3 4 5 6 7 7. Next >>

Tutorial

Plugins - Übersicht

Nach intensiver Beschäftigung mit prism habe ich mich entschlossen, auf dieser Seite die verfügbaren Plugins nochmals detaillierter und nacheinander vorzustellen, da sie sehr sinnvolle Ergänzungen zu den Grundfunktionen darstellen.

  1. Line Highlight
  2. Line Numbers
  3. Show Invisibles
  4. Autolinker
  5. WebPlatform Docs
  6. File Highlight
  7. Show Language
  8. JSONP Highlight
  9. Highlight Keywords
  10. Remove initial line feed
  11. Previewer: Base
  12. Previewer: Color
  13. Previewer: Gradient
  14. Previewer: Easing
  15. Previewer: Time
  16. Previewer: Angle
  17. Autoloader
  18. Keep Markup
  19. Command Line
  20. Unescaped Markup
  21. Normalize Whitespace
  22. Data-URI Highlight

Line Highlight

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

Line Numbers

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>
					
				

Show Invilibles

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

Autolinker

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>
				

WebPlatform Docs

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 ::)

File Highlight

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>
					
				

Show Language

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.

					
					
				

JSONP Highlight

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

Highlight

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

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)

Previewer:

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
				

Previewer:

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)
				

Previewer:

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
				

Previewer:

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
				

Previewer:

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)
				

Autoloader

Zusammenfassung

Autoloader

Code des Plugins

Keep markup

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 */ };

Command Line

Zusammenfassung

Das Plugin Command-Line ist für Codeblöcke <pre><code></code></pre> vorgesehen und nicht für Inline - Code. Füge dem <pre> Element die Klasse command-line hinzu, spezifiziere den user und host mit den Attributen data-user und data-host
Add class command-line to your pre. For a server command line, specify the user and host names using the data-user and data-host attributes. The resulting prompt displays a # for the root user and $ for all other users. For any other command line, such as a Windows prompt, you may specify the entire prompt using the data-prompt attribute.
Optional: You may specify the lines to be presented as output (no prompt) through the data-output attribute on the pre element in the following simple format:
A single number refers to the line with that number Ranges are denoted by two numbers, separated with a hyphen (-) Multiple line numbers or ranges are separated by commas. Whitespace is allowed anywhere and will be stripped off.

Windows PowerShell mit Ausgabe

dir
    Directory: C:\Chris

Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Favorites
d-r--        10/14/2015   5:06 PM            Links
d-r--        10/14/2015   5:06 PM            Music
d-r--        10/14/2015   5:06 PM            Pictures
d-r--        10/14/2015   5:06 PM            Saved Games
d-r--        10/14/2015   5:06 PM            Searches
d-r--        10/14/2015   5:06 PM            Videos

Unescaped Markup

An dieser Stelle werden verschiedene Methoden vorgestellt, die das "escapen" der führenden spitzen Klammern beim Markup unnötig machen, wobei das allerdings nicht sonderlich aufwendig ist.

  • Einhüllen in ein <script type="text/plain"></script>Tag.
  • Einhüllen in einen html Kommentar
        <pre><code><!--<p>Example</p>--></pre></code>

Normalize Whitespaces

Zusammenfassung

Normalize Whitespaces

Code des Plugins Normalize Whitespaces

Data URI Highlight

Zusammenfassung

Data URI Highlight

Code des Plugins Data URI Highlight
Prev 1. 1 ... ... 2 3 4 5 6 7 7. Next >>