From 1ebac75ad28318779a42627363770f04a49b3346 Mon Sep 17 00:00:00 2001 From: Golmote Date: Wed, 30 Sep 2015 08:54:44 +0200 Subject: [PATCH 1/3] Plugin: gradient previewer --- components.js | 5 + .../previewer-base/prism-previewer-base.js | 12 +- .../prism-previewer-base.min.js | 2 +- plugins/previewer-gradient/index.html | 90 ++++++++ .../prism-previewer-gradient.css | 27 +++ .../prism-previewer-gradient.js | 205 ++++++++++++++++++ .../prism-previewer-gradient.min.js | 1 + 7 files changed, 337 insertions(+), 5 deletions(-) create mode 100644 plugins/previewer-gradient/index.html create mode 100644 plugins/previewer-gradient/prism-previewer-gradient.css create mode 100644 plugins/previewer-gradient/prism-previewer-gradient.js create mode 100644 plugins/previewer-gradient/prism-previewer-gradient.min.js diff --git a/components.js b/components.js index 39e5bdc337..d9526ed740 100644 --- a/components.js +++ b/components.js @@ -519,6 +519,11 @@ var components = { "require": "previewer-base", "owner": "Golmote" }, + "previewer-gradient": { + "title": "Previewer: Gradient", + "require": "previewer-base", + "owner": "Golmote" + }, "previewer-easing": { "title": "Previewer: Easing", "require": "previewer-base", diff --git a/plugins/previewer-base/prism-previewer-base.js b/plugins/previewer-base/prism-previewer-base.js index 570739f409..a735205af4 100644 --- a/plugins/previewer-base/prism-previewer-base.js +++ b/plugins/previewer-base/prism-previewer-base.js @@ -95,11 +95,15 @@ * @param token */ Previewer.prototype.check = function (token) { - if (tokenRegexp.test(token.className) && this._clsRegexp.test(token.className)) { - if (token !== this._token) { - this._token = token; - this.show(); + do { + if (tokenRegexp.test(token.className) && this._clsRegexp.test(token.className)) { + break; } + } while(token = token.parentNode); + + if (token && token !== this._token) { + this._token = token; + this.show(); } }; diff --git a/plugins/previewer-base/prism-previewer-base.min.js b/plugins/previewer-base/prism-previewer-base.min.js index 82bdc180af..830a5a35a8 100644 --- a/plugins/previewer-base/prism-previewer-base.min.js +++ b/plugins/previewer-base/prism-previewer-base.min.js @@ -1 +1 @@ -!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=function(t){var e=0,s=0,i=t;if(i.parentNode){do e+=i.offsetLeft,s+=i.offsetTop;while((i=i.offsetParent)&&i.nodeType<9);i=t;do e-=i.scrollLeft,s-=i.scrollTop;while((i=i.parentNode)&&!/body/i.test(i.nodeName))}return{top:s,right:innerWidth-e-t.offsetWidth,bottom:innerHeight-s-t.offsetHeight,left:e}},e=/(?:^|\s)token(?=$|\s)/,s=/(?:^|\s)active(?=$|\s)/g,i=/(?:^|\s)flipped(?=$|\s)/g,o=function(t,e,s,i){this._elt=null,this._type=t,this._clsRegexp=RegExp("(?:^|\\s)"+t+"(?=$|\\s)"),this._token=null,this.updater=e,this._mouseout=this.mouseout.bind(this),this.initializer=i;var n=this;s||(s=["*"]),"Array"!==Prism.util.type(s)&&(s=[s]),s.forEach(function(t){"string"!=typeof t&&(t=t.lang),o.byLanguages[t]||(o.byLanguages[t]=[]),o.byLanguages[t].indexOf(n)<0&&o.byLanguages[t].push(n)})};o.prototype.init=function(){this._elt||(this._elt=document.createElement("div"),this._elt.className="prism-previewer prism-previewer-"+this._type,document.body.appendChild(this._elt),this.initializer&&this.initializer())},o.prototype.check=function(t){e.test(t.className)&&this._clsRegexp.test(t.className)&&t!==this._token&&(this._token=t,this.show())},o.prototype.mouseout=function(){this._token.removeEventListener("mouseout",this._mouseout,!1),this._token=null,this.hide()},o.prototype.show=function(){if(this._elt||this.init(),this._token)if(this.updater.call(this._elt,this._token.textContent)){this._token.addEventListener("mouseout",this._mouseout,!1);var e=t(this._token);this._elt.className+=" active",e.top-this._elt.offsetHeight>0?(this._elt.className=this._elt.className.replace(i,""),this._elt.style.top=e.top+"px",this._elt.style.bottom=""):(this._elt.className+=" flipped",this._elt.style.bottom=e.bottom+"px",this._elt.style.top=""),this._elt.style.left=e.left+Math.min(200,this._token.offsetWidth/2)+"px"}else this.hide()},o.prototype.hide=function(){this._elt.className=this._elt.className.replace(s,"")},o.byLanguages={},o.initEvents=function(t,e){var s=[];o.byLanguages[e]&&(s=s.concat(o.byLanguages[e])),o.byLanguages["*"]&&(s=s.concat(o.byLanguages["*"])),t.addEventListener("mouseover",function(t){var e=t.target;s.forEach(function(t){t.check(e)})},!1)},Prism.plugins.Previewer=o,Prism.hooks.add("after-highlight",function(t){(o.byLanguages["*"]||o.byLanguages[t.language])&&o.initEvents(t.element,t.language)})}}(); \ No newline at end of file +!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=function(t){var e=0,s=0,i=t;if(i.parentNode){do e+=i.offsetLeft,s+=i.offsetTop;while((i=i.offsetParent)&&i.nodeType<9);i=t;do e-=i.scrollLeft,s-=i.scrollTop;while((i=i.parentNode)&&!/body/i.test(i.nodeName))}return{top:s,right:innerWidth-e-t.offsetWidth,bottom:innerHeight-s-t.offsetHeight,left:e}},e=/(?:^|\s)token(?=$|\s)/,s=/(?:^|\s)active(?=$|\s)/g,i=/(?:^|\s)flipped(?=$|\s)/g,o=function(t,e,s,i){this._elt=null,this._type=t,this._clsRegexp=RegExp("(?:^|\\s)"+t+"(?=$|\\s)"),this._token=null,this.updater=e,this._mouseout=this.mouseout.bind(this),this.initializer=i;var n=this;s||(s=["*"]),"Array"!==Prism.util.type(s)&&(s=[s]),s.forEach(function(t){"string"!=typeof t&&(t=t.lang),o.byLanguages[t]||(o.byLanguages[t]=[]),o.byLanguages[t].indexOf(n)<0&&o.byLanguages[t].push(n)})};o.prototype.init=function(){this._elt||(this._elt=document.createElement("div"),this._elt.className="prism-previewer prism-previewer-"+this._type,document.body.appendChild(this._elt),this.initializer&&this.initializer())},o.prototype.check=function(t){do if(e.test(t.className)&&this._clsRegexp.test(t.className))break;while(t=t.parentNode);t&&t!==this._token&&(this._token=t,this.show())},o.prototype.mouseout=function(){this._token.removeEventListener("mouseout",this._mouseout,!1),this._token=null,this.hide()},o.prototype.show=function(){if(this._elt||this.init(),this._token)if(this.updater.call(this._elt,this._token.textContent)){this._token.addEventListener("mouseout",this._mouseout,!1);var e=t(this._token);this._elt.className+=" active",e.top-this._elt.offsetHeight>0?(this._elt.className=this._elt.className.replace(i,""),this._elt.style.top=e.top+"px",this._elt.style.bottom=""):(this._elt.className+=" flipped",this._elt.style.bottom=e.bottom+"px",this._elt.style.top=""),this._elt.style.left=e.left+Math.min(200,this._token.offsetWidth/2)+"px"}else this.hide()},o.prototype.hide=function(){this._elt.className=this._elt.className.replace(s,"")},o.byLanguages={},o.initEvents=function(t,e){var s=[];o.byLanguages[e]&&(s=s.concat(o.byLanguages[e])),o.byLanguages["*"]&&(s=s.concat(o.byLanguages["*"])),t.addEventListener("mouseover",function(t){var e=t.target;s.forEach(function(t){t.check(e)})},!1)},Prism.plugins.Previewer=o,Prism.hooks.add("after-highlight",function(t){(o.byLanguages["*"]||o.byLanguages[t.language])&&o.initEvents(t.element,t.language)})}}(); \ No newline at end of file diff --git a/plugins/previewer-gradient/index.html b/plugins/previewer-gradient/index.html new file mode 100644 index 0000000000..e783ca8963 --- /dev/null +++ b/plugins/previewer-gradient/index.html @@ -0,0 +1,90 @@ + + + + + + + Previewer: Gradient ▲ Prism plugins + + + + + + + + + + + + +
+
+ +

