Update markdown.mdx based on issue #242

Author: kgowru

fern/products/docs/pages/writing-content/markdown.mdx

@@ -0,0 +1,102 @@
+# Markdown Basics
+
+Markdown is a lightweight markup language that helps you create formatted text using a plain-text editor. Learn how to use Markdown to write content for your Fern documentation.
+
+## Basic Syntax
+
+### Text Formatting
+```md
+**bold text**
+*italic text*
+~~strikethrough text~~
+```
+
+### Lists
+```md
+- Unordered list item
+- Another item
+  - Nested item
+
+1. Ordered list item
+2. Another item
+   1. Nested item
+```
+
+### Links
+```md
+[Link text](url)
+```
+
+### Images
+```md
+![Alt text](path/to/image.png)
+```
+
+To prevent an image from being zoomable, use the `noZoom` attribute:
+```md
+<img src="path/to/image.png" alt="Alt text" noZoom />
+```
+
+### Code Blocks
+````md
+```javascript
+const hello = "world";
+console.log(hello);
+```
+````
+
+### Tables
+```md
+| Header 1 | Header 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+```
+
+### Headings
+```md
+# Heading 1
+## Heading 2
+### Heading 3
+```
+
+## Component Usage
+
+### Tabs
+```md
+<Tabs>
+  <Tab title="JavaScript">
+    JavaScript content
+  </Tab>
+  <Tab title="Python">
+    Python content
+  </Tab>
+</Tabs>
+```
+
+### Callouts
+```md
+<Info>
+  Important information for users
+</Info>
+
+<Warning>
+  Critical warning message
+</Warning>
+```
+
+### Cards
+```md
+<Cards>
+  <Card title="Getting Started" href="/getting-started">
+    Begin your journey with Fern
+  </Card>
+</Cards>
+```
+
+## Advanced Tips
+
+- Use relative links when linking to other documentation pages
+- Keep paragraphs concise and focused
+- Include code examples when explaining technical concepts
+- Use headers to organize content logically
+- Leverage Fern components for enhanced formatting