UI: Support Shiki focus notation transformer by default

.changeset/tricky-trams-work.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-core': patch
+'fumadocs-ui': patch
+---
+
+Support Shiki focus notation transformer by default

apps/docs/content/docs/ui/markdown/index.mdx

@@ -12,7 +12,7 @@ Fumadocs provides many useful extensions to MDX, a markup language. Here is a br
 ## MDX
 
 We recommend MDX, a superset of Markdown with JSX syntax.
-It allows you to import components, and use them right in the document, or even export values.
+It allows you to import components, and use them in the document, or even writing JavaScript.
 
 See:
 
@@ -54,14 +54,8 @@ Hello World, **Bold**, _Italic_, ~~Hidden~~
 | Hello | World       |
 ```
 
-### Images
-
 Images are automatically optimized for `next/image`.
 
-```mdx
-![Image](/image.png)
-```
-
 ### Auto Links
 
 Internal links use the `next/link` component to allow prefetching and avoid hard-reload.
@@ -213,22 +207,20 @@ console.log('Hello World');
 
 #### Line Numbers
 
-````mdx tab="Input"
-```js lineNumbers
-function main() {
-  console.log('Hello World');
+Show line numbers, it also works with Twoslash and other transformers.
 
-  return 0;
-}
+````mdx tab="Input"
+```ts twoslash lineNumbers
+const a = 'Hello World';
+//    ^?
+console.log(a); // [!code highlight]
 ```
 ````
 
-```js lineNumbers tab="Output"
-function main() {
-  console.log('Hello World');
-
-  return 0;
-}
+```ts twoslash lineNumbers tab="Output"
+const a = 'Hello World';
+//    ^?
+console.log(a); // [!code highlight]
 ```
 
 You can set the initial value of line numbers.
@@ -251,18 +243,6 @@ function main() {
 }
 ```
 
-It also works with Twoslash and other transformers.
-
-```tsx twoslash lineNumbers
-function main() {
-  const a = '';
-  //    ^?
-  console.log('Hello World'); // [!code highlight]
-
-  return 0;
-}
-```
-
 #### Shiki Transformers
 
 We support some of the [Shiki Transformers](https://shiki.style/packages/transformers), allowing you to highlight/style specific lines.
@@ -270,7 +250,7 @@ We support some of the [Shiki Transformers](https://shiki.style/packages/transfo
 ````md tab="Input"
 ```tsx
 // highlight a line
-<div>Hello World</div>  // [\!code highlight]
+<div>Hello World</div> // [\!code highlight]
 
 // highlight a word
 // [\!code word:Fumadocs]
@@ -279,12 +259,15 @@ We support some of the [Shiki Transformers](https://shiki.style/packages/transfo
 // diff styles
 console.log('hewwo'); // [\!code --]
 console.log('hello'); // [\!code ++]
+
+// focus
+return new ResizeObserver(() => {}) // [\!code focus]
 ```
 ````
 
 ```tsx tab="Output"
 // highlight a line
-<div>Hello World</div>  // [!code highlight]
+<div>Hello World</div> // [!code highlight]
 
 // highlight a word
 // [!code word:Fumadocs]
@@ -293,6 +276,9 @@ console.log('hello'); // [\!code ++]
 // diff styles:
 console.log('hewwo'); // [!code --]
 console.log('hello'); // [!code ++]
+
+// focus
+return new ResizeObserver(() => {}) // [!code focus]
 ```
 
 #### Tab Groups

packages/core/src/mdx-plugins/rehype-code.ts

@@ -3,6 +3,7 @@ import type { RehypeShikiOptions } from '@shikijs/rehype';
 import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
 import {
   transformerNotationDiff,
+  transformerNotationFocus,
   transformerNotationHighlight,
   transformerNotationWordHighlight,
 } from '@shikijs/transformers';
@@ -71,6 +72,9 @@ export const rehypeCodeDefaultOptions: RehypeCodeOptions = {
     transformerNotationDiff({
       matchAlgorithm: 'v3',
     }),
+    transformerNotationFocus({
+      matchAlgorithm: 'v3',
+    }),
   ],
   parseMetaString(meta) {
     const map: Meta = {};

packages/ui/css/shiki.css

@@ -9,6 +9,15 @@
     @apply relative;
   }
 
+  &.has-focused code .line:not(.focused) {
+    filter: blur(2px);
+    transition: filter 200ms;
+  }
+
+  &.has-focused:hover code .line:not(.focused) {
+    filter: blur(0);
+  }
+
   &[data-line-numbers] code .twoslash-meta-line {
     @apply ml-7;
   }
@@ -54,16 +63,8 @@
   }
 
   .highlighted-word {
-    padding: 1px 2px;
-    margin: -1px -3px;
-    border: 1px solid
-      color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
-    background-color: color-mix(
-      in oklab,
-      var(--color-fd-primary) 10%,
-      transparent
-    );
-    border-radius: 2px;
+    padding: 1px;
+    @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
   }
 }