From f17bd16665323c8cd8b8b0b0e2085d2ea3857faf Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 28 Jul 2022 00:24:27 +0200
Subject: [PATCH] docs: update md files

---
 docs2/src/.vitepress/config.ts         | 11 +++++---
 docs2/src/.vitepress/theme/index.ts    |  1 +
 docs2/src/assets/index.css             | 32 ++---------------------
 docs2/src/assets/polygon-scatter.svg   |  1 -
 docs2/src/examples/edges/validation.md |  2 +-
 docs2/src/guide/composables.md         |  4 +--
 docs2/src/guide/edge.md                | 24 ++++++++---------
 docs2/src/guide/getting-started.md     | 10 +++----
 docs2/src/guide/node.md                | 26 +++++++++----------
 docs2/src/guide/theming.md             | 16 +++++-------
 docs2/src/guide/utils/edge.md          |  2 +-
 docs2/src/guide/utils/graph.md         |  8 +++---
 docs2/src/guide/utils/instance.md      | 14 +++++-----
 docs2/src/guide/vue-flow/config.md     | 36 +++++++++++++-------------
 docs2/src/guide/vue-flow/slots.md      |  4 +--
 docs2/src/guide/vue-flow/state.md      | 12 ++++-----
 16 files changed, 88 insertions(+), 115 deletions(-)
 delete mode 100644 docs2/src/assets/polygon-scatter.svg

diff --git a/docs2/src/.vitepress/config.ts b/docs2/src/.vitepress/config.ts
index 90a45c43..3f7ddfc7 100644
--- a/docs2/src/.vitepress/config.ts
+++ b/docs2/src/.vitepress/config.ts
@@ -1,7 +1,7 @@
 import { resolve } from 'path'
 import { readdirSync, statSync } from 'fs'
-import type { HeadConfig } from 'vitepress'
-import { DefaultTheme, defineConfigWithTheme } from 'vitepress'
+import type { DefaultTheme, HeadConfig } from 'vitepress'
+import { defineConfigWithTheme } from 'vitepress'
 import WindiCSS from 'vite-plugin-windicss'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
@@ -10,7 +10,6 @@ import AutoImport from 'unplugin-auto-import/vite'
 import { useVueFlow } from '@braks/vue-flow'
 import { copyVueFlowPlugin } from './copy-plugin'
 import head from './head'
-import SidebarGroup = DefaultTheme.SidebarGroup
 
 const { vueFlowVersion } = useVueFlow()
 
