File tree Expand file tree Collapse file tree 7 files changed +30
-10
lines changed
Filter options
Expand file tree Collapse file tree 7 files changed +30
-10
lines changed
Original file line number Diff line number Diff line change @@ -25,6 +25,7 @@ Once installed, you can start using the `CodeBlock` component in your `Vue 3` ap
25
25
``` vue ts:line-numbers {1}
26
26
<template>
27
27
<CodeBlock
28
+ theme="dark"
28
29
:code="codeExample"
29
30
language="javascript"
30
31
class="custom-class"
@@ -82,6 +83,7 @@ greet('World');
82
83
| ----------- | --------- | -------- | ------- | ----------------------------------------------------------------------- |
83
84
| ` code ` | ` string ` | Yes | N/A | The code you want to display, passed as a string. |
84
85
| ` language ` | ` string ` | Yes | N/A | Specifies the programming language for syntax highlighting. |
86
+ | ` theme ` | ` string ` | Yes | N/A | Specifies the theme to be used for syntax highlighting (light or dark). |
85
87
| ` asElement ` | ` string ` | No | ` <pre >` | Defines the HTML element wrapping the code block (defaults to ` <pre >` ). |
86
88
| ` numbered ` | ` boolean ` | No | ` false ` | Displays line numbers when set to ` true ` . |
87
89
@@ -93,6 +95,7 @@ One of the key features of **vuejs-code-block** is that it provides **unstyled**
93
95
<template >
94
96
< div class = " p-4 bg-gray-800 rounded-lg" >
95
97
< CodeBlock
98
+ theme = " dark"
96
99
:code = " exampleCode"
97
100
language = " javascript" / >
98
101
< / div >
Original file line number Diff line number Diff line change 1
1
<template >
2
2
Test:
3
3
<CodeBlock
4
+ theme =" dark"
4
5
:code =" code"
5
6
language =" python"
6
7
code-class =" codeClass"
27
28
28
29
<style >
29
30
body {
30
- background-color : #000 ;
31
+ /* background-color: #000; */
31
32
}
32
33
</style >
Original file line number Diff line number Diff line change 2
2
<!-- Code Block Component -->
3
3
<component
4
4
:id =" props.id"
5
- :class =" props.class"
5
+ :class =" `${ props.class} ${props.theme}` "
6
6
:is =" props.asElement || 'pre'"
7
7
v-bind =" $attrs"
8
8
class =" code" >
53
53
.code {
54
54
padding : 1rem ;
55
55
border-radius : 0.25rem ;
56
+ border : 1px solid #888 ;
57
+ }
58
+
59
+ .dark.code {
56
60
background-color : #121212 ;
57
61
color : #fff ;
58
- border : 1px solid #888 ;
59
62
}
60
63
61
64
.line {
Original file line number Diff line number Diff line change 1
- import { SupportedLanguageTypes } from 'code-block' ;
1
+ import { SupportedLanguageTypes , themeType } from 'code-block' ;
2
2
import type {
3
3
ComponentPublicInstance ,
4
4
ExtractPropTypes ,
@@ -52,6 +52,10 @@ export const codeBlockProps = () =>
52
52
type : Boolean as PropType < boolean > ,
53
53
required : false ,
54
54
default : false
55
+ } ,
56
+ theme : {
57
+ type : String as PropType < themeType > ,
58
+ required : true
55
59
}
56
60
} as const ) ;
57
61
@@ -74,12 +78,13 @@ export interface UseCodeBlockProps {
74
78
class : MaybeRefOrGetter < string | null > ;
75
79
id : MaybeRefOrGetter < string | null > ;
76
80
code : MaybeRefOrGetter < string > ;
77
- language : MaybeRefOrGetter < string > ;
81
+ language : MaybeRefOrGetter < SupportedLanguageTypes > ;
78
82
codeClass : MaybeRefOrGetter < string > ;
79
83
linesHighlighted : MaybeRefOrGetter < string [ ] | number [ ] > ;
80
84
wordsHighlighted : MaybeRefOrGetter < string [ ] > ;
81
85
asElement : MaybeRefOrGetter < string | null > ;
82
86
numbered : MaybeRefOrGetter < boolean > ;
87
+ theme : MaybeRefOrGetter < themeType > ;
83
88
}
84
89
85
90
// Props goes here
@@ -98,6 +103,7 @@ export type PublicCodeBlockProps = Partial<
98
103
| 'wordsHighlighted'
99
104
| 'asElement'
100
105
| 'numbered'
106
+ | 'theme'
101
107
>
102
108
> &
103
109
// Then explicitly pick properties from UseCodeBlockProps to make them required
@@ -112,4 +118,5 @@ export type PublicCodeBlockProps = Partial<
112
118
| 'wordsHighlighted'
113
119
| 'asElement'
114
120
| 'numbered'
121
+ | 'theme'
115
122
> ;
Original file line number Diff line number Diff line change @@ -17,7 +17,8 @@ const defaultProps = {
17
17
linesHighlighted : [ ] ,
18
18
wordsHighlighted : [ ] ,
19
19
asElement : '' ,
20
- numbered : false
20
+ numbered : false ,
21
+ theme : ''
21
22
} ;
22
23
23
24
export function useCodeBlock ( props : PublicCodeBlockProps ) {
Original file line number Diff line number Diff line change
1
+ import 'prismjs/themes/prism.min.css' ;
1
2
import 'prismjs/themes/prism-dark.min.css' ;
2
-
3
3
import { Prism } from './prism-langs' ;
4
- // import 'prismjs/themes/prism-con.min.css';
5
4
6
5
export function highlightedCode ( code : string , language : string ) {
7
6
if ( code === null || code === undefined ) {
Original file line number Diff line number Diff line change @@ -7,13 +7,15 @@ declare module 'code-block' {
7
7
class : string ;
8
8
id : string ;
9
9
code : string ;
10
- language : string ;
10
+ language : SupportedLanguage ;
11
11
codeClass : string ;
12
12
linesHighlighted : string [ ] | number [ ] ;
13
13
wordsHighlighted : string [ ] ;
14
14
asElement : string ;
15
15
numbered : boolean ;
16
+ theme : themeType ;
16
17
}
18
+ type themeType = 'light' | 'dark' ;
17
19
18
20
type SupportedLanguage =
19
21
| 'plain'
@@ -72,5 +74,9 @@ declare module 'code-block' {
72
74
| 'java' ;
73
75
74
76
const CodeBlockType : DefineComponent < CodeBlockProps > ;
75
- export { CodeBlockType , SupportedLanguage as SupportedLanguageTypes } ;
77
+ export {
78
+ CodeBlockType ,
79
+ SupportedLanguage as SupportedLanguageTypes ,
80
+ themeType
81
+ } ;
76
82
}
You can’t perform that action at this time.
0 commit comments