Previewer: Gradient

+

Previewer for CSS gradients.

+
+ +
+

How to use

+ +

You don't need to do anything. With this plugin loaded, a previewer will appear on hovering the gradient values in code blocks.

+

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.

+
+ +
+

Examples

+ +

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

+ 
#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

+ 
@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

+ 
$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

+ 
.foo
+	background-image: repeating-radial-gradient(circle, rgba(255,0,0,0), rgba(255,0,0,1) 10px, rgba(255,0,0,0) 20px)
+
+ +
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/plugins/previewer-gradient/prism-previewer-gradient.css b/plugins/previewer-gradient/prism-previewer-gradient.css new file mode 100644 index 0000000000..6152a6ef41 --- /dev/null +++ b/plugins/previewer-gradient/prism-previewer-gradient.css @@ -0,0 +1,27 @@ +.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; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + border: 5px solid #fff; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); + -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); + -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75); +} \ No newline at end of file diff --git a/plugins/previewer-gradient/prism-previewer-gradient.js b/plugins/previewer-gradient/prism-previewer-gradient.js new file mode 100644 index 0000000000..089ebc772e --- /dev/null +++ b/plugins/previewer-gradient/prism-previewer-gradient.js @@ -0,0 +1,205 @@ +(function() { + + if ( + typeof self !== 'undefined' && !self.Prism || + typeof global !== 'undefined' && !global.Prism + ) { + return; + } + + var languages = { + 'css': true, + 'less': true, + 'sass': { + 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: 'hexcode', + inside: 'rest', + root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside + } + ] + }; + + // 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+(?: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 (/\bcenter|top|right|bottom|left\b|^\d+/.test(values[0])) { + // Found a position + // Remove angle value, if any + position = values.shift().replace(/\s*-?\d+(?:rad|deg)\s*/, ''); + } + if (/\bcircle|ellipse|closest|farthest|contain|cover\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(',') + ')'; + }; + + Prism.hooks.add('before-highlight', function (env) { + if (env.language && languages[env.language] && !languages[env.language].initialized) { + var lang = languages[env.language]; + if (Prism.util.type(lang) !== 'Array') { + lang = [lang]; + } + lang.forEach(function(lang) { + var before, inside, root, 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, { + 'gradient': { + pattern: /(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi, + inside: { + 'function': /[\w-]+(?=\()/, + 'punctuation': /[(),]/ + } + } + }, root); + env.grammar = Prism.languages[lang]; + + languages[env.language] = {initialized: true}; + } + }); + } + }); + + if (Prism.plugins.Previewer) { + 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 = '
'; + }); + } + +}()); \ No newline at end of file diff --git a/plugins/previewer-gradient/prism-previewer-gradient.min.js b/plugins/previewer-gradient/prism-previewer-gradient.min.js new file mode 100644 index 0000000000..c3478e8cb0 --- /dev/null +++ b/plugins/previewer-gradient/prism-previewer-gradient.min.js @@ -0,0 +1 @@ +!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var e={css:!0,less:!0,sass:{lang:"sass",inside:"inside",root:Prism.languages.sass&&Prism.languages.sass["property-line"]},scss:!0,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}]},i={},t=function(e,i,t){var a="180deg";return/^(?:\d*\.?\d+(?:deg|rad)|to\b|top|right|bottom|left)/.test(t[0])&&(a=t.shift(),a.indexOf("to ")<0&&(a.indexOf("top")>=0?a=a.indexOf("left")>=0?"to bottom right":a.indexOf("right")>=0?"to bottom left":"to bottom":a.indexOf("bottom")>=0?a=a.indexOf("left")>=0?"to top right":a.indexOf("right")>=0?"to top left":"to top":a.indexOf("left")>=0?a="to right":a.indexOf("right")>=0?a="to left":e&&(a.indexOf("deg")>=0?a=90-parseFloat(a)+"deg":a.indexOf("rad")>=0&&(a=Math.PI/2-parseFloat(a)+"rad")))),i+"("+a+","+t.join(",")+")"},a=function(e,i,t){if(t[0].indexOf("at")<0){var a="center",r="ellipse",n="farthest-corner";if(/\bcenter|top|right|bottom|left\b|^\d+/.test(t[0])&&(a=t.shift().replace(/\s*\d+(?:rad|deg)\s*/,"")),/\bcircle|ellipse|closest|farthest|contain|cover\b/.test(t[0])){var s=t.shift().split(/\s+/);!s[0]||"circle"!==s[0]&&"ellipse"!==s[0]||(r=s.shift()),s[0]&&(n=s.shift()),"cover"===n?n="farthest-corner":"contain"===n&&(n="clothest-side")}return i+"("+r+" "+n+" at "+a+","+t.join(",")+")"}return i+"("+t.join(",")+")"},r=function(e){if(i[e])return i[e];var r=e.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/),n=r&&r[1],s=r&&r[2],l=e.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g,"").split(/\s*,\s*/);return i[e]=s.indexOf("linear")>=0?t(n,s,l):s.indexOf("radial")>=0?a(n,s,l):s+"("+l.join(",")+")"};Prism.hooks.add("before-highlight",function(i){if(i.language&&e[i.language]&&!e[i.language].initialized){var t=e[i.language];"Array"!==Prism.util.type(t)&&(t=[t]),t.forEach(function(t){var a,r,n,s;t===!0?(a="important",r=i.language,t=i.language):(a=t.before||"important",r=t.inside||t.lang,n=t.root||Prism.languages,s=t.skip,t=i.language),!s&&Prism.languages[t]&&(Prism.languages.insertBefore(r,a,{gradient:{pattern:/(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi,inside:{"function":/[\w-]+(?=\()/,punctuation:/[(),]/}}},n),i.grammar=Prism.languages[t],e[i.language]={initialized:!0})})}}),Prism.plugins.Previewer&&new Prism.plugins.Previewer("gradient",function(e){return this.firstChild.style.backgroundImage="",this.firstChild.style.backgroundImage=r(e),!!this.firstChild.style.backgroundImage},"*",function(){this._elt.innerHTML="
"})}}(); \ No newline at end of file From d37d6b86e0d726b618713f9aa0da039dc3e23545 Mon Sep 17 00:00:00 2001 From: Golmote Date: Thu, 1 Oct 2015 09:01:50 +0200 Subject: [PATCH 2/3] Previewer: gradient: Fix stylus var declaration + insert before Color Previewer if it exists --- .../previewer-base/prism-previewer-base.js | 7 ++ .../prism-previewer-base.min.js | 2 +- .../prism-previewer-gradient.js | 77 ++++++++++--------- .../prism-previewer-gradient.min.js | 2 +- 4 files changed, 49 insertions(+), 39 deletions(-) diff --git a/plugins/previewer-base/prism-previewer-base.js b/plugins/previewer-base/prism-previewer-base.js index a735205af4..a5eb59adc6 100644 --- a/plugins/previewer-base/prism-previewer-base.js +++ b/plugins/previewer-base/prism-previewer-base.js @@ -73,6 +73,7 @@ Previewer.byLanguages[lang].push(self); } }); + Previewer.byType[type] = this; }; /** @@ -162,6 +163,12 @@ */ 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) diff --git a/plugins/previewer-base/prism-previewer-base.min.js b/plugins/previewer-base/prism-previewer-base.min.js index 830a5a35a8..90e1b2e462 100644 --- a/plugins/previewer-base/prism-previewer-base.min.js +++ b/plugins/previewer-base/prism-previewer-base.min.js @@ -1 +1 @@ -!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=function(t){var e=0,s=0,i=t;if(i.parentNode){do e+=i.offsetLeft,s+=i.offsetTop;while((i=i.offsetParent)&&i.nodeType<9);i=t;do e-=i.scrollLeft,s-=i.scrollTop;while((i=i.parentNode)&&!/body/i.test(i.nodeName))}return{top:s,right:innerWidth-e-t.offsetWidth,bottom:innerHeight-s-t.offsetHeight,left:e}},e=/(?:^|\s)token(?=$|\s)/,s=/(?:^|\s)active(?=$|\s)/g,i=/(?:^|\s)flipped(?=$|\s)/g,o=function(t,e,s,i){this._elt=null,this._type=t,this._clsRegexp=RegExp("(?:^|\\s)"+t+"(?=$|\\s)"),this._token=null,this.updater=e,this._mouseout=this.mouseout.bind(this),this.initializer=i;var n=this;s||(s=["*"]),"Array"!==Prism.util.type(s)&&(s=[s]),s.forEach(function(t){"string"!=typeof t&&(t=t.lang),o.byLanguages[t]||(o.byLanguages[t]=[]),o.byLanguages[t].indexOf(n)<0&&o.byLanguages[t].push(n)})};o.prototype.init=function(){this._elt||(this._elt=document.createElement("div"),this._elt.className="prism-previewer prism-previewer-"+this._type,document.body.appendChild(this._elt),this.initializer&&this.initializer())},o.prototype.check=function(t){do if(e.test(t.className)&&this._clsRegexp.test(t.className))break;while(t=t.parentNode);t&&t!==this._token&&(this._token=t,this.show())},o.prototype.mouseout=function(){this._token.removeEventListener("mouseout",this._mouseout,!1),this._token=null,this.hide()},o.prototype.show=function(){if(this._elt||this.init(),this._token)if(this.updater.call(this._elt,this._token.textContent)){this._token.addEventListener("mouseout",this._mouseout,!1);var e=t(this._token);this._elt.className+=" active",e.top-this._elt.offsetHeight>0?(this._elt.className=this._elt.className.replace(i,""),this._elt.style.top=e.top+"px",this._elt.style.bottom=""):(this._elt.className+=" flipped",this._elt.style.bottom=e.bottom+"px",this._elt.style.top=""),this._elt.style.left=e.left+Math.min(200,this._token.offsetWidth/2)+"px"}else this.hide()},o.prototype.hide=function(){this._elt.className=this._elt.className.replace(s,"")},o.byLanguages={},o.initEvents=function(t,e){var s=[];o.byLanguages[e]&&(s=s.concat(o.byLanguages[e])),o.byLanguages["*"]&&(s=s.concat(o.byLanguages["*"])),t.addEventListener("mouseover",function(t){var e=t.target;s.forEach(function(t){t.check(e)})},!1)},Prism.plugins.Previewer=o,Prism.hooks.add("after-highlight",function(t){(o.byLanguages["*"]||o.byLanguages[t.language])&&o.initEvents(t.element,t.language)})}}(); \ No newline at end of file +!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=function(t){var e=0,s=0,i=t;if(i.parentNode){do e+=i.offsetLeft,s+=i.offsetTop;while((i=i.offsetParent)&&i.nodeType<9);i=t;do e-=i.scrollLeft,s-=i.scrollTop;while((i=i.parentNode)&&!/body/i.test(i.nodeName))}return{top:s,right:innerWidth-e-t.offsetWidth,bottom:innerHeight-s-t.offsetHeight,left:e}},e=/(?:^|\s)token(?=$|\s)/,s=/(?:^|\s)active(?=$|\s)/g,i=/(?:^|\s)flipped(?=$|\s)/g,o=function(t,e,s,i){this._elt=null,this._type=t,this._clsRegexp=RegExp("(?:^|\\s)"+t+"(?=$|\\s)"),this._token=null,this.updater=e,this._mouseout=this.mouseout.bind(this),this.initializer=i;var n=this;s||(s=["*"]),"Array"!==Prism.util.type(s)&&(s=[s]),s.forEach(function(t){"string"!=typeof t&&(t=t.lang),o.byLanguages[t]||(o.byLanguages[t]=[]),o.byLanguages[t].indexOf(n)<0&&o.byLanguages[t].push(n)}),o.byType[t]=this};o.prototype.init=function(){this._elt||(this._elt=document.createElement("div"),this._elt.className="prism-previewer prism-previewer-"+this._type,document.body.appendChild(this._elt),this.initializer&&this.initializer())},o.prototype.check=function(t){do if(e.test(t.className)&&this._clsRegexp.test(t.className))break;while(t=t.parentNode);t&&t!==this._token&&(this._token=t,this.show())},o.prototype.mouseout=function(){this._token.removeEventListener("mouseout",this._mouseout,!1),this._token=null,this.hide()},o.prototype.show=function(){if(this._elt||this.init(),this._token)if(this.updater.call(this._elt,this._token.textContent)){this._token.addEventListener("mouseout",this._mouseout,!1);var e=t(this._token);this._elt.className+=" active",e.top-this._elt.offsetHeight>0?(this._elt.className=this._elt.className.replace(i,""),this._elt.style.top=e.top+"px",this._elt.style.bottom=""):(this._elt.className+=" flipped",this._elt.style.bottom=e.bottom+"px",this._elt.style.top=""),this._elt.style.left=e.left+Math.min(200,this._token.offsetWidth/2)+"px"}else this.hide()},o.prototype.hide=function(){this._elt.className=this._elt.className.replace(s,"")},o.byLanguages={},o.byType={},o.initEvents=function(t,e){var s=[];o.byLanguages[e]&&(s=s.concat(o.byLanguages[e])),o.byLanguages["*"]&&(s=s.concat(o.byLanguages["*"])),t.addEventListener("mouseover",function(t){var e=t.target;s.forEach(function(t){t.check(e)})},!1)},Prism.plugins.Previewer=o,Prism.hooks.add("after-highlight",function(t){(o.byLanguages["*"]||o.byLanguages[t.language])&&o.initEvents(t.element,t.language)})}}(); \ No newline at end of file diff --git a/plugins/previewer-gradient/prism-previewer-gradient.js b/plugins/previewer-gradient/prism-previewer-gradient.js index 089ebc772e..b2b6b4a17b 100644 --- a/plugins/previewer-gradient/prism-previewer-gradient.js +++ b/plugins/previewer-gradient/prism-previewer-gradient.js @@ -26,13 +26,52 @@ }, { lang: 'stylus', - before: 'hexcode', + before: 'func', inside: 'rest', root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside } ] }; + Prism.hooks.add('before-highlight', function (env) { + if (env.language && languages[env.language] && !languages[env.language].initialized) { + var lang = languages[env.language]; + if (Prism.util.type(lang) !== 'Array') { + lang = [lang]; + } + lang.forEach(function(lang) { + var before, inside, root, skip; + if (lang === true) { + // Insert before color previewer if it exists + before = Prism.plugins.Previewer && Prism.plugins.Previewer.byType['color'] ? 'color' : '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, { + 'gradient': { + pattern: /(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi, + inside: { + 'function': /[\w-]+(?=\()/, + 'punctuation': /[(),]/ + } + } + }, root); + env.grammar = Prism.languages[lang]; + + languages[env.language] = {initialized: true}; + } + }); + } + }); + // Stores already processed gradients so that we don't // make the conversion every time the previewer is shown var cache = {}; @@ -154,43 +193,7 @@ return cache[gradient] = func + '(' + values.join(',') + ')'; }; - Prism.hooks.add('before-highlight', function (env) { - if (env.language && languages[env.language] && !languages[env.language].initialized) { - var lang = languages[env.language]; - if (Prism.util.type(lang) !== 'Array') { - lang = [lang]; - } - lang.forEach(function(lang) { - var before, inside, root, 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, { - 'gradient': { - pattern: /(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi, - inside: { - 'function': /[\w-]+(?=\()/, - 'punctuation': /[(),]/ - } - } - }, root); - env.grammar = Prism.languages[lang]; - languages[env.language] = {initialized: true}; - } - }); - } - }); if (Prism.plugins.Previewer) { new Prism.plugins.Previewer('gradient', function(value) { diff --git a/plugins/previewer-gradient/prism-previewer-gradient.min.js b/plugins/previewer-gradient/prism-previewer-gradient.min.js index c3478e8cb0..35322d4b65 100644 --- a/plugins/previewer-gradient/prism-previewer-gradient.min.js +++ b/plugins/previewer-gradient/prism-previewer-gradient.min.js @@ -1 +1 @@ -!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var e={css:!0,less:!0,sass:{lang:"sass",inside:"inside",root:Prism.languages.sass&&Prism.languages.sass["property-line"]},scss:!0,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}]},i={},t=function(e,i,t){var a="180deg";return/^(?:\d*\.?\d+(?:deg|rad)|to\b|top|right|bottom|left)/.test(t[0])&&(a=t.shift(),a.indexOf("to ")<0&&(a.indexOf("top")>=0?a=a.indexOf("left")>=0?"to bottom right":a.indexOf("right")>=0?"to bottom left":"to bottom":a.indexOf("bottom")>=0?a=a.indexOf("left")>=0?"to top right":a.indexOf("right")>=0?"to top left":"to top":a.indexOf("left")>=0?a="to right":a.indexOf("right")>=0?a="to left":e&&(a.indexOf("deg")>=0?a=90-parseFloat(a)+"deg":a.indexOf("rad")>=0&&(a=Math.PI/2-parseFloat(a)+"rad")))),i+"("+a+","+t.join(",")+")"},a=function(e,i,t){if(t[0].indexOf("at")<0){var a="center",r="ellipse",n="farthest-corner";if(/\bcenter|top|right|bottom|left\b|^\d+/.test(t[0])&&(a=t.shift().replace(/\s*\d+(?:rad|deg)\s*/,"")),/\bcircle|ellipse|closest|farthest|contain|cover\b/.test(t[0])){var s=t.shift().split(/\s+/);!s[0]||"circle"!==s[0]&&"ellipse"!==s[0]||(r=s.shift()),s[0]&&(n=s.shift()),"cover"===n?n="farthest-corner":"contain"===n&&(n="clothest-side")}return i+"("+r+" "+n+" at "+a+","+t.join(",")+")"}return i+"("+t.join(",")+")"},r=function(e){if(i[e])return i[e];var r=e.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/),n=r&&r[1],s=r&&r[2],l=e.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g,"").split(/\s*,\s*/);return i[e]=s.indexOf("linear")>=0?t(n,s,l):s.indexOf("radial")>=0?a(n,s,l):s+"("+l.join(",")+")"};Prism.hooks.add("before-highlight",function(i){if(i.language&&e[i.language]&&!e[i.language].initialized){var t=e[i.language];"Array"!==Prism.util.type(t)&&(t=[t]),t.forEach(function(t){var a,r,n,s;t===!0?(a="important",r=i.language,t=i.language):(a=t.before||"important",r=t.inside||t.lang,n=t.root||Prism.languages,s=t.skip,t=i.language),!s&&Prism.languages[t]&&(Prism.languages.insertBefore(r,a,{gradient:{pattern:/(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi,inside:{"function":/[\w-]+(?=\()/,punctuation:/[(),]/}}},n),i.grammar=Prism.languages[t],e[i.language]={initialized:!0})})}}),Prism.plugins.Previewer&&new Prism.plugins.Previewer("gradient",function(e){return this.firstChild.style.backgroundImage="",this.firstChild.style.backgroundImage=r(e),!!this.firstChild.style.backgroundImage},"*",function(){this._elt.innerHTML="
"})}}(); \ No newline at end of file +!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var e={css:!0,less:!0,sass:{lang:"sass",before:"punctuation",inside:"inside",root:Prism.languages.sass&&Prism.languages.sass["property-line"]},scss:!0,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}]};Prism.hooks.add("before-highlight",function(i){if(i.language&&e[i.language]&&!e[i.language].initialized){var t=e[i.language];"Array"!==Prism.util.type(t)&&(t=[t]),t.forEach(function(t){var r,a,n,s;t===!0?(r=Prism.plugins.Previewer&&Prism.plugins.Previewer.byType.color?"color":"important",a=i.language,t=i.language):(r=t.before||"important",a=t.inside||t.lang,n=t.root||Prism.languages,s=t.skip,t=i.language),!s&&Prism.languages[t]&&(Prism.languages.insertBefore(a,r,{gradient:{pattern:/(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi,inside:{"function":/[\w-]+(?=\()/,punctuation:/[(),]/}}},n),i.grammar=Prism.languages[t],e[i.language]={initialized:!0})})}});var i={},t=function(e,i,t){var r="180deg";return/^(?:-?\d*\.?\d+(?:deg|rad)|to\b|top|right|bottom|left)/.test(t[0])&&(r=t.shift(),r.indexOf("to ")<0&&(r.indexOf("top")>=0?r=r.indexOf("left")>=0?"to bottom right":r.indexOf("right")>=0?"to bottom left":"to bottom":r.indexOf("bottom")>=0?r=r.indexOf("left")>=0?"to top right":r.indexOf("right")>=0?"to top left":"to top":r.indexOf("left")>=0?r="to right":r.indexOf("right")>=0?r="to left":e&&(r.indexOf("deg")>=0?r=90-parseFloat(r)+"deg":r.indexOf("rad")>=0&&(r=Math.PI/2-parseFloat(r)+"rad")))),i+"("+r+","+t.join(",")+")"},r=function(e,i,t){if(t[0].indexOf("at")<0){var r="center",a="ellipse",n="farthest-corner";if(/\bcenter|top|right|bottom|left\b|^\d+/.test(t[0])&&(r=t.shift().replace(/\s*-?\d+(?:rad|deg)\s*/,"")),/\bcircle|ellipse|closest|farthest|contain|cover\b/.test(t[0])){var s=t.shift().split(/\s+/);!s[0]||"circle"!==s[0]&&"ellipse"!==s[0]||(a=s.shift()),s[0]&&(n=s.shift()),"cover"===n?n="farthest-corner":"contain"===n&&(n="clothest-side")}return i+"("+a+" "+n+" at "+r+","+t.join(",")+")"}return i+"("+t.join(",")+")"},a=function(e){if(i[e])return i[e];var a=e.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/),n=a&&a[1],s=a&&a[2],l=e.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g,"").split(/\s*,\s*/);return i[e]=s.indexOf("linear")>=0?t(n,s,l):s.indexOf("radial")>=0?r(n,s,l):s+"("+l.join(",")+")"};Prism.plugins.Previewer&&new Prism.plugins.Previewer("gradient",function(e){return this.firstChild.style.backgroundImage="",this.firstChild.style.backgroundImage=a(e),!!this.firstChild.style.backgroundImage},"*",function(){this._elt.innerHTML="
"})}}(); \ No newline at end of file From 1d61959b9bb47dd97b22c7ce7d98ba4488bb5192 Mon Sep 17 00:00:00 2001 From: Golmote Date: Mon, 5 Oct 2015 08:47:54 +0200 Subject: [PATCH 3/3] Plugin: gradient previewer: Add variable examples + add support for Sass variables --- plugins/previewer-gradient/index.html | 12 +++++++---- .../prism-previewer-gradient.js | 20 +++++++++++++------ .../prism-previewer-gradient.min.js | 2 +- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/plugins/previewer-gradient/index.html b/plugins/previewer-gradient/index.html index e783ca8963..420bf8a8f5 100644 --- a/plugins/previewer-gradient/index.html +++ b/plugins/previewer-gradient/index.html @@ -45,7 +45,8 @@

