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

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com> Co-authored-by: Elian ☕️ <hello@elian.codes>
2023-08-10 00:20:25 +05:30 · 2023-08-10 00:20:25 +05:30 · e2b1b4fa6e
commit e2b1b4fa6e
parent 79376f842d
1 changed files with 113 additions and 6 deletions
--- 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