Skip to content

Commit 511ddd0

Browse files
HetariHetari
committed
update props
1 parent 14c3277 commit 511ddd0

File tree

5 files changed

+46
-36
lines changed

5 files changed

+46
-36
lines changed

‎README.md

+22-21
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,22 @@ Once installed, you can start using the `CodeBlock` component in your `Vue 3` ap
2828
```vue ts:line-numbers {1}
2929
<template>
3030
<CodeBlock
31-
theme="dark"
32-
:code="codeExample"
33-
language="javascript"
34-
class="custom-class"
35-
id="example-code-block" />
31+
:code="code"
32+
:numbered="true"
33+
:show-header="true"
34+
file-name="codeBlock.ts"
35+
language="ts"
36+
theme="dracula">
37+
</CodeBlock>
3638
</template>
3739
3840
<script setup lang="ts">
39-
import { CodeBlock } from 'vuejs-code-block';
40-
41-
const codeExample = `
42-
function greet(name) {
43-
console.log('Hello, ' + name);
44-
}
45-
46-
greet('World');
47-
`;
41+
import { CodeBlock } from './components/code-block';
42+
const code = `const name = 'Vuejs Code Block';
43+
const usrls = {
44+
github: 'https://github.com/hetari/vuejs-code-block',
45+
docs: 'https://hetari.github.io/vuejs-code-block/'
46+
};`;
4847
</script>
4948
```
5049

@@ -82,13 +81,15 @@ greet('World');
8281
8382
## Props:
8483
85-
| Prop | Type | Required | Default | Description |
86-
| ----------- | --------- | -------- | ------- | ----------------------------------------------------------------------- |
87-
| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. |
88-
| `language` | `string` | Yes | N/A | Specifies the programming language for syntax highlighting. |
89-
| `theme` | `string` | Yes | N/A | Specifies the theme to be used for syntax highlighting (light or dark). |
90-
| `asElement` | `string` | No | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). |
91-
| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. |
84+
| Prop | Type | Required | Default | Description |
85+
| ------------ | --------- | -------- | ------- | ------------------------------------------------------------------------------------------ |
86+
| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. |
87+
| `language` | `string` | Yes | N/A | Specifies the programming language for syntax highlighting. |
88+
| `theme` | `string` | Yes | N/A | Specifies the theme to be used for syntax highlighting (light or dark). |
89+
| `asElement` | `string` | No | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). |
90+
| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. |
91+
| `showHeader` | `boolean` | No | `true` | Displays the code block header (title, language icon, and copy button) when set to `true`. |
92+
| `file-name` | `string` | No | N/A | The name of the file to be displayed in the header. |
9293
9394
<!-- ## Custom Styling
9495

‎docs/get-started.md

+9-7
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,15 @@ greet('World');
7979
8080
## Props:
8181
82-
| Prop | Type | Required | Default | Description |
83-
| ----------- | --------- | -------- | ------- | ----------------------------------------------------------------------- |
84-
| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. |
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). |
87-
| `asElement` | `string` | No | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). |
88-
| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. |
82+
| Prop | Type | Required | Default | Description |
83+
| ------------ | --------- | -------- | ------- | ------------------------------------------------------------------------------------------ |
84+
| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. |
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). |
87+
| `asElement` | `string` | No | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). |
88+
| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. |
89+
| `showHeader` | `boolean` | No | `true` | Displays the code block header (title, language icon, and copy button) when set to `true`. |
90+
| `file-name` | `string` | No | N/A | The name of the file to be displayed in the header. |
8991
9092
<!-- ## Custom Styling
9193

‎src/App.vue

+10-7
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,24 @@
22
<h1 class="">Vuejs Code Block UI Component</h1>
33

44
<CodeBlock
5-
theme="dracula"
5+
theme="prismSolarizedLight"
66
:code="code"
7-
language="python"
7+
language="ts"
88
:numbered="true"
99
:show-header="true"
10-
file-name="ss.py">
10+
file-name="codeBlock.ts">
1111
</CodeBlock>
1212
</template>
1313

1414
<script setup lang="ts">
1515
import { CodeBlock } from './components/code-block';
16-
const code = `print("Hello, World!")
17-
s = "lorem ipsum dolor sit amet consect etur adipiscing elit"
18-
def add(a, b):
19-
const ant = 1`;
16+
const code = `const name = 'Vuejs Code Block';
17+
const author = 'Ebraheem Alhetari';
18+
let version = '1.0.0';
19+
const usrls = {
20+
github: 'https://github.com/hetari/vuejs-code-block',
21+
docs: 'https://hetari.github.io/vuejs-code-block/'
22+
};`;
2023
2124
// import { CodeBlock } from '../dist';
2225
// import { Prism } from './components/prism-langs';

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

+3
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ export interface UseCodeBlockProps {
9797
numbered: MaybeRefOrGetter<boolean>;
9898
theme: MaybeRefOrGetter<themesType>;
9999
fileName: MaybeRefOrGetter<string>;
100+
showHeader: MaybeRefOrGetter<boolean>;
100101
}
101102

102103
// Props goes here
@@ -117,6 +118,7 @@ export type PublicCodeBlockProps = Partial<
117118
| 'numbered'
118119
| 'theme'
119120
| 'fileName'
121+
| 'showHeader'
120122
>
121123
> &
122124
// Then explicitly pick properties from UseCodeBlockProps to make them required
@@ -133,4 +135,5 @@ export type PublicCodeBlockProps = Partial<
133135
| 'numbered'
134136
| 'theme'
135137
| 'fileName'
138+
| 'showHeader'
136139
>;

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ const defaultProps = {
1919
asElement: '',
2020
numbered: false,
2121
theme: '',
22-
fileName: ''
22+
fileName: '',
23+
showHeader: false
2324
};
2425

2526
export function useCodeBlock(props: PublicCodeBlockProps) {

0 commit comments

Comments
 (0)