From b197d20c0be29be4e60e5311db64c097a6d6ae09 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 26 Aug 2024 20:44:16 +0200
Subject: [PATCH] fix: better code docs

---
 docs/getting-started/authoring.mdx | 84 ++++++++++++++++++++++++++----
 1 file changed, 74 insertions(+), 10 deletions(-)

diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
index e7a46754..8080e236 100644
--- a/docs/getting-started/authoring.mdx
+++ b/docs/getting-started/authoring.mdx
@@ -71,22 +71,84 @@ title: Authoring
 
 #### Code
 
-Some hidden features:
+Line numbers/highlights are supported:
 
-```tsx {1,3-4} showLineNumbers
-It is possible to display lines of code: use the `showLineNumbers`
+````md
+```tsx {1,4-6} showLineNumbers
+type Props = {who: string}
 
-You can also highlight some lines:
-here {1,3-4}
+function Hi({who}: Props) {
+  return (
+    <p>Hello, {who}!</p>
+  )
+}
 ```
-```tsx {3} showLineNumbers=150
-You can start at `showLineNumbers=150`
+````
+
+<details>
+  <summary>Result</summary>
+
+```tsx {1,4-6} showLineNumbers
+type Props = {who: string}
 
-still highlighting lines
-here {3}
+function Hi({who}: Props) {
+  return (
+    <p>Hello, {who}!</p>
+  )
+}
 ```
 
-ins/del `diff` supported too:
+</details>
+
+You can start at a specific `X` line number `showLineNumbers=X`:
+
+````md
+```tsx {1,4-6} showLineNumbers=150
+type Props = {who: string}
+
+function Hi({who}: Props) {
+  return (
+    <p>Hello, {who}!</p>
+  )
+}
+```
+````
+
+<details>
+  <summary>Result</summary>
+
+```tsx {1,4-6} showLineNumbers=150
+type Props = {who: string}
+
+function Hi({who}: Props) {
+  return (
+    <p>Hello, {who}!</p>
+  )
+}
+```
+
+</details>
+
+`diff` format is supported:
+
+````md
+```diff
+diff --git a/example.txt b/example.txt
+index 8c3317a..47ea956 100644
+--- a/example.txt
++++ b/example.txt
+@@ -1,4 +1,4 @@
+-Hello, World!
++Hello, GitHub World!
+ Here are some changes:
+-This line will be modified.
++This line has been modified.
+ This line will stay the same.
+```
+````
+
+<details>
+  <summary>Result</summary>
 
 ```diff
 diff --git a/example.txt b/example.txt
@@ -102,6 +164,8 @@ index 8c3317a..47ea956 100644
  This line will stay the same.
 ```
 
+</details>
+
 #### `Grid`
 
 Responsive grid.