a.css

esbudellant estàndards

Modificació del colorejador de sintaxi Chili

22/12/07

Chili és un plugin de JQuery que permet colorejar diferents sintaxis.

He modificat el recipe per colorejar CSS de manera que a més a més de colorejar afegeixi un enllaç per cada propietat.

El fragment de codi original:


,attrib: { exp: /\b(?:z-index|x-height|word-spacing|widths|width|widows|white-space|volume|voice-family|visibility|vertical-align|units-per-em|unicode-range|unicode-bidi|text-transform|text-shadow|text-indent|text-decoration|text-align|table-layout|stress|stemv|stemh|src|speech-rate|speak-punctuation|speak-numeral|speak-header|speak|slope|size|right|richness|quotes|position|play-during|pitch-range|pitch|pause-before|pause-after|pause|page-break-inside|page-break-before|page-break-after|page|padding-top|padding-right|padding-left|padding-bottom|padding|overflow|outline-width|outline-style|outline-color|outline|orphans|min-width|min-height|max-width|max-height|mathline|marks|marker-offset|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|letter-spacing|height|font-weight|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-family|font|float|empty-cells|elevation|display|direction|descent|definition-src|cursor|cue-before|cue-after|cue|counter-reset|counter-increment|content|color|clip|clear|centerline|caption-side|cap-height|bottom|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border|bbox|baseline|background-repeat|background-position|background-image|background-color|background-attachment|background|azimuth|ascent)\b/ }

La substitució:


