Hash :
28e4b4c6
Author :
Date :
2018-01-16T08:48:08
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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Previewers ▲ Prism plugins</title>
<base href="../.." />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<link rel="stylesheet" href="plugins/previewers/prism-previewers.css" data-noprefix />
<script src="prefixfree.min.js"></script>
<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>Previewers</h2>
<p>Previewers for angles, colors, gradients, easing and time.</p>
</header>
<section class="language-markup">
<h1>How to use</h1>
<p>You don't need to do anything. With this plugin loaded, a previewer will appear on hovering some values in code blocks.
The following previewers are supported:</p>
<ul>
<li><code>angle</code> for angles</li>
<li><code>color</code> for colors</li>
<li><code>gradient</code> for gradients</li>
<li><code>easing</code> for easing functions</li>
<li><code>time</code> for durations</li>
</ul>
<p>This plugin is compatible with CSS, Less, Markup attributes, Sass, Scss and Stylus.</p>
</section>
<section>
<h1>Examples</h1>
<h2>CSS</h2>
<pre class="language-css"><code>.example-gradient {
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 */
}
.example-angle {
transform: rotate(10deg);
}
.example-color {
color: rgba(255, 0, 0, 0.2);
background: purple;
border: 1px solid hsl(100,70%,40%);
}
.example-easing {
transition-timing-function: linear;
}
.example-time {
transition-duration: 3s;
}</code></pre>
<h2>Markup attributes</h2>
<pre class="language-markup"><code><table bgcolor="#6E5494">
<tr style="background: lightblue;"></code></pre>
<h2>Less</h2>
<pre class="language-less"><code>@gradient: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
.example-gradient {
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 */
}
@angle: 3rad;
.example-angle {
transform: rotate(.4turn)
}
@nice-blue: #5B83AD;
.example-color {
color: hsla(102, 53%, 42%, 0.4);
}
@easing: cubic-bezier(0.1,0.3,1,.4);
.example-easing {
transition-timing-function: ease;
}
@time: 1s;
.example-time {
transition-duration: 2s;
}</code></pre>
<h2>Sass</h2>
<pre class="language-sass"><code>$gradient: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)
@mixin example-gradient
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%)
$angle: 380grad
@mixin example-angle
transform: rotate(-120deg)
.example-angle
transform: rotate(18rad)
$color: blue
@mixin example-color
color: rgba(147, 32, 34, 0.8)
.example-color
color: pink
$easing: ease-out
.example-easing
transition-timing-function: ease-in-out
$time: 3s
@mixin example-time
transition-duration: 800ms
.example-time
transition-duration: 0.8s
</code></pre>
<h2>Scss</h2>
<pre class="language-scss"><code>$gradient: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
$attr: background;
.example-gradient {
#{$attr}-image: repeating-linear-gradient(10deg, rgba(255,0,0,0), rgba(255,0,0,1) 10px, rgba(255,0,0,0) 20px);
}
$angle: 1.8turn;
.example-angle {
transform: rotate(-3rad)
}
$color: blue;
.example-color {
#{$attr}-color: rgba(255,255,0,0.75);
}
$easing: linear;
.example-easing {
transition-timing-function: cubic-bezier(0.9,0.1,.2,.4);
}
$time: 1s;
.example-time {
transition-duration: 10s
}</code></pre>
<h2>Stylus</h2>
<pre class="language-stylus"><code>gradient = linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)
.example-gradient
background-image: repeating-radial-gradient(circle, rgba(255,0,0,0), rgba(255,0,0,1) 10px, rgba(255,0,0,0) 20px)
angle = 357deg
.example-angle
transform: rotate(100grad)
color = olive
.example-color
color: #000
easing = ease-in
.example-easing
transition-timing-function: ease-out
time = 3s
.example-time
transition-duration: 0.5s</code></pre>
</section>
<section>
<h1>Disabling a previewer</h1>
<p>All previewers are enabled by default. To enable only a subset of them, a <code>data-previewers</code> attribute
can be added on a code block or any ancestor. Its value should be a space-separated list of previewers
representing the subset.</p>
<p>For example:</p>
<pre class="language-markup"><code><pre class="language-css" data-previewers="color"><code>div {
/* Only the previewer for colors is enabled */
color: red;
/* The previewer for angles is not enabled. */
transform: rotate(10deg);
}</code></pre></code></pre>
<p>will give the following result:</p>
<pre class="language-css" data-previewers="color time"><code>div {
/* Only the previewers color and time are enabled */
color: red;
transition-duration: 1s;
/* The previewer for angles is not enabled. */
transform: rotate(10deg);
}</code></pre>
</section>
<section>
<h1>API</h1>
<p>This plugins provides a constructor that can be accessed through <code>Prism.plugins.Previewer</code>.</p>
<p>Once a previewer has been instantiated, an HTML element is appended to the document body.
This element will appear when specific tokens are hovered.</p>
<h2><code>new Prism.plugins.Previewer(type, updater, supportedLanguages)</code></h2>
<ul>
<li>
<p><code>type</code>: the token type this previewer is associated to.
The previewer will be shown when hovering tokens of this type.</p>
</li>
<li>
<p><code>updater</code>: the function that will be called each time an associated token is hovered.
This function takes the text content of the token as its only parameter.
The previewer HTML element can be accessed through the keyword <code>this</code>.
This function must return <code>true</code> for the previewer to be shown.</p>
</li>
<li>
<p><code>supportedLanguages</code>: an optional array of supported languages.
The previewer will be available only for those.
Defaults to <code>'*'</code>, which means every languages.</p>
</li>
<li>
<p><code>initializer</code>: an optional function.
This function will be called when the previewer is initialized,
right after the HTML element has been appended to the document body.</p>
</li>
</ul>
</section>
<footer data-src="templates/footer.html" data-type="text/html"></footer>
<script src="prism.js"></script>
<script src="components/prism-less.js"></script>
<script src="components/prism-sass.js"></script>
<script src="components/prism-scss.js"></script>
<script src="components/prism-stylus.js"></script>
<script src="plugins/previewers/prism-previewers.js"></script>
<script src="utopia.js"></script>
<script src="components.js"></script>
<script src="code.js"></script>
</body>
</html>