Update doc

Author: ota-meshi

docs/rules/prefer-style-directive.md

@@ -20,6 +20,7 @@ Style directive were added in Svelte v3.46.
 
 <ESLintCodeBlock fix>
 
+<!-- prettier-ignore-start -->
 <!--eslint-skip-->
 
 ```svelte
@@ -30,11 +31,25 @@ Style directive were added in Svelte v3.46.
 
 <!-- ✓ GOOD -->
 <div style:color={color}>...</div>
+<div
+  style:position="absolute"
+  style:top={position === "absolute" ? "20px" : null}
+  style:pointer-events={pointerEvents ? null : "none"}
+/>
 
 <!-- ✗ BAD -->
 <div style="color: {color};">...</div>
+<div
+  style="
+    position: {position};
+    {position === 'absolute' ? 'top: 20px;' : ''}
+    {pointerEvents === false ? 'pointer-events:none;' : ''}
+  "
+/>
 ```
 
+<!-- prettier-ignore-end -->
+
 </ESLintCodeBlock>
 
 You cannot enforce this style by using [prettier-plugin-svelte]. That is, this rule does not conflict with [prettier-plugin-svelte] and can be used with [prettier-plugin-svelte].