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.
- Line Highlight
- Line Numbers
- Show Invisibles
- Autolinker
- WebPlatform Docs
- File Highlight
- Show Language
- JSONP Highlight
- Highlight Keywords
- Remove initial line feed
- Previewer: Base
- Previewer: Color
- Previewer: Gradient
- Previewer: Easing
- Previewer: Time
- Previewer: Angle
- Autoloader
- Keep Markup
- Command Line
- Unescaped Markup
- Normalize Whitespace
- 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