, propertiesAural : { exp : "(volume|speak|pause-before|pause-after|pause|cue-before|cue-after|cue|play-during|azimuth|elevation|speech-rate|voice-family|pitch-range|pitch|stress|richness|speak-punctuation|speak-numeral|speak-header)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/aural.html#propdef-$1\">$1</a>$2'}
, propertiesColors : { exp : "(color|background-repeat|background-position|background-image|background-color|background-attachment|background)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/colors.html#propdef-$1\">$1</a>$2'}
, propertiesTables : { exp : "(caption-side|table-layout|border-collapse|border-spacing|empty-cells)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/tables.html#propdef-$1\">$1</a>$2'}
, propertiesVisuren : { exp : "(display|position|top|right|bottom|left|float|clear|z-index|direction|unicode-bidi)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/visuren.html#propdef-$1\">$1</a>$2'}
, propertiesVisufx : { exp : "(overflow|clip|visibility)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/visufx.html#propdef-$1\">$1</a>$2'}
, propertiesGenerate : { exp : "(content|quotes|counter-reset|counter-increment|list-style-type|list-style-image|list-style-position|list-style)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/generate.html#propdef-$1\">$1</a>$2'}
, propertiesUI : { exp : "(cursor|outline|outline-width|outline-style|outline-color)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/ui.html#propdef-$1\">$1</a>$2'}
, propertiesFonts : { exp : "(font-family|font-style|font-variant|font-weight|font-size|font)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/fonts.html#propdef-$1\">$1</a>$2'}
, propertiesVisudet : { exp : "(width|min-width|max-width|height|min-height|max-height|line-height|vertical-align)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/visudet.html#propdef-$1\">$1</a>$2'}
, propertiesText : { exp : "(text-indent|text-align|text-decoration|letter-spacing|word-spacing|text-transform|white-space)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/text.html#propdef-$1\">$1</a>$2'}
, propertiesPage : { exp : "(page-break-before|page-break-after|page-break-inside|orphans|windows)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/page.html#propdef-$1\">$1</a>$2'}
, propertiesBox : { exp : "(margin-top|margin-bottom|margin-right|margin-left|margin|padding-top|padding-bottom|padding-right|padding-left|padding|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border)(:)"
   ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/box.html#propdef-$1\">$1</a>$2'}

A més a més li he afegit alguna millora com el colorejat del modificador !important o d'algun dels hacks més habituals.

Tot el recipe queda en:


ChiliBook.recipes[ "css.js" ] = 
{
   steps: {
      comment : { exp  : /\/\*[^*]*\*+([^\/][^*]*\*+)*\// }
      , media : { exp  : /@\w[\w]*/ }
      , selectors : { exp  : "([\\w-:\\[.#*][^{};]*)(?={)" }
      , hack : { exp  : /(_[\w-]+)(?=\s*:)|([\w\-\s]+)\/\*\*\// }
      , propertiesAural : { exp : "(volume|speak|pause-before|pause-after|pause|cue-before|cue-after|cue|play-during|azimuth|elevation|speech-rate|voice-family|pitch-range|pitch|stress|richness|speak-punctuation|speak-numeral|speak-header)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/aural.html#propdef-$1\">$1</a>$2'}
      , propertiesColor : { exp : "(color|background-repeat|background-position|background-image|background-color|background-attachment|background)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/colors.html#propdef-$1\">$1</a>$2'}
      , propertiesTables : { exp : "(caption-side|table-layout|border-collapse|border-spacing|empty-cells)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/tables.html#propdef-$1\">$1</a>$2'}
      , propertiesVisuren : { exp : "(display|position|top|right|bottom|left|float|clear|z-index|direction|unicode-bidi)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/visuren.html#propdef-$1\">$1</a>$2'}
      , propertiesVisufx : { exp : "(overflow|clip|visibility)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/visufx.html#propdef-$1\">$1</a>$2'}
      , propertiesGenerate : { exp : "(content|quotes|counter-reset|counter-increment|list-style-type|list-style-image|list-style-position|list-style)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/generate.html#propdef-$1\">$1</a>$2'}
      , propertiesUI : { exp : "(cursor|outline|outline-width|outline-style|outline-color)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/ui.html#propdef-$1\">$1</a>$2'}
      , propertiesFonts : { exp : "(font-family|font-style|font-variant|font-weight|font-size|font)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/fonts.html#propdef-$1\">$1</a>$2'}
      , propertiesVisudet : { exp : "(width|min-width|max-width|height|min-height|max-height|line-height|vertical-align)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/visudet.html#propdef-$1\">$1</a>$2'}
      , propertiesText : { exp : "(text-indent|text-align|text-decoration|letter-spacing|word-spacing|text-transform|white-space)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/text.html#propdef-$1\">$1</a>$2'}
      , propertiesPage : { exp : "(page-break-before|page-break-after|page-break-inside|orphans|windows)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/page.html#propdef-$1\">$1</a>$2'}
      , propertiesBox : { exp : "(margin-top|margin-bottom|margin-right|margin-left|margin|padding-top|padding-bottom|padding-right|padding-left|padding|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border)(:)"
         ,replacement: '<a href=\"http://www.w3.org/TR/CSS21/box.html#propdef-$1\">$1</a>$2'}
      , important : { exp  : /!important/ }
      , color : { exp: /(?:\#[a-fA-F0-9]{3,6})|(?:yellow|white|teal|silver|red|purple|olive|navy|maroon|lime|green|gray|fuchsia|blue|black|aqua)/ }
      , value : { exp  : /(url\([\w\"\'\.\/#]+\))|([\w#\-\(\)\"\'@\\%]+)/ }
   }
};

Amb la inestimable col·laboració d'en Choan el recipe queda en:


ChiliBook.recipes['css.js'] = function() {
	var steps = {};
	function addPropertiesStep(name,props) {
		var baseuri = "http://www.w3.org/TR/CSS21/";
		var link = '<a href="' + baseuri + name + '.html#propdef-$1">$1</a>$2';
		var step = {
			exp : props,
			replacement : link
		};
		steps['properties' + name.substr(0, 1).toUpperCase() + name.substr(1)] = step;
	};

	steps.comment = { exp  : /\/\*[^*]*\*+([^\/][^*]*\*+)*\// };
	steps.media = { exp  : /@\w[\w]*/ };
	steps.selectors = { exp  : "([\\w-:\\[.#*][^{};]*)(?={)" };
	steps.hack = { exp  : /(_[\w-]+)(?=\s*:)|([\w\-\s]+)\/\*\*\// };
	steps.important = { exp  : /!important/ };
	steps.color = { exp: /(?:\#[a-fA-F0-9]{3,6})|(?:yellow|white|teal|silver|red|purple|olive|navy|maroon|lime|green|gray|fuchsia|blue|black|aqua)/ };
		
	addPropertiesStep("aural","(volume|speak|pause-before|pause-after|pause|cue-before|cue-after|cue|play-during|azimuth|elevation|speech-rate|voice-family|pitch-range|pitch|stress|richness|speak-punctuation|speak-numeral|speak-header)(:)");
	addPropertiesStep("colors","(color|background-repeat|background-position|background-image|background-color|background-attachment|background)(:)");
	addPropertiesStep("tables","(caption-side|table-layout|border-collapse|border-spacing|empty-cells)(:)");
	addPropertiesStep("visuren","(display|position|top|right|bottom|left|float|clear|z-index|direction|unicode-bidi)(:)");
	addPropertiesStep("visufx","(overflow|clip|visibility)(:)");
	addPropertiesStep("generate","(content|quotes|counter-reset|counter-increment|list-style-type|list-style-image|list-style-position|list-style)(:)");
	addPropertiesStep("ui","(cursor|outline|outline-width|outline-style|outline-color)(:)");
	addPropertiesStep("fonts","(font-family|font-style|font-variant|font-weight|font-size|font)(:)");
	addPropertiesStep("visudet","(width|min-width|max-width|height|min-height|max-height|line-height|vertical-align)(:)");
	addPropertiesStep("text","(text-indent|text-align|text-decoration|letter-spacing|word-spacing|text-transform|white-space)(:)");
	addPropertiesStep("page","(page-break-before|page-break-after|page-break-inside|orphans|windows)(:)");
	addPropertiesStep("box","(margin-top|margin-bottom|margin-right|margin-left|margin|padding-top|padding-bottom|padding-right|padding-left|padding|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border)(:)");
	
	steps.value = { exp  : /(url\([\w\"\'\.\/#]+\))|([\w#\-\(\)\"\'@\\%]+)/ };
	return {steps: steps};
}();

Un exemple de com queda el codi CSS:


body {
   background: white;
   padding: 1em 0.5em;
}

Comentaris

Afegir un comentari

© Arnau Siches. a.css està sota Llicència Creative Commons.