More markdown examples

docs/src/routes/docs/markdown/+page.md

@@ -1,6 +1,10 @@
 # Docs features
 
-## Syntax highlighting
+## Syntax highlighting inline code
+
+:::note
+Supported props: `title`, `live`, `diff`, `showLineNumbers`, Line highlighting `{12,15-16}` (see below for individual examples)
+:::
 
 ````md
 ```svelte
@@ -43,7 +47,6 @@
 ### Diff
 
 ````md
-<!-- prettier-ignore -->
 ```svelte diff
 <script lang="ts">
   let { data } = $props();
@@ -54,7 +57,6 @@
 ```
 ````
 
-<!-- prettier-ignore -->
 ```svelte diff
 <script lang="ts">
   let { data } = $props();
@@ -67,7 +69,6 @@
 ### Line highlighting
 
 ````md
-<!-- prettier-ignore -->
 ```svelte {2,5-7}
 <script lang="ts">
 	let { data } = $props();
@@ -79,7 +80,6 @@
 ```
 ````
 
-<!-- prettier-ignore -->
 ```svelte {2,5-7}
 <script lang="ts">
 	let { data } = $props();
@@ -112,9 +112,8 @@
 
 ### Live Code
 
-```md
-``svelte live title="Counter.svelte"
-
+````md
+```svelte live title="Counter.svelte" 
 <script>
 	let count = $state(0);
 </script>
@@ -124,6 +123,7 @@ Clicked {count}
 {count === 1 ? 'time' : 'times'}
 </button>
 ```
+````
 
 ```svelte live title="Counter.svelte"
 <script>
@@ -147,73 +147,97 @@ Clicked {count}
 </style>
 ```
 
-### Example
+### Example - via Component References
+
+:::note
+Supported props w/defaults
+	path:string,
+	component:string,
+	name:string,
+	showCode=false,
+	noResize=false,
+	clip=false,
+	variant:'default' | 'basic',
+	highlight:string (ie "7", "7-9")
+	class:string
+:::
 
 ```md
-:example{component="LineChart" name="basic" showCode=true}
+:example{component="LineChart" name="basic" hightlight="9" showCode}
 ```
 
-:example{component="LineChart" name="basic" showCode=true}
+:example{component="LineChart" name="basic" highlight="9" showCode}
 
 ## Table
 
+:::note
+`:---` makes a column left-aligned, 
+​`---:` makes it right-aligned,
+​`:---:` makes it center-aligned.
+:::
+
 ```md
 | First | Second | Third |
-| ----- | ------ | ----- |
-| 1     | 2      | 3     |
-| 4     | 5      | 6     |
+| :---- | :----: | ----: |
+| 1     |   2    |     3 |
+| 4     |   5    |     6 |
 ```
 
 | First | Second | Third |
-| ----- | ------ | ----- |
-| 1     | 2      | 3     |
-| 4     | 5      | 6     |
+| :---- | :----: | ----: |
+| 1     |   2    |     3 |
+| 4     |   5    |     6 |
 
 ## Directives
 
 ### Note
 
-```md
+````md
+> Basic
+````
+> Basic
+
+````md
 :::note
 Here's some additional information. This uses the new `:::note` directive syntax!
 :::
-```
+````
 
 :::note
 Here's some additional information. This uses the new `:::note` directive syntax!
 :::
 
 ### Tip
 
-```md
+````md
 :::tip
 Here's a helpful suggestion using the `:::tip` directive.
 :::
-```
+````
 
 :::tip
 Here's a helpful suggestion using the `:::tip` directive.
 :::
 
 ### Warning
 
-```md
+````md
 :::warning
 Be careful with this action as it might have unexpected results. This uses `:::warning`.
 :::
-```
+````
 
 :::warning
 Be careful with this action as it might have unexpected results. This uses `:::warning`.
 :::
 
 ### Caution
 
-```md
+````md
 :::caution
 This action cannot be undone. This uses `:::caution`.
 :::
-```
+````
 
 :::caution
 This action cannot be undone. This uses `:::caution`.
@@ -236,8 +260,6 @@ npm install layerchart
 
 Do something else
 
-## ???
-
 ## Profit!
 
 Start using `::component` and `:::component` syntax in your markdown files!
@@ -258,15 +280,17 @@ npm install layerchart
 
 Do something else
 
-## ???
-
 ## Profit!
 
 Start using `::component` and `:::component` syntax in your markdown files!
 :::
 
 ### Tabs
 
+:::tip
+`:::tabs{key="package-manager"}` allow for 2 separate tabs implementations to keep inidvidual tabs linked (ie user picks `pnpm` tab, and others with same key stay linked.) 
+:::
+
 ````md
 :::tabs
 
@@ -328,6 +352,35 @@ print('Hello from Python')
 :::
 
 ## Tabs with live code
+````md
+::tabs
+
+:::tab{label="A"}
+
+```svelte live
+<script>
+	let a = 10;
+</script>
+
+{a}
+```
+
+:::
+
+:::tab{label="B"}
+
+```svelte live
+<script>
+	let b = 20;
+</script>
+
+{b}
+```
+
+:::
+
+::
+````
 
 ::tabs
 
@@ -359,12 +412,64 @@ print('Hello from Python')
 
 ### Icons (Inline)
 
+You can also use icons inline with the `:icon` directive:
+
+:::note
+Icons support both formats: `collection:name` (like `lucide:code`) or `i-collection-name` (like `i-lucide-code`).
+:::
+
 ```md
-Here's a :icon{name="lucide:code" class="text-primary"} code icon, a :icon{name="lucide:rocket" class="text-green-500"} rocket, and a :icon{name="simple-icons:github"} GitHub logo.
+Here's a :icon{name="lucide:code" class="text-primary"} code icon, 
+a :icon{name="i-lucide-rocket" class="text-green-500"} rocket, and 
+a :icon{name="simple-icons:github"} GitHub logo.
 ```
 
-You can also use icons inline with the `:icon` directive:
+Here's a :icon{name="lucide:code" class="text-primary"} code icon,a :icon{name="i-lucide-rocket" class="text-green-500"} rocket, and a :icon{name="simple-icons:github"} GitHub logo.
 
-Here's a :icon{name="lucide:code" class="text-primary"} code icon,a :icon{name="lucide:rocket" class="text-green-500"} rocket, and a :icon{name="simple-icons:github"} GitHub logo.
+### Links
 
-Icons support both formats: `collection:name` (like `lucide:code`) or `i-collection-name` (like `i-lucide-code`).
+#### On domain
+
+:::note
+opens same tab, no arrow icon
+:::
+
+````md
+[Getting Started](/docs/getting-started)
+````
+
+[Getting Started](/docs/getting-started)
+
+### External
+
+:::note
+opens new tab, note arrow icon
+:::
+
+````md
+[LayerStack](https://www.layerstack.com)
+````
+
+[LayerStack](https://www.layerstack.com)
+
+### Internal (Hash-links or Fragment links)
+
+:::note
+Hash-links in `md` files are auto-created from headers. Reference via lowercase and kebab-case
+:::
+
+````md
+# Docs Features
+...
+[Top](#docs-features)
+````
+
+[Top](#docs-features)
+
+also can manually add hash icon
+
+````md
+[:icon{name="lucide:hash"}Top](#docs-features)
+````
+
+[:icon{name="lucide:hash"}Top](#docs-features)