fixed image path and add markdown syntax in example (#7802)

Co-authored-by: Emanuele Stoppa <[email protected]> Co-authored-by: Elian ☕️ <[email protected]>
withastro · Aug 9, 2023 · e2b1b4f · e2b1b4f
1 parent 79376f8
commit e2b1b4f
Showing 1 changed file with 113 additions and 6 deletions.
diff --git a/examples/blog/src/content/blog/markdown-style-guide.md b/examples/blog/src/content/blog/markdown-style-guide.md
@@ -31,18 +31,44 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 ## Images
 
-![This is a placeholder image description](/blog-placeholder-1.jpg)
+#### Syntax
+
+```markdown
+![Alt text](./full/or/relative/path/of/image)
+```
+
+#### Output
+
+![blog placeholder](../../../public/blog-placeholder-about.jpg)
 
 ## Blockquotes
 
 The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
 
-#### Blockquote without attribution
+### Blockquote without attribution
+
+#### Syntax
+
+```markdown
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.  
+> **Note** that you can use _Markdown syntax_ within a blockquote.
+```
+
+#### Output
 
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.  
 > **Note** that you can use _Markdown syntax_ within a blockquote.
 
-#### Blockquote with attribution
+### Blockquote with attribution
+
+#### Syntax
+
+```markdown
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+```
+
+#### Output
 
 > Don't communicate by sharing memory, share memory by communicating.<br>
 > — <cite>Rob Pike[^1]</cite>
@@ -51,12 +77,43 @@ The blockquote element represents content that is quoted from another source, op
 
 ## Tables
 
+#### Syntax
+
+```markdown
+| Italics   | Bold     | Code   |
+| --------- | -------- | ------ |
+| _italics_ | **bold** | `code` |
+
+```
+
+#### Output
+
 | Italics   | Bold     | Code   |
 | --------- | -------- | ------ |
 | _italics_ | **bold** | `code` |
 
 ## Code Blocks
 
+#### Syntax
+
+we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash
+
+````markdown
+  ```html
+     <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <title>Example HTML5 Document</title>
+        </head>
+        <body>
+          <p>Test</p>
+        </body>
+      </html>
+  ```
+````
+Output
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -72,19 +129,53 @@ The blockquote element represents content that is quoted from another source, op
 
 ## List Types
 
-#### Ordered List
+### Ordered List
+
+#### Syntax
+
+```markdown
+1. First item
+2. Second item
+3. Third item
+```
+
+#### Output
 
 1. First item
 2. Second item
 3. Third item
 
-#### Unordered List
+### Unordered List
+
+#### Syntax
+
+```markdown
+- List item
+- Another item
+- And another item
+```
+
+#### Output
 
 - List item
 - Another item
 - And another item
 
-#### Nested list
+### Nested list
+
+#### Syntax
+
+```markdown
+- Fruit
+  - Apple
+  - Orange
+  - Banana
+- Dairy
+  - Milk
+  - Cheese
+```
+
+#### Output
 
 - Fruit
   - Apple
@@ -96,6 +187,22 @@ The blockquote element represents content that is quoted from another source, op
 
 ## Other Elements — abbr, sub, sup, kbd, mark
 
+#### Syntax
+
+```markdown
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+```
+
+#### Output
+
 <abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
 
 H<sub>2</sub>O