@@ -18,7 +17,7 @@ function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-const typedocSidebarEntries = (): SidebarGroup[] => {
+const typedocSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
   const filePath = resolve(__dirname, '../../typedocs')
 
   const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
@@ -101,6 +100,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
       '/guide/': [
         {
           text: 'Guide',
+          collapsible: true,
           items: [
             { text: 'Introduction', link: '/guide/' },
             { text: 'Getting Started', link: '/guide/getting-started' },
@@ -112,6 +112,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
         },
         {
           text: 'Vue Flow',
+          collapsible: true,
           items: [
             { text: 'Config / Props', link: '/guide/vue-flow/config' },
             { text: 'State', link: '/guide/vue-flow/state' },
@@ -132,6 +133,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
         },
         {
           text: 'Utilities',
+          collapsible: true,
           items: [
             { text: 'Graph', link: '/guide/utils/graph' },
             { text: 'Viewport', link: '/guide/utils/instance' },
@@ -140,6 +142,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
         },
         {
           text: 'Components',
+          collapsible: true,
           items: [
             { text: 'Background', link: '/guide/components/background' },
             { text: 'MiniMap', link: '/guide/components/minimap' },
diff --git a/docs2/src/.vitepress/theme/index.ts b/docs2/src/.vitepress/theme/index.ts
index fdea9ec0..92237c25 100644
--- a/docs2/src/.vitepress/theme/index.ts
+++ b/docs2/src/.vitepress/theme/index.ts
@@ -1,6 +1,7 @@
 import type { Theme } from 'vitepress'
 import VueAnimXyz from '@animxyz/vue3'
 import DefaultTheme from 'vitepress/theme'
+import '../../assets/index.css'
 
 const CustomTheme = {
   ...DefaultTheme,
diff --git a/docs2/src/assets/index.css b/docs2/src/assets/index.css
index 9734ccf0..22c2ac1d 100644
--- a/docs2/src/assets/index.css
+++ b/docs2/src/assets/index.css
@@ -1,32 +1,13 @@
 :root {
   --primary: #BB86FC;
   --secondary: #03dac5;
-}
-
-.dark {
-  --c-text-lighter: white !important;
-  --c-text: white !important;
-  --c-bg: black !important;
-}
-
-.dark .tip {
-  --c-bg-light: gray;
-}
-
-.tip {
-  --c-bg-light: white;
+  --vp-c-brand: #10b981;
 }
 
 html, body {
   @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
 }
 
-.home {
-  --content-width: 100%;
-  max-width: 100% !important;
-  @apply !px-0;
-}
-
 .page a {
   @apply text-green-500 font-semibold;
 }
@@ -39,14 +20,6 @@ html, body {
   --content-width: 100%;
 }
 
-.theme-default-content {
-  @apply overflow-scroll md:overflow-hidden;
-}
-
-.navbar {
-  @apply dark:bg-gray-900;
-}
-
 h1 {
   @apply text-xl lg:text-4xl mb-4 font-bold;
 }
@@ -102,10 +75,9 @@ ul li {
    }
 }
 
-.theme-container.examples .theme-default-content .vue-repl pre, .theme-default-content .vue-repl pre[class*=language-] {
+.vue-repl pre, .vue-repl pre[class*=language-] {
   padding: unset;
   margin: unset;
   border-radius: unset;
   line-height: unset;
-
 }
diff --git a/docs2/src/assets/polygon-scatter.svg b/docs2/src/assets/polygon-scatter.svg
deleted file mode 100644
index 5b07c11f..00000000
--- a/docs2/src/assets/polygon-scatter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>
\ No newline at end of file
diff --git a/docs2/src/examples/edges/validation.md b/docs2/src/examples/edges/validation.md
index c4037601..4d0f18ff 100644
--- a/docs2/src/examples/edges/validation.md
+++ b/docs2/src/examples/edges/validation.md
@@ -8,7 +8,7 @@ pageClass: examples
 Connections can be validated before edges are created and nodes get connected. 
 
 ## Using a handle in a custom node
-```vue:no-line-numbers
+```vue
 <div>
   [ ... ]
 
diff --git a/docs2/src/guide/composables.md b/docs2/src/guide/composables.md
index 3d8a8f15..094d78ef 100644
--- a/docs2/src/guide/composables.md
+++ b/docs2/src/guide/composables.md
@@ -10,7 +10,7 @@ The composition API and the power of provide/inject allows us to act more flexib
 a component tree.
 Thus accessing the internal state of Vue Flow becomes super easy when using composition.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useVueFlow, VueFlow } from '@braks/vue-flow'
 
@@ -49,7 +49,7 @@ using viewpane transforms.
 All functions can also be accessed from `useVueFlow`.
 It requires a valid Vue Flow store in its context.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useZoomPanHelper } from '@braks/vue-flow'
 
diff --git a/docs2/src/guide/edge.md b/docs2/src/guide/edge.md
index 48facf81..3183bb60 100644
--- a/docs2/src/guide/edge.md
+++ b/docs2/src/guide/edge.md
@@ -13,7 +13,7 @@ You can check the full options for an edge element in the TypeDocs [here](/typed
 
 Generally you create edges by adding them to the model-value or the edges prop of the Vue Flow component.
 
-```vue:no-line-numbers
+```vue
 <script>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -59,7 +59,7 @@ For more advanced graphs that require more state access you will want to use the
 you with an [`addEdges`](/typedocs/interfaces/Actions.html#addedges/) utility function, which you can use to add edges
 directly to the state.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
@@ -111,7 +111,7 @@ These edge types include `default` (bezier), `step`, `smoothstep` and `straight`
 
 A bezier edge has a curved path.
 
-```js:no-line-numbers
+```js
 const edges = [
   {
     id: 'e1-2',
@@ -125,7 +125,7 @@ const edges = [
 
 A step edge has a straight path with a step towards the target.
 
-```js:no-line-numbers{4}
+```js{4}
 const edges = [
   {
     id: 'e1-2',
@@ -140,7 +140,7 @@ const edges = [
 
 The same as the step edge though with a border radius on the step (rounded step).
 
-```js:no-line-numbers{4}
+```js{4}
 const edges = [
   {
     id: 'e1-2',
@@ -155,7 +155,7 @@ const edges = [
 
 A simple straight path.
 
-```js:no-line-numbers{4}
+```js{4}
 const edges = [
   {
     id: 'e1-2',
@@ -171,7 +171,7 @@ const edges = [
 In addition to the default edge types from the previous chapter, you can define any amount of custom edge-types.
 Edge-types are inferred from your edge's definition.
 
-```js:no-line-numbers{5,11}
+```js{5,11}
 const edges = [
   {
     id: 'e1-2',
@@ -195,7 +195,7 @@ The easiest way to define custom edges is, by passing them as template slots.
 Your custom edge-types are dynamically resolved to slot-names, meaning an edge with the type `custom`
 will expect a slot to have the name `edge-custom`.
 
-```vue:no-line-numbers{18,26}
+```vue{18,26}
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
@@ -239,7 +239,7 @@ turned into reactive objects.
 Otherwise, vue will throw a warning in the console.
 :::
 
-```vue:no-line-numbers{5-7,28}
+```vue{5-7,28}
 <script setup>
 import { markRaw } from 'vue'
 import CustomEdge from './CustomEdge.vue'
@@ -277,7 +277,7 @@ const elements = ref([
 You can also set a template per edge, which will overwrite the edge-type component but will retain
 the type otherwise.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { markRaw } from 'vue'
 import CustomEdge from './CustomEdge.vue'
@@ -358,7 +358,7 @@ In addition to the event handlers that you can access through [`useVueFlow`](/gu
 you can also pass in event handlers in your initial node definition, or you can access the node events through the `events` prop passed
 to your node components.
 
-```vue:no-line-numbers{19-26}
+```vue{19-26}
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -395,7 +395,7 @@ to forward callback functions to your custom components.
 The `click` handler is part of the [`EdgeEventsHandler`](/typedocs/types/EdgeEventsHandler.html) type, meaning it will be
 triggered when the edge is clicked.
 
-```vue:no-line-numbers
+```vue
 <script lang="ts" setup>
 import type { EdgeProps, EdgeEventsOn } from '@braks/vue-flow'
 
diff --git a/docs2/src/guide/getting-started.md b/docs2/src/guide/getting-started.md
index 32b64157..1cb38593 100644
--- a/docs2/src/guide/getting-started.md
+++ b/docs2/src/guide/getting-started.md
@@ -10,7 +10,7 @@
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
-```bash:no-line-numbers
+```bash
 yarn add @braks/vue-flow
 ```
 
@@ -19,7 +19,7 @@ yarn add @braks/vue-flow
 
   <CodeGroupItem title="NPM">
 
-```bash:no-line-numbers
+```bash
 npm i --save @braks/vue-flow
 ```
 
@@ -37,7 +37,7 @@ Together we call them
 A node also needs a [xy-position](/typedocs/interfaces/XYPosition.html/). An edge needs at least a
 source (node id) and a target (node id).
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow  } from '@braks/vue-flow'
 
@@ -79,14 +79,14 @@ A basic setup would look like this:
 <CodeGroup>
   <CodeGroupItem title="Composition API" active>
 
-@[code vue:no-line-numbers](../../../examples/vite/src/Basic/Basic.vue)
+@[code vue](../../../examples/vite/src/Basic/Basic.vue)
 
   </CodeGroupItem>
 
 
   <CodeGroupItem title="Options API">
 
-@[code vue:no-line-numbers](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
+@[code vue](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
 
   </CodeGroupItem>
 </CodeGroup>
diff --git a/docs2/src/guide/node.md b/docs2/src/guide/node.md
index 826e7251..938a3145 100644
--- a/docs2/src/guide/node.md
+++ b/docs2/src/guide/node.md
@@ -14,7 +14,7 @@ You can check the full options for a node element [here](/typedocs/interfaces/No
 
 Generally you create nodes by adding them to the model-value or the nodes prop of the Vue Flow component.
 
-```vue:no-line-numbers
+```vue
 <script>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -55,7 +55,7 @@ For more advanced graphs that require more state access you will want to use the
 you with an [`addNodes`](/typedocs/interfaces/Actions.html#addnodes/) utility function, which you can use to add nodes
 directly to the state.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
@@ -92,7 +92,7 @@ You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/A
 function,
 which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes.
 
-```vue:no-line-numbers{11,17-22}
+```vue{11,17-22}
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
@@ -138,7 +138,7 @@ It represents a branching point in your map.
 
 You can specify the position of handles in the node definition.
 
-```js:no-line-numbers{5-6}
+```js{5-6}
 const nodes = [
   {
     id: '1',
@@ -168,7 +168,7 @@ It represents an ending point of your map.
 In addition to the default node types from the previous chapter, you can define any amount of custom node-types.
 Node-types are inferred from your node's definition.
 
-```js:no-line-numbers{5,11}
+```js{5,11}
 const nodes = [
   {
     id: '1',
@@ -198,7 +198,7 @@ The easiest way to define custom nodes is, by passing them as template slots.
 Your custom node-types are dynamically resolved to slot-names, meaning a node with the type `custom`
 will expect a slot to have the name `node-custom`.
 
-```vue:no-line-numbers{9,16}
+```vue{9,16}
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 import CustomNode from './CustomNode.vue'
@@ -232,7 +232,7 @@ turned into reactive objects.
 Otherwise, vue will throw a warning in the console.
 :::
 
-```vue:no-line-numbers{6-9,26}
+```vue{6-9,26}
 <script setup>
 import { markRaw } from 'vue'
 import CustomNode from './CustomNode.vue'
@@ -272,7 +272,7 @@ You can find a more advanced example [here](/examples/custom-node.html/).
 You can also set a template per node, which will overwrite the node-type component but will retain
 the type otherwise.
 
-```vue:no-line-numbers{17}
+```vue{17}
 <script setup>
 import { markRaw } from 'vue'
 import CustomNode from './CustomNode.vue'
@@ -339,7 +339,7 @@ you can also pass in event handlers in your initial node definition, or you can
 the `events` prop passed
 to your node components.
 
-```vue:no-line-numbers{9-13}
+```vue{9-13}
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -368,7 +368,7 @@ The `click` handler is part of the [`NodeEventsHandler`](/typedocs/types/NodeEve
 will be
 triggered when the node is clicked.
 
-```vue:no-line-numbers
+```vue
 <script lang="ts" setup>
 import type { NodeProps, NodeEventsOn } from '@braks/vue-flow'
 
@@ -405,7 +405,7 @@ To overwrite default theme styles check the [Theming section](/guide/theming.htm
 
 When you create a new node type you also need to implement some styling. Your custom node has no default styles.
 
-```css:no-line-numbers
+```css
 .vue-flow__node-custom {
   background: #9CA8B3;
   color: #fff;
@@ -435,7 +435,7 @@ or you can emit the `updateNodeInternals` event from your custom node component
 
 - Using store action
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useVueFlow } from '@braks/vue-flow'
 
@@ -449,7 +449,7 @@ const onSomeEvent = () => {
 
 - Emitting event from custom component
 
-```vue:no-line-numbers
+```vue
 <script setup>
 const emits = defineEmits(['updateNodeInternals'])
 
diff --git a/docs2/src/guide/theming.md b/docs2/src/guide/theming.md
index 11e949e8..98773fd3 100644
--- a/docs2/src/guide/theming.md
+++ b/docs2/src/guide/theming.md
@@ -3,7 +3,7 @@
 VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e.
 the default theme) can be skipped.
 
-```css:no-line-numbers
+```css
 /* these are necessary styles for vue flow */
 @import '@braks/vue-flow/dist/style.css';
 
@@ -20,7 +20,7 @@ your own CSS rules, pass style/class properties to the components or use the ava
 
 You can customize the default theme by simply overwriting the class definitions with your own custom ones.
 
-```css:no-line-numbers
+```css
 .vue-flow {
   background: red;
 }
@@ -30,7 +30,7 @@ You can customize the default theme by simply overwriting the class definitions
 
 You can also pass a style or class attribute directly to the Vue Flow component.
 
-```vue:no-line-numbers{4}
+```vue{4}
 <div style="height: 300px">
   <VueFlow
     v-model="elements"
@@ -41,7 +41,7 @@ You can also pass a style or class attribute directly to the Vue Flow component.
 
 Nodes/Edges can also be styled with a style or class attribute.
 
-```ts:no-line-numbers{8-12,20-27}
+```ts{7-11,19-26}
 const nodes = ref<Node[]>([
   { 
     id: '1', 
@@ -87,7 +87,7 @@ These variables can either be applied globally or you can define them on an elem
 }
 ```
 
-```ts:no-line-numbers{4-5}
+```ts{4-5}
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
   
@@ -112,8 +112,6 @@ const elements = ref<Elements>([
 | --vf-handle           | Node handle color                        |
 | --vf-connection-path  | Connectionline color                     |
 
-
-
 ## Classes
 
 | Name                          | Container                                                |
@@ -126,7 +124,7 @@ const elements = ref<Elements>([
 | .vue-flow__selection          | User selection                                           |
 | .vue-flow__edges              | Edges renderer wrapper                                   |
 | .vue-flow__edge               | Edge element wrapper                                     |
-| .vue-flow__edge-{$type}       | Edge type, either a custom or default type               |
+| .vue-flow__edge-{type}        | Edge type, either a custom or default type               |
 | .vue-flow__edge .selected     | Selected Edge                                            |
 | .vue-flow__edge .animated     | Animated edge                                            |
 | .vue-flow__edge-path          | Edge element svg path                                    |
@@ -138,7 +136,7 @@ const elements = ref<Elements>([
 | .vue-flow__nodes              | Nodes renderer wrapper                                   |
 | .vue-flow__node               | Node element wrapper                                     |
 | .vue-flow__node .selected     | Selected Node                                            |
-| .vue-flow__node-{$type}       | Node type, either a custom or default type               |
+| .vue-flow__node-{type}        | Node type, either a custom or default type               |
 | .vue-flow__nodesselection     | Nodes selection rect                                     |
 | .vue-flow__handle             | Node handle element wrapper                              |
 | .vue-flow__handle-bottom      | Handle position bottom                                   |
diff --git a/docs2/src/guide/utils/edge.md b/docs2/src/guide/utils/edge.md
index be491763..c83785ef 100644
--- a/docs2/src/guide/utils/edge.md
+++ b/docs2/src/guide/utils/edge.md
@@ -2,7 +2,7 @@
 
 All default edge components are exported and can be used or extended if necessary.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 // CustomEdge.vue
 import { EdgeProps, BezierEdge } from '@braks/vue-flow'
diff --git a/docs2/src/guide/utils/graph.md b/docs2/src/guide/utils/graph.md
index 06f41452..b5144c20 100644
--- a/docs2/src/guide/utils/graph.md
+++ b/docs2/src/guide/utils/graph.md
@@ -8,7 +8,7 @@
 
 - Example:
 
-```vue:no-line-numbers{13}
+```vue{13}
 <script setup>
 import { VueFlow, isEdge } from '@braks/vue-flow'
 
@@ -42,7 +42,7 @@ const toggleClass = () => {
 
 - Example:
 
-```vue:no-line-numbers{13}
+```vue{13}
 <script setup>
 import { VueFlow, isNode } from '@braks/vue-flow'
 
@@ -81,7 +81,7 @@ of [`useVueFlow`](/guide/composables.html#usevueflow/)
 
 - Example:
 
-```vue:no-line-numbers{12}
+```vue{12}
 <script setup>
 import { VueFlow, addEdge } from '@braks/vue-flow'
 
@@ -114,7 +114,7 @@ of [`useVueFlow`](/guide/composables.html#usevueflow/)
 
 - Example:
 
-```vue:no-line-numbers{12}
+```vue{12}
 <script setup>
 import { VueFlow, updateEdge } from '@braks/vue-flow'
 
diff --git a/docs2/src/guide/utils/instance.md b/docs2/src/guide/utils/instance.md
index ef8c52a7..7b0471c1 100644
--- a/docs2/src/guide/utils/instance.md
+++ b/docs2/src/guide/utils/instance.md
@@ -11,7 +11,7 @@ instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents.html#panere
 <CodeGroup>
   <CodeGroupItem title="Composition API" active>
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'
 
@@ -27,7 +27,7 @@ onPaneReady((instance) => instance.fitView())
 
   <CodeGroupItem title="Options API">
 
-```vue:no-line-numbers
+```vue
 <script>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -64,7 +64,7 @@ export default defineComponent({
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 vueFlowInstance.project({ x: 100, y: 100 })
 ```
 
@@ -78,7 +78,7 @@ vueFlowInstance.project({ x: 100, y: 100 })
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
 ```
 
@@ -90,7 +90,7 @@ vueFlowInstance.fitView({ padding: 0.25, includeHiddenNodes: true })
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
 ```
 
@@ -102,7 +102,7 @@ vueFlowInstance.fitBounds(getRectOfNodes(nodes.value))
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
 ```
 
@@ -156,7 +156,7 @@ vueFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 })
 
 - Example:
 
-```ts:no-line-numbers
+```ts
 toObject = (): {
   elements: FlowElements,
   position: [x, y],
diff --git a/docs2/src/guide/vue-flow/config.md b/docs2/src/guide/vue-flow/config.md
index f0ba2b74..027426b8 100644
--- a/docs2/src/guide/vue-flow/config.md
+++ b/docs2/src/guide/vue-flow/config.md
@@ -7,7 +7,7 @@ as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable
 <CodeGroup>
   <CodeGroupItem title="Props" active>
 
-```vue:no-line-numbers
+```vue
 <!-- Pass configuration as props -->
 <template>
   <VueFlow :default-zoom="0.5" :max-zoom="4" :min-zoom="0.1" />
@@ -19,7 +19,7 @@ as options to the [`useVueFlow`](/guide/composables.html#usevueflow/) composable
 
   <CodeGroupItem title="Composable">
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useVueFlow  } from '@braks/vue-flow'
 
@@ -42,7 +42,7 @@ by `useVueFlow`.
 <CodeGroup>
   <CodeGroupItem title="Props" active>
 
-```vue:no-line-numbers{2,5-6,10}
+```vue{2,5-6,10}
 <script setup>
 const defaultZoom = ref(1)
 
@@ -61,7 +61,7 @@ onMounted(() => {
 
   <CodeGroupItem title="Composable">
 
-```vue:no-line-numbers{2,7-8}
+```vue{2,7-8}
 <script setup>
 const { defaultZoom } = useVueFlow({
   defaultZoom: 0.5,
@@ -101,7 +101,7 @@ onMounted(() => {
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -133,7 +133,7 @@ const elements = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -163,7 +163,7 @@ const nodes = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -198,7 +198,7 @@ const edges = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 import CustomNode from './CustomNode.vue'
@@ -235,7 +235,7 @@ const edges = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
@@ -275,7 +275,7 @@ const edges = ref([
 
 - Example:
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -496,7 +496,7 @@ const edges = ref([
 
 - Default:
 
-```ts:no-line-numbers
+```ts
 [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
@@ -557,7 +557,7 @@ const edges = ref([
 
 - Example:
 
-```vue:no-line-numbers{5-6,10}
+```vue{5-6,10}
 <script setup>
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -585,7 +585,7 @@ const elements = ref([
 
 - Example:
 
-```vue:no-line-numbers{5-6,10}
+```vue{5-6,10}
 <script setup>
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -605,7 +605,7 @@ const elements = ref([
 
 - Default:
 
-```ts:no-line-numbers
+```ts
 [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
@@ -620,7 +620,7 @@ const elements = ref([
 
 - Example:
 
-```vue:no-line-numbers{5-6}
+```vue{5-6}
 <script setup>
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -676,7 +676,7 @@ const elements = ref([
 
 - Example:
 
-```vue:no-line-numbers{7-8,12}
+```vue{7-8,12}
 <script setup>
 const elements = ref([
   { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -753,7 +753,7 @@ const elements = ref([
 
 ##### Boolean value
 
-```vue:no-line-numbers{2}
+```vue{2}
 <template>
   <VueFlow v-model="elements" auto-connect />
 </template>
@@ -761,7 +761,7 @@ const elements = ref([
 
 #### [Connector](/typedocs/types/Connector.html/)
 
-```vue:no-line-numbers{6-18,22}
+```vue{6-18,22}
 <script setup>
 import { ref } from 'vue'
 
diff --git a/docs2/src/guide/vue-flow/slots.md b/docs2/src/guide/vue-flow/slots.md
index ae700526..cbc8657a 100644
--- a/docs2/src/guide/vue-flow/slots.md
+++ b/docs2/src/guide/vue-flow/slots.md
@@ -15,7 +15,7 @@ You can use the default slot to add a sidebar or floating toolbar etc. to your g
 The connection line slot allows you to pass down a custom connection line component, which will be used, when a connection
 is triggered.
 
-```vue:no-line-numbers
+```vue
 <template>
   <VueFlow>
     <template #connection-line="connectionLineProps">
@@ -31,7 +31,7 @@ The full description of connection line props can be found [here](/typedocs/inte
 
 The zoom pane slot is placed inside the viewport transformation, so that it scales and moves with the current viewport zoom and position.
 
-```vue:no-line-numbers
+```vue
 <template>
   <VueFlow>
     <template #zoom-pane>
diff --git a/docs2/src/guide/vue-flow/state.md b/docs2/src/guide/vue-flow/state.md
index b4a0115a..0fc7fed2 100644
--- a/docs2/src/guide/vue-flow/state.md
+++ b/docs2/src/guide/vue-flow/state.md
@@ -10,7 +10,7 @@ an already existing store from the current context.
 Internal state can be manipulated, for example by adding new elements to the state. The
 state is reactive and changes will be reflected on the graph.
 
-```vue:no-line-numbers{4-6}
+```vue{4-6}
 <script setup>
 import { useVueFlow } from '@braks/vue-flow'
 
@@ -34,7 +34,7 @@ to reading, writing and updating the state.
 
 Consider this example, where we want to create a Sidebar that allows us to select all nodes.
 
-```vue:no-line-numbers
+```vue
 <!-- Container.vue -->
 <template>
   <div>
@@ -54,7 +54,7 @@ the flow of information.
 Instead, we can initialize a Vue Flow store instance __before__ the Sidebar is initialized, thus the instance becomes
 available as an injection in the component tree.
 
-```vue:no-line-numbers{5-6}
+```vue{5-6}
 <script>
 // Container.vue
 import { useVueFlow  } from '@braks/vue-flow'
@@ -66,7 +66,7 @@ useVueFlow()
 
 Now we can easily access our current state instance from our Sidebar without passing them as props.
 
-```vue:no-line-numbers
+```vue
 <script setup>
 import { useVueFlow } from '@braks/vue-flow'
 
@@ -102,7 +102,7 @@ State updates like removing elements or updating positions are applied by defaul
 If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop
 to `false`.
 
-```vue:no-line-numbers
+```vue
 <div style="height: 300px">
   <VueFlow v-model="elements" :apply-default="false" />
 </div>
@@ -120,7 +120,7 @@ Though it is necessary to pass a unique id for your Vue Flow state instance, oth
 will create a new state instance
 when mounted.
 
-```vue:no-line-numbers{4,32}
+```vue{4,32}
 <script>
 import { VueFlow, useVueFlow } from '@braks/vue-flow'