add section for callouts, mdx, md, code blocks and import files

Author: Kevin Zuniga Cuellar

docs/tutorialkit.dev/src/content/docs/guides/creating-content.mdx

@@ -145,9 +145,52 @@ src/templates
     └── index.js
 ```
 
-## Importing files
+## Markdown and MDX Support
 
-You can import files from your code template, `_files` and `_solution` folder using the `file` or `solution` shortcode. This shortcode inserts the content of the specified file directly into your lesson content.
+TutorialKit comes with built-in support for both Markdown and MDX, powered by Astro. This means you can leverage all Markdown and MDX features when creating lesson content. To explore the full capabilities, check out Astro's [Markdown support](https://docs.astro.build/en/guides/markdown-content/) and [MDX support](https://docs.astro.build/en/guides/integrations-guide/mdx/) documentation for more details.
+
+### Callouts
+
+Callouts are visual elements designed to highlight specific information or provide additional context within a document or user interface. They are ideal for drawing attention to important tips, warnings, and other key messages.
+
+```
+:::tip
+Remember to save your work frequently to avoid losing any changes.
+:::
+```
+
+:::tip
+Remember to save your work frequently to avoid losing any changes.
+:::
+
+
+### Code blocks
+
+TutorialKit offers a comprehensive set of code block features powered by Expressive Code. It includes all core features, along with optional plugins like collapsible sections and line numbers. For a full overview, check out the [Expressive Code documentation](https://expressive-code.com/).
+
+````txt
+```js title="code.js" ins={4} del={5} {6} "greeting"
+const greeting = 'Hello, World!';
+
+// This is a comment
+const added = 'This line was added';
+const removed = 'This line was removed';
+const highlighted = 'This line is highlighted';
+```
+````
+
+```js title="code.js" ins={4} del={5} {6} "greeting"
+const greeting = 'Hello, World!';
+
+// This is a comment
+const added = 'This line was added';
+const removed = 'This line was removed';
+const highlighted = 'This line is highlighted';
+```
+
+#### 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.
 
 - `file` shortcode is used to reference files from the lesson `_files` or code template folder.
 - `solution` shortcode is used to reference files from the lesson `_solution` folder.