CSS

}

Less

- 
#header a {
+	
@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+ */
@@ -54,19 +55,22 @@ 
Less

 }

 
 	
Sass

-	
@mixin foobar
+	
$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

-	
$attr: background;
+	
$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

-	
.foo
+	
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)
 

 
diff --git a/plugins/previewer-gradient/prism-previewer-gradient.js b/plugins/previewer-gradient/prism-previewer-gradient.js
index b2b6b4a17b..11c2d0619e 100644
--- a/plugins/previewer-gradient/prism-previewer-gradient.js
+++ b/plugins/previewer-gradient/prism-previewer-gradient.js
@@ -10,12 +10,20 @@
 	var languages = {
 		'css': true,
 		'less': true,
-		'sass': {
-			lang: 'sass',
-			before: 'punctuation',
-			inside: 'inside',
-			root: Prism.languages.sass && Prism.languages.sass['property-line']
-		},
+		'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': [
 			{
diff --git a/plugins/previewer-gradient/prism-previewer-gradient.min.js b/plugins/previewer-gradient/prism-previewer-gradient.min.js
index 35322d4b65..28d222d034 100644
--- a/plugins/previewer-gradient/prism-previewer-gradient.min.js
+++ b/plugins/previewer-gradient/prism-previewer-gradient.min.js
@@ -1 +1 @@
-!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var e={css:!0,less:!0,sass:{lang:"sass",before:"punctuation",inside:"inside",root:Prism.languages.sass&&Prism.languages.sass["property-line"]},scss:!0,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}]};Prism.hooks.add("before-highlight",function(i){if(i.language&&e[i.language]&&!e[i.language].initialized){var t=e[i.language];"Array"!==Prism.util.type(t)&&(t=[t]),t.forEach(function(t){var r,a,n,s;t===!0?(r=Prism.plugins.Previewer&&Prism.plugins.Previewer.byType.color?"color":"important",a=i.language,t=i.language):(r=t.before||"important",a=t.inside||t.lang,n=t.root||Prism.languages,s=t.skip,t=i.language),!s&&Prism.languages[t]&&(Prism.languages.insertBefore(a,r,{gradient:{pattern:/(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi,inside:{"function":/[\w-]+(?=\()/,punctuation:/[(),]/}}},n),i.grammar=Prism.languages[t],e[i.language]={initialized:!0})})}});var i={},t=function(e,i,t){var r="180deg";return/^(?:-?\d*\.?\d+(?:deg|rad)|to\b|top|right|bottom|left)/.test(t[0])&&(r=t.shift(),r.indexOf("to ")<0&&(r.indexOf("top")>=0?r=r.indexOf("left")>=0?"to bottom right":r.indexOf("right")>=0?"to bottom left":"to bottom":r.indexOf("bottom")>=0?r=r.indexOf("left")>=0?"to top right":r.indexOf("right")>=0?"to top left":"to top":r.indexOf("left")>=0?r="to right":r.indexOf("right")>=0?r="to left":e&&(r.indexOf("deg")>=0?r=90-parseFloat(r)+"deg":r.indexOf("rad")>=0&&(r=Math.PI/2-parseFloat(r)+"rad")))),i+"("+r+","+t.join(",")+")"},r=function(e,i,t){if(t[0].indexOf("at")<0){var r="center",a="ellipse",n="farthest-corner";if(/\bcenter|top|right|bottom|left\b|^\d+/.test(t[0])&&(r=t.shift().replace(/\s*-?\d+(?:rad|deg)\s*/,"")),/\bcircle|ellipse|closest|farthest|contain|cover\b/.test(t[0])){var s=t.shift().split(/\s+/);!s[0]||"circle"!==s[0]&&"ellipse"!==s[0]||(a=s.shift()),s[0]&&(n=s.shift()),"cover"===n?n="farthest-corner":"contain"===n&&(n="clothest-side")}return i+"("+a+" "+n+" at "+r+","+t.join(",")+")"}return i+"("+t.join(",")+")"},a=function(e){if(i[e])return i[e];var a=e.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/),n=a&&a[1],s=a&&a[2],l=e.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g,"").split(/\s*,\s*/);return i[e]=s.indexOf("linear")>=0?t(n,s,l):s.indexOf("radial")>=0?r(n,s,l):s+"("+l.join(",")+")"};Prism.plugins.Previewer&&new Prism.plugins.Previewer("gradient",function(e){return this.firstChild.style.backgroundImage="",this.firstChild.style.backgroundImage=a(e),!!this.firstChild.style.backgroundImage},"*",function(){this._elt.innerHTML="
"})}}();
\ No newline at end of file
+!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var e={css:!0,less:!0,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:!0,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}]};Prism.hooks.add("before-highlight",function(i){if(i.language&&e[i.language]&&!e[i.language].initialized){var t=e[i.language];"Array"!==Prism.util.type(t)&&(t=[t]),t.forEach(function(t){var r,s,a,n;t===!0?(r=Prism.plugins.Previewer&&Prism.plugins.Previewer.byType.color?"color":"important",s=i.language,t=i.language):(r=t.before||"important",s=t.inside||t.lang,a=t.root||Prism.languages,n=t.skip,t=i.language),!n&&Prism.languages[t]&&(Prism.languages.insertBefore(s,r,{gradient:{pattern:/(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi,inside:{"function":/[\w-]+(?=\()/,punctuation:/[(),]/}}},a),i.grammar=Prism.languages[t],e[i.language]={initialized:!0})})}});var i={},t=function(e,i,t){var r="180deg";return/^(?:-?\d*\.?\d+(?:deg|rad)|to\b|top|right|bottom|left)/.test(t[0])&&(r=t.shift(),r.indexOf("to ")<0&&(r.indexOf("top")>=0?r=r.indexOf("left")>=0?"to bottom right":r.indexOf("right")>=0?"to bottom left":"to bottom":r.indexOf("bottom")>=0?r=r.indexOf("left")>=0?"to top right":r.indexOf("right")>=0?"to top left":"to top":r.indexOf("left")>=0?r="to right":r.indexOf("right")>=0?r="to left":e&&(r.indexOf("deg")>=0?r=90-parseFloat(r)+"deg":r.indexOf("rad")>=0&&(r=Math.PI/2-parseFloat(r)+"rad")))),i+"("+r+","+t.join(",")+")"},r=function(e,i,t){if(t[0].indexOf("at")<0){var r="center",s="ellipse",a="farthest-corner";if(/\bcenter|top|right|bottom|left\b|^\d+/.test(t[0])&&(r=t.shift().replace(/\s*-?\d+(?:rad|deg)\s*/,"")),/\bcircle|ellipse|closest|farthest|contain|cover\b/.test(t[0])){var n=t.shift().split(/\s+/);!n[0]||"circle"!==n[0]&&"ellipse"!==n[0]||(s=n.shift()),n[0]&&(a=n.shift()),"cover"===a?a="farthest-corner":"contain"===a&&(a="clothest-side")}return i+"("+s+" "+a+" at "+r+","+t.join(",")+")"}return i+"("+t.join(",")+")"},s=function(e){if(i[e])return i[e];var s=e.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/),a=s&&s[1],n=s&&s[2],l=e.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g,"").split(/\s*,\s*/);return i[e]=n.indexOf("linear")>=0?t(a,n,l):n.indexOf("radial")>=0?r(a,n,l):n+"("+l.join(",")+")"};Prism.plugins.Previewer&&new Prism.plugins.Previewer("gradient",function(e){return this.firstChild.style.backgroundImage="",this.firstChild.style.backgroundImage=s(e),!!this.firstChild.style.backgroundImage},"*",function(){this._elt.innerHTML="
"})}}();
\ No newline at end of file