Skip to content

Commit bf0bbed

Browse files
HetariHetari
committed
add some default style
1 parent 990d06f commit bf0bbed

File tree

7 files changed

+77
-31
lines changed

7 files changed

+77
-31
lines changed

‎src/App.vue‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
:code="code"
77
language="python"
88
code-class="codeClass"
9+
:numbered="true"
910
:lines-highlighted="[1, 2]"
1011
:words-highlighted="['log']"
1112
as-element="" />
@@ -14,23 +15,11 @@
1415

1516
<script setup lang="ts">
1617
import { CodeBlock } from './components/code-block';
17-
const code = `console.log('Hello');
18-
const name = 'World';
19-
def greet(name) {
20-
console.log('Hello, ' + name);
21-
}
22-
`;
18+
const code = `
19+
console.log('Hello');
20+
const name = 'World';
21+
def greet(name) {
22+
console.log('Hello, ' + name);
23+
}
24+
`;
2325
</script>
24-
25-
<style>
26-
.my-class {
27-
color: rgb(65, 24, 24);
28-
border: 1px solid red;
29-
border-radius: 10px;
30-
font-size: 16px;
31-
}
32-
#my-id {
33-
/* background-color: rgb(0, 0, 0); */
34-
padding: 25px;
35-
}
36-
</style>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@
1515
const props = defineProps(codeBlockProps());
1616
1717
// TODO: add theme
18+
// codeClass: props.codeClass,
1819
const rootContext = computed(() => ({
19-
// codeClass: props.codeClass,
2020
code: parseCodeIntoLines(props.code, props.language),
21+
numbered: props.numbered,
2122
language: props.language,
2223
linesHighlighted: props.linesHighlighted,
2324
wordsHighlighted: props.wordsHighlighted,

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ export const codeBlockProps = () =>
4747
type: String as PropType<string>,
4848
required: false,
4949
default: ''
50+
},
51+
numbered: {
52+
type: Boolean as PropType<boolean>,
53+
required: false,
54+
default: false
5055
}
5156
} as const);
5257

@@ -74,6 +79,7 @@ export interface UseCodeBlockProps {
7479
linesHighlighted: MaybeRefOrGetter<string[] | number[]>;
7580
wordsHighlighted: MaybeRefOrGetter<string[]>;
7681
asElement: MaybeRefOrGetter<string | null>;
82+
numbered: MaybeRefOrGetter<boolean>;
7783
}
7884

7985
// Props goes here
@@ -91,6 +97,7 @@ export type PublicCodeBlockProps = Partial<
9197
| 'linesHighlighted'
9298
| 'wordsHighlighted'
9399
| 'asElement'
100+
| 'numbered'
94101
>
95102
> &
96103
// Then explicitly pick properties from UseCodeBlockProps to make them required
@@ -104,4 +111,5 @@ export type PublicCodeBlockProps = Partial<
104111
| 'linesHighlighted'
105112
| 'wordsHighlighted'
106113
| 'asElement'
114+
| 'numbered'
107115
>;

‎src/components/code/Code.vue‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<component
3-
:is="value.asElement || 'pre'"
4-
v-bind="$attrs">
5-
<template
6-
v-for="(line, i) in value.code"
7-
:key="i">
8-
<Line :line="line"></Line>
2+
<component
3+
:is="value.asElement || 'pre'"
4+
v-bind="$attrs"
5+
class="code"
6+
>
7+
<template v-for="(line, i) in value.code" :key="i">
8+
<Line :number="i + 1" :numbered="value.numbered" :line="line"></Line>
99
</template>
1010
</component>
1111
</template>
@@ -16,7 +16,7 @@
1616
import { useCode } from './use-code';
1717
import Line from '../line/Line.vue';
1818
19-
const props = defineProps(codeProps());
19+
defineProps(codeProps());
2020
2121
defineComponent<codeInstance>({
2222
name: 'Code',
@@ -26,3 +26,11 @@
2626
}
2727
});
2828
</script>
29+
30+
<style>
31+
.code {
32+
padding: 1rem 1.5rem;
33+
border-radius: 0.25rem;
34+
background-color: #f5f5f5;
35+
}
36+
</style>

‎src/components/code/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type CodeProps = {
1111
linesHighlighted: string[] | number[];
1212
wordsHighlighted: string[];
1313
asElement: string;
14+
numbered: boolean;
1415
};
1516

1617
// Props goes here

‎src/components/line/Line.vue‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<template>
2-
<div v-html="line"></div>
2+
<div class="line">
3+
<div class="number-container">
4+
<span
5+
class="number"
6+
v-if="numbered"
7+
>{{ number }}</span
8+
>
9+
</div>
10+
<div v-html="line"></div>
11+
</div>
312
</template>
413

514
<script setup lang="ts">
@@ -17,3 +26,19 @@
1726
}
1827
});
1928
</script>
29+
30+
<style>
31+
.line {
32+
display: flex;
33+
align-items: center;
34+
gap: 1rem;
35+
}
36+
.number-container {
37+
color: #666;
38+
}
39+
40+
.number {
41+
font-size: 0.8rem;
42+
user-select: none;
43+
}
44+
</style>

‎src/components/line/types.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,16 @@ export const lineProps = () =>
1111
line: {
1212
type: String as PropType<string>,
1313
required: true
14+
},
15+
numbered: {
16+
type: Boolean as PropType<boolean>,
17+
required: false,
18+
default: false
19+
},
20+
number: {
21+
type: Number as PropType<number>,
22+
required: false,
23+
default: 0
1424
}
1525
} as const);
1626

@@ -25,8 +35,12 @@ export type lineInstance = ComponentPublicInstance<lineProps, lineExpose>;
2535
// Props goes here
2636
export interface UseLineProps {
2737
line: MaybeRefOrGetter<object>;
38+
numbered: MaybeRefOrGetter<boolean>;
39+
number: MaybeRefOrGetter<number>;
2840
}
2941

3042
// Props goes here
31-
export type PublicLineProps = Partial<Omit<UseLineProps, 'line'>> &
32-
Pick<UseLineProps, 'line'>;
43+
export type PublicLineProps = Partial<
44+
Omit<UseLineProps, 'line' | 'numbered' | 'number'>
45+
> &
46+
Pick<UseLineProps, 'line' | 'numbered' | 'number'>;

0 commit comments

Comments
 (0)