fix: fixed word-wrap styles & transformers + docs

Author: pheralb

apps/website/src/docs/shiki/word-wrap.mdx

@@ -16,6 +16,10 @@ category: [Shiki, Markdown, MDX]
 
 <ShowSource component="shiki-word-wrap" />
 
+`shiki-word-wrap` styles are defined in the `shiki.css` file:
+
+<DocCard folder="shiki" document="highlighter" anchor="styles" />
+
 2. Import the transformer in your `rehypeShiki` plugin:
 
 ```ts title="Rehype Shiki Options"

apps/website/src/styles/shiki.css

@@ -24,6 +24,20 @@ pre.shiki span.line {
   @apply px-4 py-0.5;
 }
 
+/* Shiki Word Wrap */
+pre.shiki-word-wrap {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+pre.shiki-word-wrap span.line {
+  display: inline-block;
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: 0.2px;
+  padding-bottom: 0.2px;
+}
+
 /* Shiki Line Numbers */
 pre.shiki-line-numbers code {
   counter-reset: step;

apps/website/src/utils/shiki/transformers/word-wrap.ts

@@ -4,9 +4,10 @@ const wordWrapContent = (): ShikiTransformer => {
   return {
     name: "WordWrap",
     pre(node) {
-      node.properties.style = "white-space: pre-wrap;";
+      const shikiStyles = node.properties.class;
+      node.properties.class = `${shikiStyles} shiki-word-wrap`;
     },
   };
 };
 
-export { wordWrapContent };
+export { wordWrapContent };