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 1b16a89

Browse filesBrowse files
HetariHetari
committed
addL light and dark theme
1 parent 75e6415 commit 1b16a89
Copy full SHA for 1b16a89

File tree

Expand file treeCollapse file tree

7 files changed

+30
-10
lines changed
Filter options
Expand file treeCollapse file tree

7 files changed

+30
-10
lines changed

‎docs/get-started.md

Copy file name to clipboardExpand all lines: docs/get-started.md
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ Once installed, you can start using the `CodeBlock` component in your `Vue 3` ap
2525
```vue ts:line-numbers {1}
2626
<template>
2727
<CodeBlock
28+
theme="dark"
2829
:code="codeExample"
2930
language="javascript"
3031
class="custom-class"
@@ -82,6 +83,7 @@ greet('World');
8283
| ----------- | --------- | -------- | ------- | ----------------------------------------------------------------------- |
8384
| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. |
8485
| `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). |
8587
| `asElement` | `string` | No | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). |
8688
| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. |
8789
@@ -93,6 +95,7 @@ One of the key features of **vuejs-code-block** is that it provides **unstyled**
9395
<template>
9496
<div class="p-4 bg-gray-800 rounded-lg">
9597
<CodeBlock
98+
theme="dark"
9699
:code="exampleCode"
97100
language="javascript" />
98101
</div>

‎src/App.vue

Copy file name to clipboardExpand all lines: src/App.vue
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
Test:
33
<CodeBlock
4+
theme="dark"
45
:code="code"
56
language="python"
67
code-class="codeClass"
@@ -27,6 +28,6 @@ ss = 2
2728

2829
<style>
2930
body {
30-
background-color: #000;
31+
/* background-color: #000; */
3132
}
3233
</style>

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

Copy file name to clipboardExpand all lines: src/components/code-block/CodeBlock.vue
+5-2Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<!-- Code Block Component -->
33
<component
44
:id="props.id"
5-
:class="props.class"
5+
:class="`${props.class} ${props.theme}`"
66
:is="props.asElement || 'pre'"
77
v-bind="$attrs"
88
class="code">
@@ -53,9 +53,12 @@
5353
.code {
5454
padding: 1rem;
5555
border-radius: 0.25rem;
56+
border: 1px solid #888;
57+
}
58+
59+
.dark.code {
5660
background-color: #121212;
5761
color: #fff;
58-
border: 1px solid #888;
5962
}
6063
6164
.line {

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

Copy file name to clipboardExpand all lines: src/components/code-block/types.ts
+9-2Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SupportedLanguageTypes } from 'code-block';
1+
import { SupportedLanguageTypes, themeType } from 'code-block';
22
import type {
33
ComponentPublicInstance,
44
ExtractPropTypes,
@@ -52,6 +52,10 @@ export const codeBlockProps = () =>
5252
type: Boolean as PropType<boolean>,
5353
required: false,
5454
default: false
55+
},
56+
theme: {
57+
type: String as PropType<themeType>,
58+
required: true
5559
}
5660
} as const);
5761

@@ -74,12 +78,13 @@ export interface UseCodeBlockProps {
7478
class: MaybeRefOrGetter<string | null>;
7579
id: MaybeRefOrGetter<string | null>;
7680
code: MaybeRefOrGetter<string>;
77-
language: MaybeRefOrGetter<string>;
81+
language: MaybeRefOrGetter<SupportedLanguageTypes>;
7882
codeClass: MaybeRefOrGetter<string>;
7983
linesHighlighted: MaybeRefOrGetter<string[] | number[]>;
8084
wordsHighlighted: MaybeRefOrGetter<string[]>;
8185
asElement: MaybeRefOrGetter<string | null>;
8286
numbered: MaybeRefOrGetter<boolean>;
87+
theme: MaybeRefOrGetter<themeType>;
8388
}
8489

8590
// Props goes here
@@ -98,6 +103,7 @@ export type PublicCodeBlockProps = Partial<
98103
| 'wordsHighlighted'
99104
| 'asElement'
100105
| 'numbered'
106+
| 'theme'
101107
>
102108
> &
103109
// Then explicitly pick properties from UseCodeBlockProps to make them required
@@ -112,4 +118,5 @@ export type PublicCodeBlockProps = Partial<
112118
| 'wordsHighlighted'
113119
| 'asElement'
114120
| 'numbered'
121+
| 'theme'
115122
>;

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

Copy file name to clipboardExpand all lines: src/components/code-block/use-code-block.ts
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const defaultProps = {
1717
linesHighlighted: [],
1818
wordsHighlighted: [],
1919
asElement: '',
20-
numbered: false
20+
numbered: false,
21+
theme: ''
2122
};
2223

2324
export function useCodeBlock(props: PublicCodeBlockProps) {

‎src/components/utils.ts

Copy file name to clipboardExpand all lines: src/components/utils.ts
+1-2Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import 'prismjs/themes/prism.min.css';
12
import 'prismjs/themes/prism-dark.min.css';
2-
33
import { Prism } from './prism-langs';
4-
// import 'prismjs/themes/prism-con.min.css';
54

65
export function highlightedCode(code: string, language: string) {
76
if (code === null || code === undefined) {

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

Copy file name to clipboardExpand all lines: src/types/code-block.d.ts
+8-2Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ declare module 'code-block' {
77
class: string;
88
id: string;
99
code: string;
10-
language: string;
10+
language: SupportedLanguage;
1111
codeClass: string;
1212
linesHighlighted: string[] | number[];
1313
wordsHighlighted: string[];
1414
asElement: string;
1515
numbered: boolean;
16+
theme: themeType;
1617
}
18+
type themeType = 'light' | 'dark';
1719

1820
type SupportedLanguage =
1921
| 'plain'
@@ -72,5 +74,9 @@ declare module 'code-block' {
7274
| 'java';
7375

7476
const CodeBlockType: DefineComponent<CodeBlockProps>;
75-
export { CodeBlockType, SupportedLanguage as SupportedLanguageTypes };
77+
export {
78+
CodeBlockType,
79+
SupportedLanguage as SupportedLanguageTypes,
80+
themeType
81+
};
7682
}

0 commit comments

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