docs: update demo code

Author: akinoccc

docs/guide/advances/theming.md

@@ -16,16 +16,15 @@ the `ThemeProvider`'s scope can access this theme object.
 :::demo
 
 ```vue
-
 <script setup lang="ts">
-  import { styled, ThemeProvider } from '@vue3-styled-components/package'
+import { styled, ThemeProvider } from '@vue3-styled-components/package'
 
-  const StyledWrapper = styled.div`
-    display: flex;
-    justify-content: space-around;
-  `
+const StyledWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+`
 
-  const StyledLink = styled.a`
+const StyledLink = styled.a`
   margin-right: 8px;
   color: ${(props) => props.theme.primary} !important;
   font-weight: bold;
@@ -54,42 +53,40 @@ and see the updates reflected in your styled components.
 :::demo
 
 ```vue
-
 <script setup lang="ts">
-  import { styled, ThemeProvider } from '@vue3-styled-components/package'
-  import { ref } from 'vue'
-
-  const theme = ref<Record<string, string>>({ primary: 'blue' })
-
-  const StyledWrapper = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  `
-
-  const StyledLink = styled.a`
-    color: ${(props) => props.theme.primary} !important;
-  `
-
-  const StyledButton = styled.button`
-    width: 140px;
-    height: 36px;
-    margin-left: 20px;
-    padding: 4px 12px;
-    border-radius: 9999px;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
-    background-color: skyblue;
-    font-weight: bold;
-  `
-
-  const changeTheme = () => {
-    if (theme.value.primary === 'red') {
-      theme.value.primary = 'blue'
-    } else {
-      theme.value.primary = 'red'
-    }
-  }
+import { styled, ThemeProvider } from '@vue3-styled-components/package'
+import { ref } from 'vue'
+
+const theme = ref<Record<string, string>>({ primary: 'blue' })
 
+const StyledWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const StyledLink = styled.a`
+  color: ${(props) => props.theme.primary} !important;
+`
+
+const StyledButton = styled.button`
+  width: 140px;
+  height: 36px;
+  margin-left: 20px;
+  padding: 4px 12px;
+  border-radius: 9999px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  background-color: skyblue;
+  font-weight: bold;
+`
+
+const changeTheme = () => {
+  if (theme.value.primary === 'red') {
+    theme.value.primary = 'blue'
+  } else {
+    theme.value.primary = 'red'
+  }
+}
 </script>
 
 <template>
@@ -114,16 +111,14 @@ and use properties defined in the theme for their styles.
 :::demo
 
 ```vue
-
 <script setup lang="ts">
-  import { ThemeProvider } from '@vue3-styled-components/package'
-  import { defineComponent, h, inject } from 'vue'
-
-  const Link = defineComponent(() => {
-    const theme = inject('$theme')
-    return () => h('a', { style: { color: theme.primary } }, 'This is a link')
-  })
+import { ThemeProvider } from '@vue3-styled-components/package'
+import { defineComponent, h, inject } from 'vue'
 
+const Link = defineComponent(() => {
+  const theme = inject('$theme')
+  return () => h('a', { style: { color: theme.primary } }, 'This is a link')
+})
 </script>
 
 <template>
@@ -133,4 +128,4 @@ and use properties defined in the theme for their styles.
 </template>
 ```
 
-:::
+:::

docs/guide/basic/animations.md

@@ -7,46 +7,45 @@ a styled component.
 :::demo
 
 ```vue
-
 <script setup lang="ts">
-  import { styled, keyframes } from '@vue3-styled-components/package'
-
-  const rotate = keyframes`
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  `
-  const translate = keyframes`
-    0 {
-      transform: translateX(0);
-    }
-    50% {
-      transform: translateX(250%);
-    }
-    60% {
-      transform: rotate(360deg);
-    }
-  `
-
-  const StyledBaseDiv = styled.div`
-    display: inline-block;
-    width: 100px;
-    height: 100px;
-   `
-
-  const StyledRotateDiv = styled(StyledBaseDiv)`
-    background-color: skyblue;
-    animation: ${rotate} 2s linear infinite;
-  `
-
-  const StyledTranslateDiv = styled(StyledBaseDiv)`
-    margin-left: 10px;
-    background-color: darkred;
-    animation: ${translate} 2s ease infinite alternate;
-  `
+import { styled, keyframes } from '@vue3-styled-components/package'
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+const translate = keyframes`
+  0 {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(250%);
+  }
+  60% {
+    transform: rotate(360deg);
+  }
+`
+
+const StyledBaseDiv = styled.div`
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+`
+
+const StyledRotateDiv = styled(StyledBaseDiv)`
+  background-color: skyblue;
+  animation: ${rotate} 2s linear infinite;
+`
+
+const StyledTranslateDiv = styled(StyledBaseDiv)`
+  margin-left: 10px;
+  background-color: darkred;
+  animation: ${translate} 2s ease infinite alternate;
+`
 </script>
 
 <template>
@@ -55,4 +54,4 @@ a styled component.
 </template>
 ```
 
-:::
+:::

docs/guide/basic/styling-any-component.md

@@ -42,7 +42,8 @@ const StyledLink = styled(Link)`
 
 ## Styling Styled Component
 
-You can also style styled components. For example, with `StyledLink`, using `styled` and passing styles, you can get a `blue link`.
+You can also style styled components. For example, with `StyledLink`, using `styled` and passing styles, you can get
+a `blue link`.
 
 :::demo