Skip to content

Commit de18609

Browse files
HetariHetari
committed
update props
1 parent 14c3277 commit de18609

File tree

5 files changed

+51
-37
lines changed

5 files changed

+51
-37
lines changed

‎README.md

+27-22
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22

33
[![NPM version](https://img.shields.io/npm/v/vuejs-code-block.svg)](https://www.npmjs.com/package/vuejs-code-block)
44

5-
Documentation: [https://vuejs-code-block.netlify.app/](https://vuejs-code-block.netlify.app/)
5+
<div align="center">
6+
<a href="https://hetari.github.io/vuejs-code-block/">
7+
<img src="./docs/public/logo.webp" width="250" />
8+
</a>
9+
</div>
610

711
> [!IMPORTANT]
812
> For now this package has default themes, but in the future, it will be fully unstyled, allowing you to style it however you like.
@@ -28,23 +32,22 @@ Once installed, you can start using the `CodeBlock` component in your `Vue 3` ap
2832
```vue ts:line-numbers {1}
2933
<template>
3034
<CodeBlock
31-
theme="dark"
32-
:code="codeExample"
33-
language="javascript"
34-
class="custom-class"
35-
id="example-code-block" />
35+
:code="code"
36+
:numbered="true"
37+
:show-header="true"
38+
file-name="codeBlock.ts"
39+
language="ts"
40+
theme="dracula">
41+
</CodeBlock>
3642
</template>
3743
3844
<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-
`;
45+
import { CodeBlock } from './components/code-block';
46+
const code = `const name = 'Vuejs Code Block';
47+
const usrls = {
48+
github: 'https://github.com/hetari/vuejs-code-block',
49+
docs: 'https://hetari.github.io/vuejs-code-block/'
50+
};`;
4851
</script>
4952
```
5053

@@ -82,13 +85,15 @@ greet('World');
8285
8386
## Props:
8487
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`. |
88+
| Prop | Type | Required | Default | Description |
89+
| ------------ | --------- | -------- | ------- | ------------------------------------------------------------------------------------------ |
90+
| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. |
91+
| `language` | `string` | Yes | N/A | Specifies the programming language for syntax highlighting. |
92+
| `theme` | `string` | Yes | N/A | Specifies the theme to be used for syntax highlighting (light or dark). |
93+
| `asElement` | `string` | No | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). |
94+
| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. |
95+
| `showHeader` | `boolean` | No | `true` | Displays the code block header (title, language icon, and copy button) when set to `true`. |
96+
| `file-name` | `string` | No | N/A | The name of the file to be displayed in the header. |
9297
9398
<!-- ## Custom Styling
9499

‎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)