Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ccc6619

Browse filesBrowse files
HetariHetari
committed
fix prismjs import
1 parent 86b28b2 commit ccc6619
Copy full SHA for ccc6619

File tree

Expand file treeCollapse file tree

9 files changed

+146
-54
lines changed
Filter options
Expand file treeCollapse file tree

9 files changed

+146
-54
lines changed

‎package-lock.json

Copy file name to clipboardExpand all lines: package-lock.json
+53-28Lines changed: 53 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Copy file name to clipboardExpand all lines: package.json
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,13 @@
4949
"vue": "^3.0.0"
5050
},
5151
"dependencies": {
52-
"@types/prismjs": "^1.26.4",
5352
"vue": "^3.0.0"
5453
},
5554
"devDependencies": {
5655
"@types/node": "^22.7.4",
56+
"@types/prismjs": "^1.26.4",
5757
"@vitejs/plugin-vue": "^5.1.2",
58-
"prismjs": "^1.29.0",
58+
"prismjs-components-importer": "^0.2.0",
5959
"semantic-release": "^24.1.2",
6060
"typescript": "^5.5.3",
6161
"vite": "^5.4.1",

‎src/App.vue

Copy file name to clipboardExpand all lines: src/App.vue
+3-1Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
<template>
44
Test:
5-
<CodeBlock code="console.log('Hello, World!');" />
5+
<CodeBlock
6+
code="print('Hello, ' + name)"
7+
language="pys" />
68
End of App.vue
79
</template>
810

‎src/components/code-block/CodeBlock.vue

Copy file name to clipboardExpand all lines: src/components/code-block/CodeBlock.vue
+13-3Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,30 @@
22
<div
33
:class="class"
44
:id="id">
5+
userCode: <br />
6+
{{ userCode }}
7+
<br />
8+
<br />
59
<code
610
:class="codeClass"
7-
v-html="highlightedCode"></code>
11+
v-html="userCode"></code>
812
<slot name="default"></slot>
913
</div>
1014
</template>
1115

1216
<script setup lang="ts">
13-
import { defineComponent, ref, toRefs } from 'vue';
17+
import { computed, defineComponent, toRefs } from 'vue';
1418
import { codeBlockProps, codeBlockInstance } from './types';
1519
import { useCodeBlock } from './use-code-block';
1620
import { highlightedCode } from './utils';
1721
18-
defineProps(codeBlockProps());
22+
const props = defineProps(codeBlockProps());
23+
24+
// Create a computed property for userCode
25+
const userCode = computed(() => {
26+
return highlightedCode(props.code, props.language);
27+
});
28+
1929
defineComponent<codeBlockInstance>({
2030
name: 'CodeBlock',
2131
props: codeBlockProps(),

‎src/components/code-block/types.ts

Copy file name to clipboardExpand all lines: src/components/code-block/types.ts
+8-2Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ export const codeBlockProps = () =>
2323
type: String as PropType<string>,
2424
required: true
2525
},
26+
language: {
27+
type: String as PropType<string>,
28+
required: false,
29+
default: 'markup'
30+
},
2631
codeClass: {
2732
type: String as PropType<string>,
2833
required: false,
@@ -54,6 +59,7 @@ export interface UseCodeBlockProps {
5459
class: MaybeRefOrGetter<string | null>;
5560
id: MaybeRefOrGetter<string | null>;
5661
code: MaybeRefOrGetter<string>;
62+
language: MaybeRefOrGetter<string>;
5763
codeClass: MaybeRefOrGetter<string>;
5864
}
5965

@@ -62,9 +68,9 @@ export interface UseCodeBlockProps {
6268
// but ensures that properties are required.
6369
export type PublicCodeBlockProps = Partial<
6470
// Omit properties from UseCodeBlockProps to make the remaining props optional
65-
Omit<UseCodeBlockProps, 'code' | 'class' | 'id' | 'codeClass'>
71+
Omit<UseCodeBlockProps, 'code' | 'class' | 'id' | 'language' | 'codeClass'>
6672
> &
6773
// Then explicitly pick properties from UseCodeBlockProps to make them required
68-
Pick<UseCodeBlockProps, 'code' | 'class' | 'id' | 'codeClass'>;
74+
Pick<UseCodeBlockProps, 'code' | 'class' | 'id' | 'language' | 'codeClass'>;
6975

7076
export type PropertyFunction<T> = () => T;

‎src/components/code-block/use-code-block.ts

Copy file name to clipboardExpand all lines: src/components/code-block/use-code-block.ts
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const defaultProps = {
1212
class: '',
1313
id: '',
1414
code: '',
15+
language: '',
1516
codeClass: ''
1617
};
1718

‎src/components/code-block/utils.ts

Copy file name to clipboard
+16-18Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
import 'prismjs/themes/prism.css';
2-
3-
import { computed } from 'vue';
42
import { highlight, languages } from 'prismjs';
3+
import 'prismjs-components-importer/esm';
54

6-
export function highlightedCode(code: String, language: String) {
7-
return computed(() => {
8-
if (code === null || code === undefined) {
9-
throw new Error('Code is null or undefined');
10-
}
5+
export function highlightedCode(code: string, language: string) {
6+
if (code === null || code === undefined) {
7+
throw new Error('Code is null or undefined');
8+
}
119

12-
if (typeof code !== 'string') {
13-
throw new Error('Code is not a string');
14-
}
10+
if (typeof code !== 'string') {
11+
throw new Error('Code is not a string');
12+
}
1513

16-
const prismLanguage = languages[language as string] || languages.markup;
14+
// Check if the language is registered, fallback to 'markup' if not found
15+
const prismLanguage = languages[language] || languages.markup;
1716

18-
if (!prismLanguage) {
19-
throw new Error(
20-
`Prism component for language "${language}" was not found. Did you forget to register it?`
21-
);
22-
}
17+
if (!prismLanguage) {
18+
throw new Error(
19+
`Prism component for language "${language}" was not found.`
20+
);
21+
}
2322

24-
return highlight(code, prismLanguage, language as string);
25-
});
23+
return highlight(code, prismLanguage, language);
2624
}

‎src/types/code-block.d.ts

Copy file name to clipboardExpand all lines: src/types/code-block.d.ts
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ declare module 'code-block' {
77
class: string;
88
id: string;
99
code: string;
10+
language: string;
1011
codeClass: string;
1112
}
1213

‎vite.config.ts.timestamp-1727789987052-1bc12c947455.mjs

Copy file name to clipboard
+49Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// vite.config.ts
2+
import { fileURLToPath, URL } from "node:url";
3+
import { defineConfig } from "file:///run/media/brhoom/Brhoom/Vscode/CV/vuejs-code-block/node_modules/vite/dist/node/index.js";
4+
import vue from "file:///run/media/brhoom/Brhoom/Vscode/CV/vuejs-code-block/node_modules/@vitejs/plugin-vue/dist/index.mjs";
5+
import { resolve } from "path";
6+
import dts from "file:///run/media/brhoom/Brhoom/Vscode/CV/vuejs-code-block/node_modules/vite-plugin-dts/dist/index.mjs";
7+
var __vite_injected_original_dirname = "/run/media/brhoom/Brhoom/Vscode/CV/vuejs-code-block";
8+
var __vite_injected_original_import_meta_url = "file:///run/media/brhoom/Brhoom/Vscode/CV/vuejs-code-block/vite.config.ts";
9+
var vite_config_default = defineConfig({
10+
plugins: [
11+
vue(),
12+
dts({
13+
insertTypesEntry: true,
14+
tsconfigPath: "./tsconfig.json"
15+
})
16+
],
17+
resolve: {
18+
alias: {
19+
"@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url))
20+
}
21+
},
22+
build: {
23+
target: "es2015",
24+
lib: {
25+
entry: resolve(__vite_injected_original_dirname, "src/index.ts"),
26+
// Your library entry point
27+
name: "VueJsCodeBlock",
28+
fileName: "index",
29+
// Output file name
30+
formats: ["es", "cjs"]
31+
// Output formats
32+
},
33+
rollupOptions: {
34+
external: ["vue", "prismjs/themes/prism.css"],
35+
output: {
36+
globals: {
37+
vue: "Vue"
38+
// Global variable for Vue
39+
},
40+
exports: "named"
41+
// Control export style
42+
}
43+
}
44+
}
45+
});
46+
export {
47+
vite_config_default as default
48+
};
49+
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvcnVuL21lZGlhL2JyaG9vbS9Ccmhvb20vVnNjb2RlL0NWL3Z1ZWpzLWNvZGUtYmxvY2tcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9ydW4vbWVkaWEvYnJob29tL0JyaG9vbS9Wc2NvZGUvQ1YvdnVlanMtY29kZS1ibG9jay92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vcnVuL21lZGlhL2JyaG9vbS9Ccmhvb20vVnNjb2RlL0NWL3Z1ZWpzLWNvZGUtYmxvY2svdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBmaWxlVVJMVG9QYXRoLCBVUkwgfSBmcm9tICdub2RlOnVybCc7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCB2dWUgZnJvbSAnQHZpdGVqcy9wbHVnaW4tdnVlJztcbmltcG9ydCB7IHJlc29sdmUgfSBmcm9tICdwYXRoJztcbmltcG9ydCBkdHMgZnJvbSAndml0ZS1wbHVnaW4tZHRzJztcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIHZ1ZSgpLFxuICAgIGR0cyh7XG4gICAgICBpbnNlcnRUeXBlc0VudHJ5OiB0cnVlLFxuICAgICAgdHNjb25maWdQYXRoOiAnLi90c2NvbmZpZy5qc29uJ1xuICAgIH0pXG4gIF0sXG4gIHJlc29sdmU6IHtcbiAgICBhbGlhczoge1xuICAgICAgJ0AnOiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vc3JjJywgaW1wb3J0Lm1ldGEudXJsKSlcbiAgICB9XG4gIH0sXG4gIGJ1aWxkOiB7XG4gICAgdGFyZ2V0OiAnZXMyMDE1JyxcbiAgICBsaWI6IHtcbiAgICAgIGVudHJ5OiByZXNvbHZlKF9fZGlybmFtZSwgJ3NyYy9pbmRleC50cycpLCAvLyBZb3VyIGxpYnJhcnkgZW50cnkgcG9pbnRcbiAgICAgIG5hbWU6ICdWdWVKc0NvZGVCbG9jaycsXG4gICAgICBmaWxlTmFtZTogJ2luZGV4JywgLy8gT3V0cHV0IGZpbGUgbmFtZVxuICAgICAgZm9ybWF0czogWydlcycsICdjanMnXSAvLyBPdXRwdXQgZm9ybWF0c1xuICAgIH0sXG4gICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgZXh0ZXJuYWw6IFsndnVlJywgJ3ByaXNtanMvdGhlbWVzL3ByaXNtLmNzcyddLFxuICAgICAgb3V0cHV0OiB7XG4gICAgICAgIGdsb2JhbHM6IHtcbiAgICAgICAgICB2dWU6ICdWdWUnIC8vIEdsb2JhbCB2YXJpYWJsZSBmb3IgVnVlXG4gICAgICAgIH0sXG4gICAgICAgIGV4cG9ydHM6ICduYW1lZCcgLy8gQ29udHJvbCBleHBvcnQgc3R5bGVcbiAgICAgIH1cbiAgICB9XG4gIH1cbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUEyVSxTQUFTLGVBQWUsV0FBVztBQUM5VyxTQUFTLG9CQUFvQjtBQUM3QixPQUFPLFNBQVM7QUFDaEIsU0FBUyxlQUFlO0FBQ3hCLE9BQU8sU0FBUztBQUpoQixJQUFNLG1DQUFtQztBQUFxSyxJQUFNLDJDQUEyQztBQU0vUCxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxJQUFJO0FBQUEsSUFDSixJQUFJO0FBQUEsTUFDRixrQkFBa0I7QUFBQSxNQUNsQixjQUFjO0FBQUEsSUFDaEIsQ0FBQztBQUFBLEVBQ0g7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssY0FBYyxJQUFJLElBQUksU0FBUyx3Q0FBZSxDQUFDO0FBQUEsSUFDdEQ7QUFBQSxFQUNGO0FBQUEsRUFDQSxPQUFPO0FBQUEsSUFDTCxRQUFRO0FBQUEsSUFDUixLQUFLO0FBQUEsTUFDSCxPQUFPLFFBQVEsa0NBQVcsY0FBYztBQUFBO0FBQUEsTUFDeEMsTUFBTTtBQUFBLE1BQ04sVUFBVTtBQUFBO0FBQUEsTUFDVixTQUFTLENBQUMsTUFBTSxLQUFLO0FBQUE7QUFBQSxJQUN2QjtBQUFBLElBQ0EsZUFBZTtBQUFBLE1BQ2IsVUFBVSxDQUFDLE9BQU8sMEJBQTBCO0FBQUEsTUFDNUMsUUFBUTtBQUFBLFFBQ04sU0FBUztBQUFBLFVBQ1AsS0FBSztBQUFBO0FBQUEsUUFDUDtBQUFBLFFBQ0EsU0FBUztBQUFBO0FBQUEsTUFDWDtBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.