Update vue-code-block usage

Author: webdevnerdstuff

src/main.ts

@@ -1,6 +1,6 @@
 import '@/libraries/fontawesome';
 import App from './App.vue';
-import CodeBlock from '@wdns/vue-code-block';
+import { createVCodeBlock } from '@wdns/vue-code-block';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { registerPlugins } from './plugins';
@@ -10,7 +10,8 @@ import { VColorField } from './index';
 
 const app = createApp(App);
 
-app.component('CodeBlock', CodeBlock);
+app.use(createVCodeBlock());
+
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);
 app.component('FaIcon', FontAwesomeIcon);

src/playground/configs/playground.ts

@@ -1,14 +1,14 @@
 import '@/libraries/fontawesome';
 import PlaygroundApp from './PlaygroundApp.vue';
-import CodeBlock from '@wdns/vue-code-block';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { registerPlugins } from '../../plugins';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import VColorField from '../../index';
 
+
 const app = createApp(PlaygroundApp);
-app.component('CodeBlock', CodeBlock);
+
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);
 app.component('FaIcon', FontAwesomeIcon);