Adjusthing things back to how they worked but added typescript and php to hightlight js languages imported

Author: webdevnerdstuff

src/index.ts

@@ -1,17 +1,14 @@
-import { App, Plugin } from 'vue';
-import { CodeBlock } from '@/plugin';
-import { Props } from '@/types';
+import { App } from 'vue';
+import { CodeBlock } from './plugin';
 import '@/plugin/styles/cssVariables.css';
 import '@/plugin/styles/utilities.scss';
 import '@/plugin/styles/main.scss';
 import '@/plugin/styles/themeStyles.scss';
 
-const install = (app: App, options: Props) => {
-	const codeBlockGlobalOptions: Props = { globalOptions: true, ...options };
-	app.provide('codeBlockGlobalOptions', codeBlockGlobalOptions);
-	app.component('CodeBlock', CodeBlock);
+export default {
+	install: (app: App) => {
+		app.component('CodeBlock', CodeBlock);
+	}
 };
 
-CodeBlock.install = install;
-
-export default CodeBlock as unknown as Plugin;
+export { CodeBlock };

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
-import CodeBlock from './index';
+import { CodeBlock } from './index';
 import { createPinia } from "pinia";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -24,7 +24,7 @@ library.add({
 });
 
 createApp(App)
-	.use(CodeBlock, {})
 	.use(createPinia())
+	.component('CodeBlock', CodeBlock)
 	.component('fa-icon', FontAwesomeIcon)
 	.mount('#app');

src/plugin/CodeBlock.vue

@@ -77,19 +77,19 @@
 				:class="`language-${props.lang}`"
 				:style="preTagStyles"
 			>
-					<code
-						v-if="prismPlugin"
-						:class="`language-${props.lang} ${browserWindow ? 'v-code-block--code-browser' : ''} ${highlightjs ? 'hljs' : ''}`"
-						:style="codeTagStyles"
-						v-text="computedCode"
-					></code>
-					<code
-						v-else
-						:class="`language-${props.lang} ${browserWindow ? 'v-code-block--code-browser' : ''} ${highlightjs ? 'hljs' : ''}`"
-						:style="codeTagStyles"
-						v-html="renderedCode"
-					></code>
-				</pre>
+						<code
+							v-if="prismPlugin"
+							:class="`language-${props.lang} ${browserWindow ? 'v-code-block--code-browser' : ''} ${highlightjs ? 'hljs' : ''}`"
+							:style="codeTagStyles"
+							v-text="computedCode"
+						></code>
+						<code
+							v-else
+							:class="`language-${props.lang} ${browserWindow ? 'v-code-block--code-browser' : ''} ${highlightjs ? 'hljs' : ''}`"
+							:style="codeTagStyles"
+							v-html="renderedCode"
+						></code>
+					</pre>
 		</div>
 	</div>
 </template>
@@ -121,11 +121,13 @@ import {
 	neonBunnyHighlightThemeMin
 } from './themes';
 
-import hljs from 'highlight.js/lib/core';
 import langCss from 'highlight.js/lib/languages/css';
-import langJavascript from 'highlight.js/lib/languages/javascript';
 import langHtml from 'highlight.js/lib/languages/xml';
+import langJavascript from 'highlight.js/lib/languages/javascript';
+import langPhp from 'highlight.js/lib/languages/php';
 import langPlaintext from 'highlight.js/lib/languages/plaintext';
+import langTypescript from 'highlight.js/lib/languages/typescript';
+import { HLJSApi } from 'highlight.js';
 
 
 const highlightJsVersion = '11.8.0';
@@ -136,7 +138,6 @@ const prismThemesVersion = '1.9.0';
 // -------------------------------------------------- Emits & Slots & Injects //
 const emit = defineEmits(['run', 'update:copy-status']);
 const slots = useSlots();
-const codeBlockGlobalOptions = inject<Props>('codeBlockGlobalOptions');
 
 
 // -------------------------------------------------- Props //
@@ -145,6 +146,7 @@ const props = withDefaults(defineProps<Props>(), { ...AllProps });
 
 // -------------------------------------------------- Data //
 
+let hljs: HLJSApi;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let prismModule: any;
 
@@ -283,7 +285,7 @@ onBeforeMount(() => {
 });
 
 onMounted(() => {
-	useTheme.value = codeBlockGlobalOptions?.theme || props.theme;
+	useTheme.value = props.theme;
 	loadTheme();
 	mobileCheck();
 	renderCode();
@@ -495,12 +497,22 @@ function renderCode(): void {
 	convertCode();
 
 	if (props.highlightjs) {
-		hljs.registerLanguage('javascript', langJavascript);
-		hljs.registerLanguage('css', langCss);
-		hljs.registerLanguage('html', langHtml);
-		hljs.registerLanguage('plain', langPlaintext);
-
-		renderedCode.value = hljs.highlight(convertedCode.value as string, { language: props.lang }).value;
+		import('highlight.js/lib/core')
+			.then((module) => {
+				hljs = module.default;
+
+				hljs.registerLanguage('css', langCss);
+				hljs.registerLanguage('html', langHtml);
+				hljs.registerLanguage('javascript', langJavascript);
+				hljs.registerLanguage('php', langPhp);
+				hljs.registerLanguage('plain', langPlaintext);
+				hljs.registerLanguage('typescript', langTypescript);
+
+				renderedCode.value = hljs.highlight(convertedCode.value as string, { language: props.lang }).value;
+			})
+			.catch((err) => {
+				console.error('Highlight.js import:', { err });
+			});
 	}
 
 	if (props.prismjs) {

src/types/index.ts

@@ -28,6 +28,7 @@ export type Props = {
 	indent?: number;
 	label?: string;
 	lang?: string;
+	languages?: string[];
 	maxHeight?: string | number;
 	persistentCopyButton?: boolean;
 	prismjs?: boolean;