From 75e9d047d150936f0f18cc608c306dbab78faeb6 Mon Sep 17 00:00:00 2001
From: Noam Honig <noam.honig@gmail.com>
Date: Wed, 23 Oct 2024 13:43:00 +0300
Subject: [PATCH 1/2] Enhance documentation with detailed Expressive Code
 attributes and examples

---
 .../content/docs/guides/creating-content.mdx  | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx
index e059d4ac8..07240beec 100644
--- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx
@@ -192,6 +192,41 @@ const removed = 'This line was removed';
 const highlighted = 'This line is highlighted';
 ```
 
+#### Useful Expressive Code Attributes
+
+- **`title`** - Sets the title of the code block.
+- **`frame`** - Defines the frame of the code block. Options: `"code"`, `"terminal"`, `"none"`, `"auto"`.
+- **`showLineNumbers`** - Displays line numbers. You can combine this with `startLineNumber=#` to begin numbering from a specific line.
+- **`wrap`** - Controls word wrapping. Use `preserveIndent` and `preserveIndent=false` to adjust indentation handling.
+
+##### Marking Lines
+
+- **`{x}`** - Marks specific lines. For example, `{6,10-18}` will mark lines 6 and 10 through 18.
+- **`ins`** - Marks inserted lines. Example: `ins={6,10-18}`.
+- **`del`** - Marks deleted lines. Example: `del={6,10-18}`.
+- **`{"Label":x}`** - Assigns a label to a line or range of lines. Works with `mark`, `ins`, and `del`. Example: `{"Label1":5} del={"Label2":7-8} ins={"Label3":10-12}`. If the label is long, consider placing an empty line in the code for better readability.
+- **`collapse={X-Y}`** - Collapses the specified lines. Example: `collapse={1-5,12-14}`.
+
+##### Marking Text
+
+You can highlight text using strings or regular expressions. For example:
+
+````md
+```jsx "hello" /ye[sp]/ add=/add[12]/ del=/remove[12]/
+console.log(
+  'Hello, the words yes and yep will be marked. Also add1, add2, remove1, remove2',
+)
+```
+````
+
+```jsx "hello" /ye[sp]/ add=/add[12]/ del=/remove[12]/
+console.log(
+  'Hello, the words yes and yep will be marked. Also add1, add2, remove1, remove2',
+)
+```
+
+
+
 #### Importing files
 
 In addition to Expressive Code features, you can import files from your code template `_files` and `_solution` folders using the file or solution shortcodes. These shortcodes insert the content of the specified file directly into your lesson content.

From 2412446dc5c43c51e85e1572140fdb7fc6230329 Mon Sep 17 00:00:00 2001
From: Noam Honig <noam.honig@gmail.com>
Date: Thu, 24 Oct 2024 13:03:01 +0300
Subject: [PATCH 2/2] Update
 docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Ari Perkkiö <ari.perkkio@gmail.com>
---
 .../src/content/docs/guides/creating-content.mdx                | 2 --
 1 file changed, 2 deletions(-)

diff --git a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx
index 07240beec..958c3feed 100644
--- a/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx
+++ b/docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx
@@ -225,8 +225,6 @@ console.log(
 )
 ```
 
-
-
 #### Importing files
 
 In addition to Expressive Code features, you can import files from your code template `_files` and `_solution` folders using the file or solution shortcodes. These shortcodes insert the content of the specified file directly into your lesson content.