Skip to content

Commit

Permalink
Clean up Previewers' page (#1630)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@RunDevelopment @mAAdhaTTah
RunDevelopment authored and mAAdhaTTah committed Dec 1, 2018
1 parent e2f2fd1 commit b0d1823
Showing 1 changed file with 37 additions and 36 deletions.
73 changes: 37 additions & 36 deletions plugins/previewers/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,19 @@ <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 */
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);
}
.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;
Expand All @@ -69,13 +69,13 @@ <h2>Markup attributes</h2>
&lt;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 {
Expand All @@ -85,7 +85,7 @@ <h2>Less</h2>
.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;
}
Expand All @@ -95,20 +95,20 @@ <h2>Less</h2>
}</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)
.example-angle
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
Expand All @@ -120,32 +120,32 @@ <h2>Sass</h2>
</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 {
transform: rotate(-3rad)
}
$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 {
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%)
<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)
Expand All @@ -166,15 +166,16 @@ <h1>Disabling a previewer</h1>
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>&lt;pre class="language-css" data-previewers="color">&lt;code>div {
/* Only the previewer for colors is enabled */
<pre class="language-markup"><code>&lt;pre class="language-css" data-previewers="color time">&lt;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);
}&lt;/code>&lt;/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. */
Expand All @@ -184,30 +185,30 @@ <h1>Disabling a previewer</h1>

<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>
Expand Down

0 comments on commit b0d1823

Please sign in to comment.