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 511ddd0

Browse filesBrowse files
HetariHetari
committed
update props
1 parent 14c3277 commit 511ddd0
Copy full SHA for 511ddd0

File tree

Expand file treeCollapse file tree

5 files changed

+46
-36
lines changed
Filter options
Expand file treeCollapse file tree

5 files changed

+46
-36
lines changed

‎README.md

Copy file name to clipboardExpand all lines: README.md
+22-21Lines changed: 22 additions & 21 deletions
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

Copy file name to clipboardExpand all lines: docs/get-started.md
+9-7Lines changed: 9 additions & 7 deletions
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

Copy file name to clipboardExpand all lines: src/App.vue
+10-7Lines changed: 10 additions & 7 deletions
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

Copy file name to clipboardExpand all lines: src/components/code-block/types.ts
+3Lines changed: 3 additions & 0 deletions
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

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
@@ -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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.