Skip to content

Commit 5e8e82f

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adjusthing things back to how they worked but added typescript and php to hightlight js languages imported
1 parent d8ab8c2 commit 5e8e82f

File tree

4 files changed

+45
-35
lines changed

4 files changed

+45
-35
lines changed

‎src/index.ts

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
1-
import { App, Plugin } from 'vue';
2-
import { CodeBlock } from '@/plugin';
3-
import { Props } from '@/types';
1+
import { App } from 'vue';
2+
import { CodeBlock } from './plugin';
43
import '@/plugin/styles/cssVariables.css';
54
import '@/plugin/styles/utilities.scss';
65
import '@/plugin/styles/main.scss';
76
import '@/plugin/styles/themeStyles.scss';
87

9-
const install = (app: App, options: Props) => {
10-
const codeBlockGlobalOptions: Props = { globalOptions: true, ...options };
11-
app.provide('codeBlockGlobalOptions', codeBlockGlobalOptions);
12-
app.component('CodeBlock', CodeBlock);
8+
export default {
9+
install: (app: App) => {
10+
app.component('CodeBlock', CodeBlock);
11+
}
1312
};
1413

15-
CodeBlock.install = install;
16-
17-
export default CodeBlock as unknown as Plugin;
14+
export { CodeBlock };

‎src/main.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createApp } from 'vue';
22
import App from './App.vue';
3-
import CodeBlock from './index';
3+
import { CodeBlock } from './index';
44
import { createPinia } from "pinia";
55
import { library } from '@fortawesome/fontawesome-svg-core';
66
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -24,7 +24,7 @@ library.add({
2424
});
2525

2626
createApp(App)
27-
.use(CodeBlock, {})
2827
.use(createPinia())
28+
.component('CodeBlock', CodeBlock)
2929
.component('fa-icon', FontAwesomeIcon)
3030
.mount('#app');

‎src/plugin/CodeBlock.vue

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -77,19 +77,19 @@
7777
:class="`language-${props.lang}`"
7878
:style="preTagStyles"
7979
>
80-
<code
81-
v-if="prismPlugin"
82-
:class="`language-${props.lang} ${browserWindow ? 'v-code-block--code-browser' : ''} ${highlightjs ? 'hljs' : ''}`"
83-
:style="codeTagStyles"
84-
v-text="computedCode"
85-
></code>
86-
<code
87-
v-else
88-
:class="`language-${props.lang} ${browserWindow ? 'v-code-block--code-browser' : ''} ${highlightjs ? 'hljs' : ''}`"
89-
:style="codeTagStyles"
90-
v-html="renderedCode"
91-
></code>
92-
</pre>
80+
<code
81+
v-if="prismPlugin"
82+
:class="`language-${props.lang} ${browserWindow ? 'v-code-block--code-browser' : ''} ${highlightjs ? 'hljs' : ''}`"
83+
:style="codeTagStyles"
84+
v-text="computedCode"
85+
></code>
86+
<code
87+
v-else
88+
:class="`language-${props.lang} ${browserWindow ? 'v-code-block--code-browser' : ''} ${highlightjs ? 'hljs' : ''}`"
89+
:style="codeTagStyles"
90+
v-html="renderedCode"
91+
></code>
92+
</pre>
9393
</div>
9494
</div>
9595
</template>
@@ -121,11 +121,13 @@ import {
121121
neonBunnyHighlightThemeMin
122122
} from './themes';
123123
124-
import hljs from 'highlight.js/lib/core';
125124
import langCss from 'highlight.js/lib/languages/css';
126-
import langJavascript from 'highlight.js/lib/languages/javascript';
127125
import langHtml from 'highlight.js/lib/languages/xml';
126+
import langJavascript from 'highlight.js/lib/languages/javascript';
127+
import langPhp from 'highlight.js/lib/languages/php';
128128
import langPlaintext from 'highlight.js/lib/languages/plaintext';
129+
import langTypescript from 'highlight.js/lib/languages/typescript';
130+
import { HLJSApi } from 'highlight.js';
129131
130132
131133
const highlightJsVersion = '11.8.0';
@@ -136,7 +138,6 @@ const prismThemesVersion = '1.9.0';
136138
// -------------------------------------------------- Emits & Slots & Injects //
137139
const emit = defineEmits(['run', 'update:copy-status']);
138140
const slots = useSlots();
139-
const codeBlockGlobalOptions = inject<Props>('codeBlockGlobalOptions');
140141
141142
142143
// -------------------------------------------------- Props //
@@ -145,6 +146,7 @@ const props = withDefaults(defineProps<Props>(), { ...AllProps });
145146
146147
// -------------------------------------------------- Data //
147148
149+
let hljs: HLJSApi;
148150
// eslint-disable-next-line @typescript-eslint/no-explicit-any
149151
let prismModule: any;
150152
@@ -283,7 +285,7 @@ onBeforeMount(() => {
283285
});
284286
285287
onMounted(() => {
286-
useTheme.value = codeBlockGlobalOptions?.theme || props.theme;
288+
useTheme.value = props.theme;
287289
loadTheme();
288290
mobileCheck();
289291
renderCode();
@@ -495,12 +497,22 @@ function renderCode(): void {
495497
convertCode();
496498
497499
if (props.highlightjs) {
498-
hljs.registerLanguage('javascript', langJavascript);
499-
hljs.registerLanguage('css', langCss);
500-
hljs.registerLanguage('html', langHtml);
501-
hljs.registerLanguage('plain', langPlaintext);
502-
503-
renderedCode.value = hljs.highlight(convertedCode.value as string, { language: props.lang }).value;
500+
import('highlight.js/lib/core')
501+
.then((module) => {
502+
hljs = module.default;
503+
504+
hljs.registerLanguage('css', langCss);
505+
hljs.registerLanguage('html', langHtml);
506+
hljs.registerLanguage('javascript', langJavascript);
507+
hljs.registerLanguage('php', langPhp);
508+
hljs.registerLanguage('plain', langPlaintext);
509+
hljs.registerLanguage('typescript', langTypescript);
510+
511+
renderedCode.value = hljs.highlight(convertedCode.value as string, { language: props.lang }).value;
512+
})
513+
.catch((err) => {
514+
console.error('Highlight.js import:', { err });
515+
});
504516
}
505517
506518
if (props.prismjs) {

‎src/types/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export type Props = {
2828
indent?: number;
2929
label?: string;
3030
lang?: string;
31+
languages?: string[];
3132
maxHeight?: string | number;
3233
persistentCopyButton?: boolean;
3334
prismjs?: boolean;

0 commit comments

Comments
 (0)