docs(mdc): fix {attribute} examples (#2228)

nuxt · Aug 23, 2023 · 71ed34f · 71ed34f
1 parent 2e5c7f7
commit 71ed34f
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/docs/content/3.guide/1.writing/3.mdc.md b/docs/content/3.guide/1.writing/3.mdc.md
@@ -308,44 +308,46 @@ To create inline spans in your text you can use the `[]` identifier.
 
 ::code-group
   ```md [Code]
-  Hello [World]{.bg-blue-500}!
+  Hello [World]{style="background-color: var(--color-primary-500)"}!
   ```
 
   ::code-block{label="Preview"}
-  Hello [World]{.bg-primary-500}!
+  Hello [World]{style="background-color: var(--color-primary-500)"}!
   ::
 ::
 
 ## Attributes
 
 Attributes are useful for highlighting and modifying part of paragraph. The syntax is nearly similar to inline components and markdown links syntax.
 
+Possible values are all named attributes, classes with the notation `.class-name` and an ID with `#id-name`.
+
 ::code-group
   ```md [Code]
-  Hello [World]{.text-primary-500}!
+  Hello [World]{style="color: var(--color-primary-500)" .custom-class #custom-id}!
   ```
 
   ::code-block{label="Preview"}
-  Hello [World]{.text-primary-500}!
+  Hello [World]{style="color: var(--color-primary-500)" .custom-class #custom-id}!
   ::
 ::
 
-Other than `spans` the attribute syntax will work on images, links, `code`, **bold** and _italic_ texts.
+In addition to mdc components and `spans`, attribute syntax will work on images, links, inline `code`, **bold** and _italic_ text.
 
 ::code-group
   ```md [Code]
-  Attributes works on:
+  Attributes work on:
 
-  - ![](/icon.png){.inline.m-0.bg-primary-800} image,
-  - [link](#attributes){.bg-primary-400}, `code`{.text-red-500},
-  - _italic_{.bg-primary-500} and **bold**{.bg-primary-500} texts.
+  - ![](/favicon.ico){style="display: inline; margin: 0; background-color: var(--color-primary-800);"} image,
+  - [link](#attributes){style="background-color: var(--color-primary-400);"}, `code`{style="color: var(--color-primary-500);"},
+  - _italic_{style="background-color: var(--color-primary-500);"} and **bold**{style="background-color: var(--color-primary-500);"} texts.
   ```
 
   ::code-block{label="Preview"}
-  Attributes works on:
+  Attributes work on:
 
   - ![](/favicon.ico){style="display: inline; margin: 0; background-color: var(--color-primary-800);"} image,
-  - [link](#attributes){style="background-color: var(--color-primary-400);"}, `code`{style="color: var(--color-red-500);"},
+  - [link](#attributes){style="background-color: var(--color-primary-400);"}, `code`{style="color: var(--color-primary-500);"},
   - _italic_{style="background-color: var(--color-primary-500);"} and **bold**{style="background-color: var(--color-primary-500);"} texts.
   ::
 ::