Commit b0d1823cfeef114eb068822cf03c5be3ce18928a
2018-12-01T21:24:31
Clean up Previewers' page (#1630) This PR makes some changes to the [Previewers plugin's page](https://prismjs.com/plugins/previewers/). 1. Format the code examples to look nicer. 2. Fix the example of the 'Disabling a previewer' section. 3. Highlight API snippets as JavaScript.
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
diff --git a/plugins/previewers/index.html b/plugins/previewers/index.html
index 539ef98..55370a3 100644
--- a/plugins/previewers/index.html
+++ b/plugins/previewers/index.html
@@ -43,11 +43,11 @@
<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 */
+ background: -webkit-linear-gradient(left, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
+ background: -moz-linear-gradient(left, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
+ background: -ms-linear-gradient(left, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
+ background: -o-linear-gradient(left, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
+ background: linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
}
.example-angle {
transform: rotate(10deg);
@@ -55,7 +55,7 @@
.example-color {
color: rgba(255, 0, 0, 0.2);
background: purple;
- border: 1px solid hsl(100,70%,40%);
+ border: 1px solid hsl(100, 70%, 40%);
}
.example-easing {
transition-timing-function: linear;
@@ -69,13 +69,13 @@
<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%);
+ <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 */
+ background: -webkit-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* Chrome10+, Safari5.1+ */
+ background: -moz-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
+ background: -ms-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* IE10+ */
+ background: -o-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* Opera 11.10+ */
+ background: linear-gradient(135deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* W3C */
}
@angle: 3rad;
.example-angle {
@@ -85,7 +85,7 @@
.example-color {
color: hsla(102, 53%, 42%, 0.4);
}
-@easing: cubic-bezier(0.1,0.3,1,.4);
+@easing: cubic-bezier(0.1, 0.3, 1, .4);
.example-easing {
transition-timing-function: ease;
}
@@ -95,10 +95,10 @@
}</code></pre>
<h2>Sass</h2>
- <pre class="language-sass"><code>$gradient: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)
+ <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%)
+ 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)
@@ -106,9 +106,9 @@ $angle: 380grad
transform: rotate(18rad)
$color: blue
@mixin example-color
- color: rgba(147, 32, 34, 0.8)
+ color: rgba(147, 32, 34, 0.8)
.example-color
- color: pink
+ color: pink
$easing: ease-out
.example-easing
transition-timing-function: ease-in-out
@@ -120,10 +120,10 @@ $time: 3s
</code></pre>
<h2>Scss</h2>
- <pre class="language-scss"><code>$gradient: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
+ <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);
+ #{$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 {
@@ -131,11 +131,11 @@ $angle: 1.8turn;
}
$color: blue;
.example-color {
- #{$attr}-color: rgba(255,255,0,0.75);
+ #{$attr}-color: rgba(255, 255, 0, 0.75);
}
$easing: linear;
.example-easing {
- transition-timing-function: cubic-bezier(0.9,0.1,.2,.4);
+ transition-timing-function: cubic-bezier(0.9, 0.1, .2, .4);
}
$time: 1s;
.example-time {
@@ -143,9 +143,9 @@ $time: 1s;
}</code></pre>
<h2>Stylus</h2>
- <pre class="language-stylus"><code>gradient = linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)
+ <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)
+ 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)
@@ -166,15 +166,16 @@ time = 3s
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 */
+ <pre class="language-markup"><code><pre class="language-css" data-previewers="color time"><code>div {
+ /* Only the previewer for color and time are enabled */
color: red;
+ transition-duration: 1s;
/* 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 */
+ /* Only the previewers for color and time are enabled */
color: red;
transition-duration: 1s;
/* The previewer for angles is not enabled. */
@@ -184,30 +185,30 @@ time = 3s
<section>
<h1>API</h1>
- <p>This plugins provides a constructor that can be accessed through <code>Prism.plugins.Previewer</code>.</p>
+ <p>This plugins provides a constructor that can be accessed through <code class="language-javascript">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>
+ <h2><code class="language-javascript">new Prism.plugins.Previewer(type, updater, supportedLanguages)</code></h2>
<ul>
<li>
- <p><code>type</code>: the token type this previewer is associated to.
+ <p><code class="language-javascript">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.
+ <p><code class="language-javascript">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>
+ The previewer HTML element can be accessed through the keyword <code class="language-javascript">this</code>.
+ This function must return <code class="language-javascript">true</code> for the previewer to be shown.</p>
</li>
<li>
- <p><code>supportedLanguages</code>: an optional array of supported languages.
+ <p><code class="language-javascript">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>
+ Defaults to <code class="language-javascript">'*'</code>, which means every languages.</p>
</li>
<li>
- <p><code>initializer</code>: an optional function.
+ <p><code class="language-javascript">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>