From b081804639aed4f2e63ccd7a4130ac3f762ba1bd Mon Sep 17 00:00:00 2001 From: Golmote Date: Sat, 13 Jun 2015 11:03:08 +0200 Subject: [PATCH] Basic Sass support (fix #199) --- components.js | 4 +++ components/prism-sass.js | 66 ++++++++++++++++++++++++++++++++++++ components/prism-sass.min.js | 1 + examples/prism-sass.html | 50 +++++++++++++++++++++++++++ 4 files changed, 121 insertions(+) create mode 100644 components/prism-sass.js create mode 100644 components/prism-sass.min.js create mode 100644 examples/prism-sass.html diff --git a/components.js b/components.js index 7be18694e5..7523fae381 100644 --- a/components.js +++ b/components.js @@ -276,6 +276,10 @@ var components = { "title": "SAS", "owner": "Golmote" }, + "sass": { + "title": "Sass (Sass)", + "owner": "Golmote" + }, "scss": { "title": "Sass (Scss)", "require": "css", diff --git a/components/prism-sass.js b/components/prism-sass.js new file mode 100644 index 0000000000..9115684fa3 --- /dev/null +++ b/components/prism-sass.js @@ -0,0 +1,66 @@ +(function(Prism) { + Prism.languages.sass = Prism.languages.extend('css', { + // Sass comments don't need to be closed, only indented + 'comment': /^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m + }); + + Prism.languages.insertBefore('sass', 'atrule', { + // We want to consume the whole line + 'atrule-line': { + // Includes support for = and + shortcuts + pattern: /^(?:[ \t]*)[@+=].+/m, + inside: { + 'atrule': /^(?:[ \t]*)(?:@[\w-]+|[+=])/m + } + } + }); + delete Prism.languages.sass.atrule; + + + var variable = /((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i; + var operator = /[-+]{1,2}|==?|!=|\|?\||\?|\*|\/|%/; + + Prism.languages.insertBefore('sass', 'property', { + // We want to consume the whole line + 'variable-line': { + pattern: /(^|(?:\r?\n|\r))[ \t]*\$.+/, + lookbehind: true, + inside: { + 'punctuation': /:/, + 'variable': variable, + 'operator': operator + } + }, + // We want to consume the whole line + 'property-line': { + pattern: /(^|(?:\r?\n|\r))[ \t]*(?:[^:\s]+[ ]*:.*|:[^:\s]+.*)/i, + lookbehind: true, + inside: { + 'property': [ + /[^:\s]+(?=\s*:)/, + { + pattern: /(:)[^:\s]+/, + lookbehind: true + } + ], + 'punctuation': /:/, + 'variable': variable, + 'operator': operator, + 'important': Prism.languages.sass.important + } + } + }); + delete Prism.languages.sass.property; + delete Prism.languages.sass.important; + + // Now that whole lines for other patterns are consumed, + // what's left should be selectors + delete Prism.languages.sass.selector; + Prism.languages.insertBefore('sass', 'punctuation', { + 'selector': { + pattern: /([ \t]*).+(?:,(?:\r?\n|\r)\1[ \t]+.+)*/, + lookbehind: true + } + }); + +}(Prism)); \ No newline at end of file diff --git a/components/prism-sass.min.js b/components/prism-sass.min.js new file mode 100644 index 0000000000..8b4ea94203 --- /dev/null +++ b/components/prism-sass.min.js @@ -0,0 +1 @@ +!function(e){e.languages.sass=e.languages.extend("css",{comment:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t]+.+)*/m}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,inside:{atrule:/^(?:[ \t]*)(?:@[\w-]+|[+=])/m}}}),delete e.languages.sass.atrule;var a=/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i,s=/[-+]{1,2}|==?|!=|\|?\||\?|\*|\/|%/;e.languages.insertBefore("sass","property",{"variable-line":{pattern:/(^|(?:\r?\n|\r))[ \t]*\$.+/,lookbehind:!0,inside:{punctuation:/:/,variable:a,operator:s}},"property-line":{pattern:/(^|(?:\r?\n|\r))[ \t]*(?:[^:\s]+[ ]*:.*|:[^:\s]+.*)/i,lookbehind:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:a,operator:s,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,delete e.languages.sass.selector,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/([ \t]*).+(?:,(?:\r?\n|\r)\1[ \t]+.+)*/,lookbehind:!0}})}(Prism); \ No newline at end of file diff --git a/examples/prism-sass.html b/examples/prism-sass.html new file mode 100644 index 0000000000..68a7763e5c --- /dev/null +++ b/examples/prism-sass.html @@ -0,0 +1,50 @@ +

Sass (Sass)

+

To use this language, use the class "language-sass".

+ +

Comments

+
/* This comment will appear in the CSS output.
+  This is nested beneath the comment,
+  so it's part of it
+
+// This comment will not appear in the CSS output.
+  This is nested beneath the comment as well,
+  so it also won't appear
+ +

At-rules and shortcuts

+
@mixin large-text
+  color: #ff0000
+
+@media (min-width: 600px)
+  h1
+    @include large-text
+
+=large-text
+  color: #ff0000
+
+h1
+  +large-text
+ +

Variables

+
$width: 5em
+#main
+  width: $width
+
+ +

Known failures

+

There are certain edge cases where Prism will fail. + There are always such cases in every regex-based syntax highlighter. + However, Prism dares to be open and honest about them. + If a failure is listed here, it doesn’t mean it will never be fixed. This is more of a “known bugs” list, just with a certain type of bug. +

+ +

Deprecated Sass syntax is not supported

+
.page
+  color = 5px + 9px
+
+!width = 13px
+.icon
+  width = !width
+ +

Selectors with pseudo classes are highlighted as property/value pairs

+
a:hover
+  text-decoration: underline
\ No newline at end of file