docs: update documentation for Shiki transformers with usage examples and style customization

Author: pheralb

apps/website/src/docs/shiki/add-properties.mdx

@@ -64,7 +64,7 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-### Properties
+## Properties
 
 ### `addTitleProperty`
 

apps/website/src/docs/shiki/line-numbers.mdx

@@ -31,9 +31,17 @@ const html = highlighter.codeToHtml(code, {
 
 <ShowSource component="shiki-show-line-numbers" />
 
-2. Import the transformer in your `rehypeShiki` plugin:
+2. Customize the styles in your CSS file if needed:
 
-```ts title="Rehype Shiki Options"
+<DocCard folder="shiki" document="highlighter" anchor="styles" />
+
+## Usage
+
+### `shikijs/rehype`
+
+1. Import the transformer in your `rehypeShiki` plugin:
+
+```ts {1,5} title="Rehype Shiki Options"
 import { showLineNumbers } from "@/utils/shiki/transformers/show-line-numbers";
 
 const rehypeShikiOptions: RehypeShikiCoreOptions = {
@@ -44,16 +52,36 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-3. Customize the styles in your CSS file if needed:
-
-<DocCard folder="shiki" document="highlighter" anchor="styles" />
-
-## Usage
-
-To enable line numbers in your code blocks, add the `lineNumbers` property to the code block in your MDX files:
+2. To enable line numbers in your code blocks, add the `lineNumbers` property to the code block in your MDX files:
 
 ````mdx title="MDX Code Block with Line Numbers"
 ```ts lineNumbers
 // Your TypeScript code here
 ```
 ````
+
+### `highlight`
+
+1. Import the transformer in your [`highlight()`](/docs/shiki/highlighter):
+
+```ts {2,8} title="Using lineNumbers with highlighter"
+import { highlight } from "@/utils/shiki";
+import { showLineNumbers } from "@/utils/shiki/transformers/show-line-numbers";
+
+const code = `console.log('hello')`;
+const highlighter = await highlight();
+const html = highlighter.codeToHtml(code, {
+  //...
+  transformers: [showLineNumbers()],
+});
+```
+
+2. Add ``shiki-line-numbers`` class to the `<pre>` element:
+
+```html
+<pre class="shiki-line-numbers">
+  <code>
+    <!-- Highlighted code lines here -->
+  </code>
+</pre>
+```

apps/website/src/docs/shiki/meta-highlight.mdx

@@ -27,7 +27,15 @@ const html = highlighter.codeToHtml(code, {
   command="@shikijs/transformers -D"
 />
 
-2. Set up `transformerMetaHighlight`:
+2. Customize the styles in your CSS file if needed:
+
+<DocCard folder="shiki" document="highlighter" anchor="styles" />
+
+## Usage
+
+### `shikijs/rehype`
+
+1. Set up `transformerMetaHighlight`:
 
 ```ts title="Shiki Notation Highlight Transformer"
 import { transformerMetaHighlight } from "@shikijs/transformers";
@@ -44,16 +52,10 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-3. Customize the styles in your CSS file if needed:
-
-<DocCard folder="shiki" document="highlighter" anchor="styles" />
-
-## Usage
-
-To highlight specific lines in your code blocks, use the `meta` prop with the line numbers you want to highlight. For example, to highlight lines 2 and 3, use the following syntax:
+2. To highlight specific lines in your code blocks, use the `meta` prop with the line numbers you want to highlight. For example, to highlight lines 2 and 3, use the following syntax:
 
 ````mdx {1}
-``` {4,5}
+```{4,5}
 const code = `console.log('hello')`;
 const highlighter = await highlight();
 const html = highlighter.codeToHtml(code, {

apps/website/src/docs/shiki/notation-diff.mdx

@@ -28,7 +28,15 @@ const html = highlighter.codeToHtml(code, {
   command="@shikijs/transformers -D"
 />
 
-2. Set up `transformerNotationDiff`:
+2. Customize the styles in your CSS file if needed:
+
+<DocCard folder="shiki" document="highlighter" anchor="styles" />
+
+## Usage
+
+### `shikijs/rehype`
+
+1. Set up `transformerNotationDiff`:
 
 ```ts title="Shiki Notation Highlight Transformer"
 import { transformerNotationDiff } from "@shikijs/transformers";
@@ -41,13 +49,7 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-3. Customize the styles in your CSS file if needed:
-
-<DocCard folder="shiki" document="highlighter" anchor="styles" />
-
-## Usage
-
-To add diff notation to your code blocks, use the `[!code ++]` and `[!code --]` markers to indicate added and removed lines, respectively:
+2. To add diff notation to your code blocks, use the `[!code ++]` and `[!code --]` markers to indicate added and removed lines, respectively:
 
 ````mdx {5,6}
 ```

apps/website/src/docs/shiki/notation-focus.mdx

@@ -27,7 +27,15 @@ const html = highlighter.codeToHtml(code, {
   command="@shikijs/transformers -D"
 />
 
-2. Set up `transformerNotationFocus`:
+2. Customize the styles in your CSS file if needed:
+
+<DocCard folder="shiki" document="highlighter" anchor="styles" />
+
+## Usage
+
+### `shikijs/rehype`
+
+1. Set up `transformerNotationFocus`:
 
 ```ts title="Shiki Notation Highlight Transformer"
 import { transformerNotationFocus } from "@shikijs/transformers";
@@ -44,13 +52,7 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-3. Customize the styles in your CSS file if needed:
-
-<DocCard folder="shiki" document="highlighter" anchor="styles" />
-
-## Usage
-
-To add diff notation to your code blocks, use the `[!code ++]` and `[!code --]` markers to indicate added and removed lines, respectively:
+2. Use the `[!code ++]` and `[!code --]` markers to indicate added and removed lines, respectively:
 
 ````mdx {3}
 ```