Locally add prismjs
This commit is contained in:
parent
35af792c6a
commit
6aa044cf9b
GPG key ID:
583642324A1D2070
701 changed files with 35787 additions and 0 deletions
243
node_modules/prismjs/plugins/previewers/prism-previewers.css
generated
vendored
Normal file
243
node_modules/prismjs/plugins/previewers/prism-previewers.css
generated
vendored
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
.prism-previewer,
|
||||
.prism-previewer:before,
|
||||
.prism-previewer:after {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.prism-previewer,
|
||||
.prism-previewer:after {
|
||||
left: 50%;
|
||||
}
|
||||
.prism-previewer {
|
||||
margin-top: -48px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: -16px;
|
||||
z-index: 10;
|
||||
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .25s;
|
||||
-o-transition: opacity .25s;
|
||||
transition: opacity .25s;
|
||||
}
|
||||
.prism-previewer.flipped {
|
||||
margin-top: 0;
|
||||
margin-bottom: -48px;
|
||||
}
|
||||
.prism-previewer:before,
|
||||
.prism-previewer:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.prism-previewer:before {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
border-radius: 10px;
|
||||
border: 5px solid #fff;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
.prism-previewer:after {
|
||||
top: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 5px 0 0 -7px;
|
||||
border: 7px solid transparent;
|
||||
border-color: rgba(255, 0, 0, 0);
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.prism-previewer.flipped:after {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
border-top-color: rgba(255, 0, 0, 0);
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.prism-previewer.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.prism-previewer-angle:before {
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
.prism-previewer-angle:after {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.prism-previewer-angle svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.prism-previewer-angle[data-negative] svg {
|
||||
-webkit-transform: scaleX(-1) rotate(-90deg);
|
||||
-moz-transform: scaleX(-1) rotate(-90deg);
|
||||
-ms-transform: scaleX(-1) rotate(-90deg);
|
||||
-o-transform: scaleX(-1) rotate(-90deg);
|
||||
transform: scaleX(-1) rotate(-90deg);
|
||||
}
|
||||
.prism-previewer-angle circle {
|
||||
fill: transparent;
|
||||
stroke: hsl(200, 10%, 20%);
|
||||
stroke-opacity: 0.9;
|
||||
stroke-width: 32;
|
||||
stroke-dasharray: 0, 500;
|
||||
}
|
||||
|
||||
.prism-previewer-gradient {
|
||||
background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
|
||||
background-size: 10px 10px;
|
||||
background-position: 0 0, 5px 5px;
|
||||
|
||||
width: 64px;
|
||||
margin-left: -32px;
|
||||
}
|
||||
.prism-previewer-gradient:before {
|
||||
content: none;
|
||||
}
|
||||
.prism-previewer-gradient div {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
border-radius: 10px;
|
||||
border: 5px solid #fff;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.prism-previewer-color {
|
||||
background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
|
||||
background-size: 10px 10px;
|
||||
background-position: 0 0, 5px 5px;
|
||||
}
|
||||
.prism-previewer-color:before {
|
||||
background-color: inherit;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.prism-previewer-easing {
|
||||
margin-top: -76px;
|
||||
margin-left: -30px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #333;
|
||||
}
|
||||
.prism-previewer-easing.flipped {
|
||||
margin-bottom: -116px;
|
||||
}
|
||||
.prism-previewer-easing svg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.prism-previewer-easing circle {
|
||||
fill: hsl(200, 10%, 20%);
|
||||
stroke: white;
|
||||
}
|
||||
.prism-previewer-easing path {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 4;
|
||||
}
|
||||
.prism-previewer-easing line {
|
||||
stroke: white;
|
||||
stroke-opacity: 0.5;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
@-webkit-keyframes prism-previewer-time {
|
||||
0% {
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 100, 500;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes prism-previewer-time {
|
||||
0% {
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 100, 500;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes prism-previewer-time {
|
||||
0% {
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 100, 500;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes prism-previewer-time {
|
||||
0% {
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 100, 500;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.prism-previewer-time:before {
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
.prism-previewer-time:after {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.prism-previewer-time svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.prism-previewer-time circle {
|
||||
fill: transparent;
|
||||
stroke: hsl(200, 10%, 20%);
|
||||
stroke-opacity: 0.9;
|
||||
stroke-width: 32;
|
||||
stroke-dasharray: 0, 500;
|
||||
stroke-dashoffset: 0;
|
||||
-webkit-animation: prism-previewer-time linear infinite 3s;
|
||||
-moz-animation: prism-previewer-time linear infinite 3s;
|
||||
-o-animation: prism-previewer-time linear infinite 3s;
|
||||
animation: prism-previewer-time linear infinite 3s;
|
||||
}
|
||||
712
node_modules/prismjs/plugins/previewers/prism-previewers.js
generated
vendored
Normal file
712
node_modules/prismjs/plugins/previewers/prism-previewers.js
generated
vendored
Normal file
|
|
@ -0,0 +1,712 @@
|
|||
(function () {
|
||||
|
||||
if (typeof Prism === 'undefined' || typeof document === 'undefined' || !Function.prototype.bind) {
|
||||
return;
|
||||
}
|
||||
|
||||
var previewers = {
|
||||
// gradient must be defined before color and angle
|
||||
'gradient': {
|
||||
create: (function () {
|
||||
|
||||
// Stores already processed gradients so that we don't
|
||||
// make the conversion every time the previewer is shown
|
||||
var cache = {};
|
||||
|
||||
/**
|
||||
* Returns a W3C-valid linear gradient
|
||||
*
|
||||
* @param {string} prefix Vendor prefix if any ("-moz-", "-webkit-", etc.)
|
||||
* @param {string} func Gradient function name ("linear-gradient")
|
||||
* @param {string[]} values Array of the gradient function parameters (["0deg", "red 0%", "blue 100%"])
|
||||
*/
|
||||
var convertToW3CLinearGradient = function (prefix, func, values) {
|
||||
// Default value for angle
|
||||
var angle = '180deg';
|
||||
|
||||
if (/^(?:-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad)|to\b|top|right|bottom|left)/.test(values[0])) {
|
||||
angle = values.shift();
|
||||
if (angle.indexOf('to ') < 0) {
|
||||
// Angle uses old keywords
|
||||
// W3C syntax uses "to" + opposite keywords
|
||||
if (angle.indexOf('top') >= 0) {
|
||||
if (angle.indexOf('left') >= 0) {
|
||||
angle = 'to bottom right';
|
||||
} else if (angle.indexOf('right') >= 0) {
|
||||
angle = 'to bottom left';
|
||||
} else {
|
||||
angle = 'to bottom';
|
||||
}
|
||||
} else if (angle.indexOf('bottom') >= 0) {
|
||||
if (angle.indexOf('left') >= 0) {
|
||||
angle = 'to top right';
|
||||
} else if (angle.indexOf('right') >= 0) {
|
||||
angle = 'to top left';
|
||||
} else {
|
||||
angle = 'to top';
|
||||
}
|
||||
} else if (angle.indexOf('left') >= 0) {
|
||||
angle = 'to right';
|
||||
} else if (angle.indexOf('right') >= 0) {
|
||||
angle = 'to left';
|
||||
} else if (prefix) {
|
||||
// Angle is shifted by 90deg in prefixed gradients
|
||||
if (angle.indexOf('deg') >= 0) {
|
||||
angle = (90 - parseFloat(angle)) + 'deg';
|
||||
} else if (angle.indexOf('rad') >= 0) {
|
||||
angle = (Math.PI / 2 - parseFloat(angle)) + 'rad';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return func + '(' + angle + ',' + values.join(',') + ')';
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a W3C-valid radial gradient
|
||||
*
|
||||
* @param {string} prefix Vendor prefix if any ("-moz-", "-webkit-", etc.)
|
||||
* @param {string} func Gradient function name ("linear-gradient")
|
||||
* @param {string[]} values Array of the gradient function parameters (["0deg", "red 0%", "blue 100%"])
|
||||
*/
|
||||
var convertToW3CRadialGradient = function (prefix, func, values) {
|
||||
if (values[0].indexOf('at') < 0) {
|
||||
// Looks like old syntax
|
||||
|
||||
// Default values
|
||||
var position = 'center';
|
||||
var shape = 'ellipse';
|
||||
var size = 'farthest-corner';
|
||||
|
||||
if (/\b(?:bottom|center|left|right|top)\b|^\d+/.test(values[0])) {
|
||||
// Found a position
|
||||
// Remove angle value, if any
|
||||
position = values.shift().replace(/\s*-?\d+(?:deg|rad)\s*/, '');
|
||||
}
|
||||
if (/\b(?:circle|closest|contain|cover|ellipse|farthest)\b/.test(values[0])) {
|
||||
// Found a shape and/or size
|
||||
var shapeSizeParts = values.shift().split(/\s+/);
|
||||
if (shapeSizeParts[0] && (shapeSizeParts[0] === 'circle' || shapeSizeParts[0] === 'ellipse')) {
|
||||
shape = shapeSizeParts.shift();
|
||||
}
|
||||
if (shapeSizeParts[0]) {
|
||||
size = shapeSizeParts.shift();
|
||||
}
|
||||
|
||||
// Old keywords are converted to their synonyms
|
||||
if (size === 'cover') {
|
||||
size = 'farthest-corner';
|
||||
} else if (size === 'contain') {
|
||||
size = 'clothest-side';
|
||||
}
|
||||
}
|
||||
|
||||
return func + '(' + shape + ' ' + size + ' at ' + position + ',' + values.join(',') + ')';
|
||||
}
|
||||
return func + '(' + values.join(',') + ')';
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a gradient to a W3C-valid one
|
||||
* Does not support old webkit syntax (-webkit-gradient(linear...) and -webkit-gradient(radial...))
|
||||
*
|
||||
* @param {string} gradient The CSS gradient
|
||||
*/
|
||||
var convertToW3CGradient = function (gradient) {
|
||||
if (cache[gradient]) {
|
||||
return cache[gradient];
|
||||
}
|
||||
var parts = gradient.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/);
|
||||
// "", "-moz-", etc.
|
||||
var prefix = parts && parts[1];
|
||||
// "linear-gradient", "radial-gradient", etc.
|
||||
var func = parts && parts[2];
|
||||
|
||||
var values = gradient.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g, '').split(/\s*,\s*/);
|
||||
|
||||
if (func.indexOf('linear') >= 0) {
|
||||
return cache[gradient] = convertToW3CLinearGradient(prefix, func, values);
|
||||
} else if (func.indexOf('radial') >= 0) {
|
||||
return cache[gradient] = convertToW3CRadialGradient(prefix, func, values);
|
||||
}
|
||||
return cache[gradient] = func + '(' + values.join(',') + ')';
|
||||
};
|
||||
|
||||
return function () {
|
||||
new Prism.plugins.Previewer('gradient', function (value) {
|
||||
this.firstChild.style.backgroundImage = '';
|
||||
this.firstChild.style.backgroundImage = convertToW3CGradient(value);
|
||||
return !!this.firstChild.style.backgroundImage;
|
||||
}, '*', function () {
|
||||
this._elt.innerHTML = '<div></div>';
|
||||
});
|
||||
};
|
||||
}()),
|
||||
tokens: {
|
||||
'gradient': {
|
||||
pattern: /(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:hsl|rgb)a?\(.+?\)|[^\)])+\)/gi,
|
||||
inside: {
|
||||
'function': /[\w-]+(?=\()/,
|
||||
'punctuation': /[(),]/
|
||||
}
|
||||
}
|
||||
},
|
||||
languages: {
|
||||
'css': true,
|
||||
'less': true,
|
||||
'sass': [
|
||||
{
|
||||
lang: 'sass',
|
||||
before: 'punctuation',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['variable-line']
|
||||
},
|
||||
{
|
||||
lang: 'sass',
|
||||
before: 'punctuation',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['property-line']
|
||||
}
|
||||
],
|
||||
'scss': true,
|
||||
'stylus': [
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'func',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
|
||||
},
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'func',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
'angle': {
|
||||
create: function () {
|
||||
new Prism.plugins.Previewer('angle', function (value) {
|
||||
var num = parseFloat(value);
|
||||
var unit = value.match(/[a-z]+$/i);
|
||||
var max; var percentage;
|
||||
if (!num || !unit) {
|
||||
return false;
|
||||
}
|
||||
unit = unit[0];
|
||||
|
||||
switch (unit) {
|
||||
case 'deg':
|
||||
max = 360;
|
||||
break;
|
||||
case 'grad':
|
||||
max = 400;
|
||||
break;
|
||||
case 'rad':
|
||||
max = 2 * Math.PI;
|
||||
break;
|
||||
case 'turn':
|
||||
max = 1;
|
||||
}
|
||||
|
||||
percentage = 100 * num / max;
|
||||
percentage %= 100;
|
||||
|
||||
this[(num < 0 ? 'set' : 'remove') + 'Attribute']('data-negative', '');
|
||||
this.querySelector('circle').style.strokeDasharray = Math.abs(percentage) + ',500';
|
||||
return true;
|
||||
}, '*', function () {
|
||||
this._elt.innerHTML = '<svg viewBox="0 0 64 64">' +
|
||||
'<circle r="16" cy="32" cx="32"></circle>' +
|
||||
'</svg>';
|
||||
});
|
||||
},
|
||||
tokens: {
|
||||
'angle': /(?:\b|\B-|(?=\B\.))(?:\d+(?:\.\d+)?|\.\d+)(?:deg|g?rad|turn)\b/i
|
||||
},
|
||||
languages: {
|
||||
'css': true,
|
||||
'less': true,
|
||||
'markup': {
|
||||
lang: 'markup',
|
||||
before: 'punctuation',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value']
|
||||
},
|
||||
'sass': [
|
||||
{
|
||||
lang: 'sass',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['property-line']
|
||||
},
|
||||
{
|
||||
lang: 'sass',
|
||||
before: 'operator',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['variable-line']
|
||||
}
|
||||
],
|
||||
'scss': true,
|
||||
'stylus': [
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'func',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
|
||||
},
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'func',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
'color': {
|
||||
create: function () {
|
||||
new Prism.plugins.Previewer('color', function (value) {
|
||||
this.style.backgroundColor = '';
|
||||
this.style.backgroundColor = value;
|
||||
return !!this.style.backgroundColor;
|
||||
});
|
||||
},
|
||||
tokens: {
|
||||
'color': [Prism.languages.css['hexcode']].concat(Prism.languages.css['color'])
|
||||
},
|
||||
languages: {
|
||||
// CSS extras is required, so css and scss are not necessary
|
||||
'css': false,
|
||||
'less': true,
|
||||
'markup': {
|
||||
lang: 'markup',
|
||||
before: 'punctuation',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value']
|
||||
},
|
||||
'sass': [
|
||||
{
|
||||
lang: 'sass',
|
||||
before: 'punctuation',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['variable-line']
|
||||
},
|
||||
{
|
||||
lang: 'sass',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['property-line']
|
||||
}
|
||||
],
|
||||
'scss': false,
|
||||
'stylus': [
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'hexcode',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
|
||||
},
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'hexcode',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
'easing': {
|
||||
create: function () {
|
||||
new Prism.plugins.Previewer('easing', function (value) {
|
||||
|
||||
value = {
|
||||
'linear': '0,0,1,1',
|
||||
'ease': '.25,.1,.25,1',
|
||||
'ease-in': '.42,0,1,1',
|
||||
'ease-out': '0,0,.58,1',
|
||||
'ease-in-out': '.42,0,.58,1'
|
||||
}[value] || value;
|
||||
|
||||
var p = value.match(/-?(?:\d+(?:\.\d+)?|\.\d+)/g);
|
||||
|
||||
if (p.length === 4) {
|
||||
p = p.map(function (p, i) { return (i % 2 ? 1 - p : p) * 100; });
|
||||
|
||||
this.querySelector('path').setAttribute('d', 'M0,100 C' + p[0] + ',' + p[1] + ', ' + p[2] + ',' + p[3] + ', 100,0');
|
||||
|
||||
var lines = this.querySelectorAll('line');
|
||||
lines[0].setAttribute('x2', p[0]);
|
||||
lines[0].setAttribute('y2', p[1]);
|
||||
lines[1].setAttribute('x2', p[2]);
|
||||
lines[1].setAttribute('y2', p[3]);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}, '*', function () {
|
||||
this._elt.innerHTML = '<svg viewBox="-20 -20 140 140" width="100" height="100">' +
|
||||
'<defs>' +
|
||||
'<marker id="prism-previewer-easing-marker" viewBox="0 0 4 4" refX="2" refY="2" markerUnits="strokeWidth">' +
|
||||
'<circle cx="2" cy="2" r="1.5" />' +
|
||||
'</marker>' +
|
||||
'</defs>' +
|
||||
'<path d="M0,100 C20,50, 40,30, 100,0" />' +
|
||||
'<line x1="0" y1="100" x2="20" y2="50" marker-start="url(#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
|
||||
'<line x1="100" y1="0" x2="40" y2="30" marker-start="url(#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
|
||||
'</svg>';
|
||||
});
|
||||
},
|
||||
tokens: {
|
||||
'easing': {
|
||||
pattern: /\bcubic-bezier\((?:-?(?:\d+(?:\.\d+)?|\.\d+),\s*){3}-?(?:\d+(?:\.\d+)?|\.\d+)\)\B|\b(?:ease(?:-in)?(?:-out)?|linear)(?=\s|[;}]|$)/i,
|
||||
inside: {
|
||||
'function': /[\w-]+(?=\()/,
|
||||
'punctuation': /[(),]/
|
||||
}
|
||||
}
|
||||
},
|
||||
languages: {
|
||||
'css': true,
|
||||
'less': true,
|
||||
'sass': [
|
||||
{
|
||||
lang: 'sass',
|
||||
inside: 'inside',
|
||||
before: 'punctuation',
|
||||
root: Prism.languages.sass && Prism.languages.sass['variable-line']
|
||||
},
|
||||
{
|
||||
lang: 'sass',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['property-line']
|
||||
}
|
||||
],
|
||||
'scss': true,
|
||||
'stylus': [
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'hexcode',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
|
||||
},
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'hexcode',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
'time': {
|
||||
create: function () {
|
||||
new Prism.plugins.Previewer('time', function (value) {
|
||||
var num = parseFloat(value);
|
||||
var unit = value.match(/[a-z]+$/i);
|
||||
if (!num || !unit) {
|
||||
return false;
|
||||
}
|
||||
unit = unit[0];
|
||||
this.querySelector('circle').style.animationDuration = 2 * num + unit;
|
||||
return true;
|
||||
}, '*', function () {
|
||||
this._elt.innerHTML = '<svg viewBox="0 0 64 64">' +
|
||||
'<circle r="16" cy="32" cx="32"></circle>' +
|
||||
'</svg>';
|
||||
});
|
||||
},
|
||||
tokens: {
|
||||
'time': /(?:\b|\B-|(?=\B\.))(?:\d+(?:\.\d+)?|\.\d+)m?s\b/i
|
||||
},
|
||||
languages: {
|
||||
'css': true,
|
||||
'less': true,
|
||||
'markup': {
|
||||
lang: 'markup',
|
||||
before: 'punctuation',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value']
|
||||
},
|
||||
'sass': [
|
||||
{
|
||||
lang: 'sass',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['property-line']
|
||||
},
|
||||
{
|
||||
lang: 'sass',
|
||||
before: 'operator',
|
||||
inside: 'inside',
|
||||
root: Prism.languages.sass && Prism.languages.sass['variable-line']
|
||||
}
|
||||
],
|
||||
'scss': true,
|
||||
'stylus': [
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'hexcode',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
|
||||
},
|
||||
{
|
||||
lang: 'stylus',
|
||||
before: 'hexcode',
|
||||
inside: 'rest',
|
||||
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the absolute X, Y offsets for an element
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @returns {{top: number, right: number, bottom: number, left: number, width: number, height: number}}
|
||||
*/
|
||||
var getOffset = function (element) {
|
||||
var elementBounds = element.getBoundingClientRect();
|
||||
var left = elementBounds.left;
|
||||
var top = elementBounds.top;
|
||||
var documentBounds = document.documentElement.getBoundingClientRect();
|
||||
left -= documentBounds.left;
|
||||
top -= documentBounds.top;
|
||||
|
||||
return {
|
||||
top: top,
|
||||
right: innerWidth - left - elementBounds.width,
|
||||
bottom: innerHeight - top - elementBounds.height,
|
||||
left: left,
|
||||
width: elementBounds.width,
|
||||
height: elementBounds.height
|
||||
};
|
||||
};
|
||||
|
||||
var TOKEN_CLASS = 'token';
|
||||
var ACTIVE_CLASS = 'active';
|
||||
var FLIPPED_CLASS = 'flipped';
|
||||
|
||||
/**
|
||||
* Previewer constructor
|
||||
*
|
||||
* @param {string} type Unique previewer type
|
||||
* @param {Function} updater Function that will be called on mouseover.
|
||||
* @param {string[]|string} [supportedLanguages] Aliases of the languages this previewer must be enabled for. Defaults to "*", all languages.
|
||||
* @param {Function} [initializer] Function that will be called on initialization.
|
||||
* @class
|
||||
*/
|
||||
var Previewer = function (type, updater, supportedLanguages, initializer) {
|
||||
this._elt = null;
|
||||
this._type = type;
|
||||
this._token = null;
|
||||
this.updater = updater;
|
||||
this._mouseout = this.mouseout.bind(this);
|
||||
this.initializer = initializer;
|
||||
|
||||
var self = this;
|
||||
|
||||
if (!supportedLanguages) {
|
||||
supportedLanguages = ['*'];
|
||||
}
|
||||
if (!Array.isArray(supportedLanguages)) {
|
||||
supportedLanguages = [supportedLanguages];
|
||||
}
|
||||
supportedLanguages.forEach(function (lang) {
|
||||
if (typeof lang !== 'string') {
|
||||
lang = lang.lang;
|
||||
}
|
||||
if (!Previewer.byLanguages[lang]) {
|
||||
Previewer.byLanguages[lang] = [];
|
||||
}
|
||||
if (Previewer.byLanguages[lang].indexOf(self) < 0) {
|
||||
Previewer.byLanguages[lang].push(self);
|
||||
}
|
||||
});
|
||||
Previewer.byType[type] = this;
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates the HTML element for the previewer.
|
||||
*/
|
||||
Previewer.prototype.init = function () {
|
||||
if (this._elt) {
|
||||
return;
|
||||
}
|
||||
this._elt = document.createElement('div');
|
||||
this._elt.className = 'prism-previewer prism-previewer-' + this._type;
|
||||
document.body.appendChild(this._elt);
|
||||
if (this.initializer) {
|
||||
this.initializer();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Element} token
|
||||
* @returns {boolean}
|
||||
*/
|
||||
Previewer.prototype.isDisabled = function (token) {
|
||||
do {
|
||||
if (token.hasAttribute && token.hasAttribute('data-previewers')) {
|
||||
var previewers = token.getAttribute('data-previewers');
|
||||
return (previewers || '').split(/\s+/).indexOf(this._type) === -1;
|
||||
}
|
||||
} while ((token = token.parentNode));
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks the class name of each hovered element
|
||||
*
|
||||
* @param {Element} token
|
||||
*/
|
||||
Previewer.prototype.check = function (token) {
|
||||
if (token.classList.contains(TOKEN_CLASS) && this.isDisabled(token)) {
|
||||
return;
|
||||
}
|
||||
do {
|
||||
if (token.classList && token.classList.contains(TOKEN_CLASS) && token.classList.contains(this._type)) {
|
||||
break;
|
||||
}
|
||||
} while ((token = token.parentNode));
|
||||
|
||||
if (token && token !== this._token) {
|
||||
this._token = token;
|
||||
this.show();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Called on mouseout
|
||||
*/
|
||||
Previewer.prototype.mouseout = function () {
|
||||
this._token.removeEventListener('mouseout', this._mouseout, false);
|
||||
this._token = null;
|
||||
this.hide();
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows the previewer positioned properly for the current token.
|
||||
*/
|
||||
Previewer.prototype.show = function () {
|
||||
if (!this._elt) {
|
||||
this.init();
|
||||
}
|
||||
if (!this._token) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.updater.call(this._elt, this._token.textContent)) {
|
||||
this._token.addEventListener('mouseout', this._mouseout, false);
|
||||
|
||||
var offset = getOffset(this._token);
|
||||
this._elt.classList.add(ACTIVE_CLASS);
|
||||
|
||||
if (offset.top - this._elt.offsetHeight > 0) {
|
||||
this._elt.classList.remove(FLIPPED_CLASS);
|
||||
this._elt.style.top = offset.top + 'px';
|
||||
this._elt.style.bottom = '';
|
||||
} else {
|
||||
this._elt.classList.add(FLIPPED_CLASS);
|
||||
this._elt.style.bottom = offset.bottom + 'px';
|
||||
this._elt.style.top = '';
|
||||
}
|
||||
|
||||
this._elt.style.left = offset.left + Math.min(200, offset.width / 2) + 'px';
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Hides the previewer.
|
||||
*/
|
||||
Previewer.prototype.hide = function () {
|
||||
this._elt.classList.remove(ACTIVE_CLASS);
|
||||
};
|
||||
|
||||
/**
|
||||
* Map of all registered previewers by language
|
||||
*
|
||||
* @type {{}}
|
||||
*/
|
||||
Previewer.byLanguages = {};
|
||||
|
||||
/**
|
||||
* Map of all registered previewers by type
|
||||
*
|
||||
* @type {{}}
|
||||
*/
|
||||
Previewer.byType = {};
|
||||
|
||||
/**
|
||||
* Initializes the mouseover event on the code block.
|
||||
*
|
||||
* @param {HTMLElement} elt The code block (env.element)
|
||||
* @param {string} lang The language (env.language)
|
||||
*/
|
||||
Previewer.initEvents = function (elt, lang) {
|
||||
var previewers = [];
|
||||
if (Previewer.byLanguages[lang]) {
|
||||
previewers = previewers.concat(Previewer.byLanguages[lang]);
|
||||
}
|
||||
if (Previewer.byLanguages['*']) {
|
||||
previewers = previewers.concat(Previewer.byLanguages['*']);
|
||||
}
|
||||
elt.addEventListener('mouseover', function (e) {
|
||||
var target = e.target;
|
||||
previewers.forEach(function (previewer) {
|
||||
previewer.check(target);
|
||||
});
|
||||
}, false);
|
||||
};
|
||||
Prism.plugins.Previewer = Previewer;
|
||||
|
||||
Prism.hooks.add('before-highlight', function (env) {
|
||||
for (var previewer in previewers) {
|
||||
var languages = previewers[previewer].languages;
|
||||
if (env.language && languages[env.language] && !languages[env.language].initialized) {
|
||||
var lang = languages[env.language];
|
||||
if (!Array.isArray(lang)) {
|
||||
lang = [lang];
|
||||
}
|
||||
lang.forEach(function (lang) {
|
||||
var before; var inside; var root; var skip;
|
||||
if (lang === true) {
|
||||
before = 'important';
|
||||
inside = env.language;
|
||||
lang = env.language;
|
||||
} else {
|
||||
before = lang.before || 'important';
|
||||
inside = lang.inside || lang.lang;
|
||||
root = lang.root || Prism.languages;
|
||||
skip = lang.skip;
|
||||
lang = env.language;
|
||||
}
|
||||
|
||||
if (!skip && Prism.languages[lang]) {
|
||||
Prism.languages.insertBefore(inside, before, previewers[previewer].tokens, root);
|
||||
env.grammar = Prism.languages[lang];
|
||||
|
||||
languages[env.language] = { initialized: true };
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize the previewers only when needed
|
||||
Prism.hooks.add('after-highlight', function (env) {
|
||||
if (Previewer.byLanguages['*'] || Previewer.byLanguages[env.language]) {
|
||||
Previewer.initEvents(env.element, env.language);
|
||||
}
|
||||
});
|
||||
|
||||
for (var previewer in previewers) {
|
||||
previewers[previewer].create();
|
||||
}
|
||||
|
||||
}());
|
||||
1
node_modules/prismjs/plugins/previewers/prism-previewers.min.css
generated
vendored
Normal file
1
node_modules/prismjs/plugins/previewers/prism-previewers.min.css
generated
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.prism-previewer,.prism-previewer:after,.prism-previewer:before{position:absolute;pointer-events:none}.prism-previewer,.prism-previewer:after{left:50%}.prism-previewer{margin-top:-48px;width:32px;height:32px;margin-left:-16px;z-index:10;opacity:0;-webkit-transition:opacity .25s;-o-transition:opacity .25s;transition:opacity .25s}.prism-previewer.flipped{margin-top:0;margin-bottom:-48px}.prism-previewer:after,.prism-previewer:before{content:'';position:absolute;pointer-events:none}.prism-previewer:before{top:-5px;right:-5px;left:-5px;bottom:-5px;border-radius:10px;border:5px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.5) inset,0 0 10px rgba(0,0,0,.75)}.prism-previewer:after{top:100%;width:0;height:0;margin:5px 0 0 -7px;border:7px solid transparent;border-color:rgba(255,0,0,0);border-top-color:#fff}.prism-previewer.flipped:after{top:auto;bottom:100%;margin-top:0;margin-bottom:5px;border-top-color:rgba(255,0,0,0);border-bottom-color:#fff}.prism-previewer.active{opacity:1}.prism-previewer-angle:before{border-radius:50%;background:#fff}.prism-previewer-angle:after{margin-top:4px}.prism-previewer-angle svg{width:32px;height:32px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.prism-previewer-angle[data-negative] svg{-webkit-transform:scaleX(-1) rotate(-90deg);-moz-transform:scaleX(-1) rotate(-90deg);-ms-transform:scaleX(-1) rotate(-90deg);-o-transform:scaleX(-1) rotate(-90deg);transform:scaleX(-1) rotate(-90deg)}.prism-previewer-angle circle{fill:transparent;stroke:#2d3438;stroke-opacity:.9;stroke-width:32;stroke-dasharray:0,500}.prism-previewer-gradient{background-image:linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%,#bbb),linear-gradient(45deg,#bbb 25%,#eee 25%,#eee 75%,#bbb 75%,#bbb);background-size:10px 10px;background-position:0 0,5px 5px;width:64px;margin-left:-32px}.prism-previewer-gradient:before{content:none}.prism-previewer-gradient div{position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border-radius:10px;border:5px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.5) inset,0 0 10px rgba(0,0,0,.75)}.prism-previewer-color{background-image:linear-gradient(45deg,#bbb 25%,transparent 25%,transparent 75%,#bbb 75%,#bbb),linear-gradient(45deg,#bbb 25%,#eee 25%,#eee 75%,#bbb 75%,#bbb);background-size:10px 10px;background-position:0 0,5px 5px}.prism-previewer-color:before{background-color:inherit;background-clip:padding-box}.prism-previewer-easing{margin-top:-76px;margin-left:-30px;width:60px;height:60px;background:#333}.prism-previewer-easing.flipped{margin-bottom:-116px}.prism-previewer-easing svg{width:60px;height:60px}.prism-previewer-easing circle{fill:#2d3438;stroke:#fff}.prism-previewer-easing path{fill:none;stroke:#fff;stroke-linecap:round;stroke-width:4}.prism-previewer-easing line{stroke:#fff;stroke-opacity:.5;stroke-width:2}@-webkit-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@-o-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@-moz-keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}@keyframes prism-previewer-time{0%{stroke-dasharray:0,500;stroke-dashoffset:0}50%{stroke-dasharray:100,500;stroke-dashoffset:0}100%{stroke-dasharray:0,500;stroke-dashoffset:-100}}.prism-previewer-time:before{border-radius:50%;background:#fff}.prism-previewer-time:after{margin-top:4px}.prism-previewer-time svg{width:32px;height:32px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.prism-previewer-time circle{fill:transparent;stroke:#2d3438;stroke-opacity:.9;stroke-width:32;stroke-dasharray:0,500;stroke-dashoffset:0;-webkit-animation:prism-previewer-time linear infinite 3s;-moz-animation:prism-previewer-time linear infinite 3s;-o-animation:prism-previewer-time linear infinite 3s;animation:prism-previewer-time linear infinite 3s}
|
||||
1
node_modules/prismjs/plugins/previewers/prism-previewers.min.js
generated
vendored
Normal file
1
node_modules/prismjs/plugins/previewers/prism-previewers.min.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue