Modificació del colorejador de sintaxi Chili
Publicat el 22/12/2007
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