fix syntax highlighting (#1)

* fix syntax highlightingg * dedent examples
joeframbach · Sep 4, 2017 · 6188173 · 6188173
1 parent 97dbf93
commit 6188173
Showing 1 changed file with 94 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -10,23 +10,25 @@
 `postcss-params` has two usage modes:
 
 1. Target devices/clients based on a build configuration, much like media queries.
-2. Pass strings from css to your postcss plugin, using a familiar syntax.
+2. Pass strings from css to your PostCSS plugin, using a familiar syntax.
 
 Some sites serve different assets to different clients.
 For example, you may have some IE-specific css hacks that you only want to serve to IE browsers.
 Or you want to load certain fonts for certain countries.
 PostCSS is a good way to keep all your code in one file, then generate separate assets.
 
-    @my-plugin (browser: ie) {
-      button {
-        background-color: red;
-      }
-    }
-    @my-plugin not (browser: ie) {
-      button {
-        background-color: green;
-      }
-    }
+```scss
+@my-plugin (browser: ie) {
+  button {
+    background-color: red;
+  }
+}
+@my-plugin not (browser: ie) {
+  button {
+    background-color: green;
+  }
+}
+```
 
 `postcss-params` helps you write a plugin which reads the `(browser: ie)` parameter string, and keep or discard the block accordingly.
 
@@ -47,44 +49,47 @@ and returns `true` if the params match the configuration, and
 See the tests in `tests/buildComparator` for more examples.
 
 CSS:
-
-    @my-plugin (region: cn) {
-      body {
-        font-family: ".PingFang-SC-Regular", sans-serif;
-      }
-    }
-    @my-plugin not (region: cn) {
-      body {
-        font-family: "Helvetica Neue", Arial, sans-serif !default;
-      }
-    }
+```scss
+@my-plugin (region: cn) {
+  body {
+    font-family: ".PingFang-SC-Regular", sans-serif;
+  }
+}
+@my-plugin not (region: cn) {
+  body {
+    font-family: "Helvetica Neue", Arial, sans-serif !default;
+  }
+}
+```
 
 Plugin:
+```js
+const { buildComparator } = require('postcss-params');
+postcss.plugin('my-plugin', (configuration) => (root) => {
+  root.walkAtRules('my-plugin', (atRule) => {
+    const comparator = buildComparator(atRule.params);
+    if (comparator(configuration)) {
+      atRule.replaceWith(atRule.nodes);
+    } else {
+      atRule.remove();
+    }
+  });
+});
+```
 
-    const { buildComparator } = require('postcss-params');
-    postcss.plugin('my-plugin', (configuration) => (root) => {
-      root.walkAtRules('my-plugin', (atRule) => {
-        const comparator = buildComparator(atRule.params);
-        if (comparator(configuration)) {
-          atRule.replaceWith(atRule.nodes);
-        } else {
-          atRule.remove();
-        }
-      });
-    });
-
-Running postcss with various configuration objects will result in css assets
+Running PostCSS with various configuration objects will result in css assets
 suitable for separate intended audiences. For example, you may serve a different font-family in China, but not want to load this asset for all countries.
 
 `configuration` is provided to PostCSS through your build tool.
 
 Example configuration:
-
-    {
-      debug:  true,
-      region: "us",
-      theme:  "blue"
-    }
+```js
+{
+  debug:  true,
+  region: "us",
+  theme:  "blue"
+}
+```
 
 ---
 
@@ -93,49 +98,54 @@ Example configuration:
 `buildAst` gives you finer control and access to the params written in css.
 
 Given this simple rule:
-
-    @my-plugin (theme: red) {
-      body {
-        background-color: theme-color;
-      }
-    }
+```scss
+@my-plugin (theme: red) {
+  body {
+    background-color: theme-color;
+  }
+}
+```
 
 and this plugin:
-
-    const { buildAst } = require('postcss-params');
-    postcss.plugin('my-plugin', (configuration) => (root) => {
-      root.walkAtRules('my-plugin', (atRule) => {
-        const ast = buildAst(atRule.params);
-        console.log(ast);
-      });
-    });
+```js
+const { buildAst } = require('postcss-params');
+postcss.plugin('my-plugin', (configuration) => (root) => {
+  root.walkAtRules('my-plugin', (atRule) => {
+    const ast = buildAst(atRule.params);
+    console.log(ast);
+  });
+});
+```
 
 This AST is generated:
-
-    { feature: "theme", value: "red" }
+```js
+{ feature: "theme", value: "red" }
+```
 
 ---
 
 Given this more complicated rule:
-
-    @my-plugin (debug),
-               (region: cn) and (theme: red),
-               (region: us) and (theme: blue),
-               not (production) and (staging) {
-      body {
-        background-color: red;
-      }
-    }
+```scss
+@my-plugin (debug),
+           (region: cn) and (theme: red),
+           (region: us) and (theme: blue),
+           not (production) and (staging) {
+  body {
+    background-color: red;
+  }
+}
+```
 
 Plugin:
-
-    const { buildAst } = require('postcss-params');
-    postcss.plugin('my-plugin', (configuration) => (root) => {
-      root.walkAtRules('my-plugin', (atRule) => {
-        const ast = buildAst(atRule.params);
-        console.log(ast);
-      });
-    });
+```js
+const { buildAst } = require('postcss-params');
+postcss.plugin('my-plugin', (configuration) => (root) => {
+  root.walkAtRules('my-plugin', (atRule) => {
+    const ast = buildAst(atRule.params);
+    console.log(ast);
+  });
+});
+```
 
 This AST is generated:
 
@@ -176,14 +186,16 @@ nodes in this tree:
 
   Given this contrived rule:
 
-      @my-plugin (debug),
-                 (region: cn) and (theme: red),
-                 (region: us) and (theme: blue),
-                 not (production) and (staging) {
-        body {
-          background-color: red;
-        }
-      }
+```scss
+@my-plugin (debug),
+           (region: cn) and (theme: red),
+           (region: us) and (theme: blue),
+           not (production) and (staging) {
+  body {
+    background-color: red;
+  }
+}
+```
 
 This AST is generated: