docs: fix markdown style and typo (#159)

* doc: fix markdown style and typo

* chore: add newline to vscode settings

* doc: change word "css" to "CSS"

.vscode/settings.json

@@ -19,7 +19,7 @@
     "*.css": "postcss"
   },
   "eslint.workingDirectories": [
-		{ "directory": ".vitepress" }
-	],
+    { "directory": ".vitepress" }
+  ],
   "windicss.sortOnSave": false
-}
+}

features/attributify.md

@@ -3,7 +3,7 @@
 
 :warning: Attributify is not available with [svelte-windicss-preprocess](https://github.com/windicss/svelte-windicss-preprocess).
 
-With this feature, you can write windi classes in html attributes.
+With this feature, you can write windi classes in HTML attributes.
 
 > Regarding the issue of css size, the css size may be slightly increased, but under gzip compression, the impact is minimal.
 

features/dark-mode.md

@@ -78,4 +78,3 @@ export default {
   :showConfig="true"
   :enableConfig="true"
 />
-

features/shortcuts.md

@@ -70,5 +70,4 @@ export default {
   :enableConfig="true"
 />
 
-
 The utility added by this configuration can also be directly wrapped in variants, such as sm:btn. The purpose of this feature is similar to the `@apply` directive, it will merge all utilities into one style.

features/value-auto-infer.md

@@ -36,7 +36,6 @@ p-{size} -> padding: {size};
 
 <InlinePlayground :input="'p-3px\np-4rem'" :showCSS="true" :showPreview="false"/>
 
-
 ## Fractions
 
 ```less
@@ -45,7 +44,6 @@ w-{fraction} -> width: {fraction -> percent};
 
 <InlinePlayground :input="'w-9/12'" :showCSS="true" :showPreview="false"/>
 
-
 ## Colors
 
 ```css

guide/extractions.md

@@ -99,4 +99,3 @@ export default defineConfig({
   },
 })
 ```
-

integrations/cli.md

@@ -77,7 +77,7 @@ windicss './hello.html' './world.html', './src/**/*.svelte'
 
 #### Generate normal css
 
-Use the `-o` parameter to specify the name of the generated css file, and the `-t` parameter to specify whether to add preflight (basestyles).
+Use the `-o` parameter to specify the name of the generated CSS file, and the `-t` parameter to specify whether to add preflight (basestyles).
 
 ```bash
 windicss './**/*.html'
@@ -88,16 +88,16 @@ windicss './test.html' --preflight --output windi.css
 
 #### Minimize build
 
-Use `-m` or `--minify` to generate minimized css file. This parameter is mostly used for build time.
+Use `-m` or `--minify` to generate minimized CSS file. This parameter is mostly used for build time.
 
 ```bash
 windicss './**/*.html' -mto windi.min.css
 windicss './**/*.html' -to windi.css --minify
 ```
 
-#### Using compiliation mode
+#### Using compilation mode
 
-Compiliation mode will combine all windi utilities into a new class, which you can specify with `-p` or `--prefix`
+Compilation mode will combine all windi utilities into a new class, which you can specify with `-p` or `--prefix`
 
 ```bash
 windicss './**/*.html' -cto windi.css
@@ -142,7 +142,7 @@ Give an example
 
 ```html
 <button
-	bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
+  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
   text="sm white"
   font="mono light"
   p="y-2 x-4"
@@ -178,13 +178,13 @@ module.exports = {
 
 #### Dev mode
 
-Development mode will turn on hot reloading and will watch your file changes to update your css file in real time.
+Development mode will turn on hot reloading and will watch your file changes to update your CSS file in real time.
 
 ```bash
 windicss './**/*.html' -to windi.css --dev
 ```
 
-> Note: For better hotloading experience (~5ms) we don't remove built css at development time, so you are expected to rebuild it once at release time using the minimize command to get the best experience for both development and build. Such as `windicss './**/*.html' -mto windi.css`
+> Note: For better hotloading experience (~5ms) we don't remove built CSS at development time, so you are expected to rebuild it once at release time using the minimize command to get the best experience for both development and build. Such as `windicss './**/*.html' -mto windi.css`
 
 #### Fuzzy mode
 

integrations/gridsome.md

@@ -48,14 +48,14 @@ If you have a `tailwind.config.js`, please rename it to `windi.config.js` or `wi
 
 See [here](https://windicss.netlify.app/guide/configuration.html) for configuration details.
 
-
 ## Migrating
 
 If you were previously using `gridsome-plugin-tailwindcss`, please consult the [documentation](https://windicss.netlify.app/guide/migration.html) on migrating.
 
 ## Configuration
 
 - Default:
+
 ```js
 export default {
   scan: {
@@ -88,6 +88,7 @@ export default {
 #### Disable Preflight
 
 _gridsome.config.js_
+
 ```js
 export default {
   // ...

integrations/javascript.md

@@ -34,10 +34,10 @@ export function generateStyles(html) {
     .map(i => i.result)
     .join(' ')
 
-  // Generate preflight based on the html we input
+  // Generate preflight based on the HTML we input
   const preflightSheet = processor.preflight(html)
 
-  // Process the html classes to an interpreted style sheet
+  // Process the HTML classes to an interpreted style sheet
   const interpretedSheet = processor.interpret(htmlClasses).styleSheet
 
   // Build styles
@@ -63,10 +63,10 @@ export function generateStyles(html) {
   // Get windi processor
   const processor = new Processor()
 
-  // Parse html to get array of class matches with location
+  // Parse HTML to get array of class matches with location
   const parser = new HTMLParser(html)
 
-  // Generate preflight based on the html we input
+  // Generate preflight based on the HTML we input
   const preflightSheet = processor.preflight(html)
 
   const PREFIX = 'windi-'
@@ -87,7 +87,7 @@ export function generateStyles(html) {
     // append ignored classes and push to output
     outputHTML += [style.className, ...style.ignored].join(' ')
 
-    // mark the end as our new start for next itteration
+    // mark the end as our new start for next iteration
     indexStart = p.end
   })
 
@@ -123,10 +123,10 @@ export function generateStyles(html) {
   // Get windi processor
   const processor = new Processor()
 
-  // Parse html to get array of class matches with location
+  // Parse HTML to get array of class matches with location
   const parser = new HTMLParser(html)
 
-  // Generate preflight based on the html we input
+  // Generate preflight based on the HTML we input
   const preflightSheet = processor.preflight(html)
 
   // Always returns array
@@ -150,7 +150,7 @@ export function generateStyles(html) {
       // append current value to accumulator value
       acc[attrKey] = [...attrKeyValue, ...attrValue]
     } else {
-      // else add atrribute value array to accumulator
+      // else add attribute value array to accumulator
       acc[attrKey] = attrValue
     }
 

integrations/nuxt.md

@@ -234,7 +234,7 @@ export default {
 
 ## Hooks
 
-You can use the following nuxt hooks to modify the behaviour of the code.
+You can use the following nuxt hooks to modify the behavior of the code.
 
 `windicss:config`
 - Arguments: FullConfig

integrations/rollup.md

@@ -34,7 +34,7 @@ That's all.
 
 ## Configuration
 
-### Preflight (style reseting)
+### Preflight (style resetting)
 
 Preflight is enables on demanded, if you'd like to completely disable it, you can configure it as below
 
@@ -91,7 +91,7 @@ export default {
 
 ### Scanning
 
-On server start, `vite-plugin-windicss` will scan your source code and extract the utilities usages. By default, only files under `src/` with extensions `vue, html, mdx, pug, jsx, tsx` will be included. If you want to enable scaning for other file type of locations, you can configure it via:
+On server start, `vite-plugin-windicss` will scan your source code and extract the utilities usages. By default, only files under `src/` with extensions `vue, html, mdx, pug, jsx, tsx` will be included. If you want to enable scanning for other file type of locations, you can configure it via:
 
 ```js rollup.config.js
 export default {

integrations/svelte.md

@@ -293,6 +293,7 @@ Similar to preflights, this safe list need to be available anywhere you want it,
 <style windi:safelist:global>
 </style>
 ```
+
 ### Windi CSS classes
 
 By default, all inline used classes of Windi CSS will be scoped with native svelte logic. This has its advantages (you can find many discussions online).
@@ -330,6 +331,7 @@ You may have the need in your project to define custom CSS classes, and want to
 ```
 
 You can combine any of this attributes, so full style tag can look like:
+
 ```html
   <style global windi:global windi:preflights:global windi:safelist:global>
     .custom{
@@ -339,6 +341,7 @@ You can combine any of this attributes, so full style tag can look like:
 ```
 
 ### VS Code Extension
+
 Using special CSS tag syntax as well as the attributes above, will break the CSS diagnostics of VS Code. Please make sure to disable them.
 If you are using [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), add this setting to your VS Code configuration file.
 

integrations/vue-cli.md

@@ -19,7 +19,7 @@
 
 Install using Vue CLI. (Vue CLI 4+ is recommended)
 
-```
+```bash
 vue add windicss
 ```
 

integrations/webpack.md

@@ -19,7 +19,6 @@ If it's below, please use the plugin specifically built for your framework.
 | <Logo name="vue" class="inline"/> Vue CLI | [vue-cli-plugin-windicss](/integrations/vue-cli.html) |
 | <Logo name="gridsome" class="inline"/> Gridsome | [gridsome-plugin-windicss](/integrations/gridsome.html) |
 
-
 ### Second Class Framework Support
 
 Frameworks that have been successfully setup and documented to work with Windi.
@@ -63,7 +62,6 @@ export default {
 }
 ```
 
-
 #### Non ES Modules Install
 
 For webpack configurations which don't support the es module import syntax, you can try the following.
@@ -84,16 +82,17 @@ export default {
 Within an entry point file or something only loaded once, add the import.
 
 ESM
+
 ```ts main.js
 import 'windi.css'
 ```
 
 CJS
+
 ```ts main.js
 require('windi.css')
 ```
 
-
 ### Windi Config
 
 Add a file called `windi.config.ts` to your project root if you don't have it already.
@@ -168,7 +167,6 @@ export default defineConfig({
 })
 ```
 
-
 ### Layers Ordering
 
 By default, importing `windi.css` or `virtual:windi.css` will import all the three layers with the order `base - components - utilities`. If you want to have better controls over the orders, you can separate them by:
@@ -180,7 +178,7 @@ By default, importing `windi.css` or `virtual:windi.css` will import all the thr
 + import 'virtual:windi-utilities.css'
 ```
 
-You can also make your custom css be able to be overridden by certain layers:
+You can also make your custom CSS be able to be overridden by certain layers:
 
 ```diff
   import 'virtual:windi-base.css'
@@ -226,7 +224,6 @@ export default defineConfig({
 
 Note: JSX usage is experimental. Please report any issues you find.
 
-
 ### Create React App - CRACO
 
 ```js craco.config.js

plugins/community/animations.md

@@ -32,6 +32,7 @@ export default {
 ```
 
 ### Available Animate CSS classes
+
 * .animate-animated
 * .animate-infinite
 * .animate-delay

plugins/community/heropatterns.md

@@ -115,7 +115,7 @@ config = {
 }
 ```
 
-## Pattern names list:
+## Pattern names list
 
 1. anchors-away
 1. architect

plugins/index.md

@@ -2,7 +2,6 @@
 
 - [Typography](/plugins/official/typography)
 
-
 ::: tip
 Use the search bar to quickly find the utilities you need.
 :::

plugins/official/aspect-ratio.md

@@ -12,7 +12,6 @@
 | `aspect-h-${float}`  | --tw-aspect-h: `${float};`                                                                                                                                                                                                               |
 | `aspect-${fraction}` | position: 'relative';<br>paddingBottom: `${percent};`<br>'> *': {<br>&emsp;position: 'absolute';<br>&emsp;height: '100%';<br>&emsp;width: '100%';<br>&emsp;top: '0';<br>&emsp;right: '0';<br>&emsp;bottom: '0';<br>&emsp;left: '0';<br>} |
 
-
 ***
 
 `aspect-w-${float}` will add the following base styles:

plugins/transform.md

@@ -15,4 +15,4 @@ export default {
 }
 ```
 
-https://github.com/windicss/plugins
+See more plugins: https://github.com/windicss/plugins

posts/api.md

@@ -1,2 +1 @@
 # API
-