Add cssPath prop

Author: webdevnerdstuff

src/plugin/CodeBlock.vue

@@ -158,6 +158,8 @@ const renderedCode = ref('');
 const runTextValue = ref<string>('');
 const useTheme = ref<boolean | string>('');
 
+const { cssPath } = toRefs(props);
+
 
 // -------------------------------------------------- Computed //
 const computedCode = computed<unknown>(() => {
@@ -269,6 +271,10 @@ watch(props as Props, () => {
 	}
 });
 
+watch(() => cssPath.value, () => {
+	loadTheme();
+});
+
 
 // -------------------------------------------------- Mounts //
 onBeforeMount(() => {
@@ -404,30 +410,36 @@ function loadTheme(): void {
 
 	const adjustCssFilename = themeNameAdjustments(activeLibrary, useTheme.value);
 
-	switch (activeLibrary) {
-		case 'highlightjs':
-			cssFilename = `${adjustCssFilename}.min.css`;
-			fetchUrl = `${highlightCdn.value}/${cssFilename}`;
-			break;
-		case 'prism':
-			cssFilename = `${adjustCssFilename}.css`;
-
-			if (useTheme.value === 'default') {
-				fetchUrl = `${prismCdn.value}/prism.css`;
-			}
-			else if (useTheme.value.includes('themes-')) {
-				fetchUrl = `${prismThemesCdn.value}/${cssFilename}`;
-			}
-			else {
-				fetchUrl = `${prismCdn.value}/prism-${cssFilename}`;
-			}
+	if (typeof cssPath.value !== 'undefined') {
+		fetchUrl = cssPath.value;
+	}
+	else {
+		switch (activeLibrary) {
+			case 'highlightjs':
+				cssFilename = `${adjustCssFilename}.min.css`;
+				fetchUrl = `${highlightCdn.value}/${cssFilename}`;
+				break;
+			case 'prism':
+				cssFilename = `${adjustCssFilename}.css`;
+
+				if (useTheme.value === 'default') {
+					fetchUrl = `${prismCdn.value}/prism.css`;
+				}
+				else if (useTheme.value.includes('themes-')) {
+					fetchUrl = `${prismThemesCdn.value}/${cssFilename}`;
+				}
+				else {
+					fetchUrl = `${prismCdn.value}/prism-${cssFilename}`;
+				}
 
-			break;
-		default:
-			cssFilename = '';
-			break;
+				break;
+			default:
+				cssFilename = '';
+				break;
+		}
 	}
 
+
 	isLoading.value = true;
 
 	fetch(fetchUrl).then((response) => {

src/plugin/utils/props.ts

@@ -1,6 +1,7 @@
 
 export const AllProps = {
 	browserWindow: false,
+	cssPath: undefined,
 	code: '',
 	codeBlockRadius: '0.5rem',
 	copyButton: true,

src/types/index.ts

@@ -13,6 +13,7 @@ export type UseTheme = MaybeRef<string | boolean>;
 // -------------------------------------------------- Props //
 export interface Props {
 	browserWindow?: boolean;
+	cssPath?: string | undefined;
 	code?: object | [] | string | number;
 	codeBlockRadius?: string;
 	copyButton?: boolean;