Skip to content

Commit 976f06f

Browse files
HetariHetari
committed
update docs
1 parent 6494442 commit 976f06f

File tree

8 files changed

+75
-80
lines changed

8 files changed

+75
-80
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ export default defineConfig({
2020
rel: 'noopener'
2121
},
2222
{ text: 'Guide', link: '/get-started' },
23-
{
24-
text: 'Changelog',
25-
items: [{ text: 'v0.0.1', link: '/' }]
26-
}
23+
// {
24+
// text: 'Changelog',
25+
// items: [{ text: 'v0.0.1', link: '/' }]
26+
// }
2727
],
2828

2929
socialLinks: [

‎docs/.vitepress/theme/custom.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
:root {
2+
--vp-brand: #019763;
3+
--vp-c-brand-1: #019763;
24
--vp-c-brand-2: #019763;
35
--vp-c-brand-3: #04a86f;
46

@@ -26,8 +28,8 @@
2628
);
2729
--vp-home-hero-image-background-image: linear-gradient(
2830
45deg,
29-
#292e2c 50%,
30-
#0c9162 50%
31+
#44695a 50%,
32+
#0c9163c0 50%
3133
);
3234
--vp-home-hero-image-filter: blur(80px);
3335
}

‎docs/get-started.md‎

Lines changed: 61 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ layout: doc
44

55
# Get Started with vuejs-code-block
66

7-
87
## Installation
98

109
To get started, install the package via npm:
@@ -21,91 +20,97 @@ yarn add vuejs-code-block
2120

2221
## Basic Usage
2322

24-
Once installed, you can start using the `CodeBlock` component to display syntax-highlighted code in your Vue app. Here’s a simple example:
23+
Once installed, you can start using the `CodeBlock` component in your `Vue 3` app to display syntax-highlighted code. Here’s a simple example:
2524

26-
```vue
25+
```vue ts:line-numbers {1}
2726
<template>
28-
<CodeBlock :code="exampleCode" language="javascript" />
27+
<CodeBlock
28+
:code="codeExample"
29+
language="javascript"
30+
class="custom-class"
31+
id="example-code-block" />
2932
</template>
3033
31-
<script setup>
32-
import { CodeBlock } from 'vuejs-code-block'
34+
<script setup lang="ts">
35+
import { CodeBlock } from 'vuejs-code-block';
3336
34-
const exampleCode = `function greet(name) {
37+
const codeExample = `
38+
function greet(name) {
3539
console.log('Hello, ' + name);
3640
}
3741
3842
greet('World');
39-
`
43+
`;
4044
</script>
4145
```
4246

43-
### Props:
44-
- `code`: The actual code you want to display.
45-
- `language`: The programming language for syntax highlighting.
46-
47-
## Advanced Features
48-
49-
### Line Numbers
50-
51-
To display line numbers alongside your code, simply use the `:show-line-numbers` prop.
52-
53-
```vue
54-
<CodeBlock :code="exampleCode" language="javascript" :show-line-numbers="true" />
55-
```
56-
57-
### Line Highlighting
58-
59-
You can also highlight specific lines by using the `:highlight-lines` prop.
60-
61-
```vue
62-
<CodeBlock :code="exampleCode" language="javascript" :highlight-lines="[1, 3]" />
63-
```
64-
65-
## Custom Styling
47+
> [!WARNING] WARNING ❗
48+
> Make sure the content of the `codeExample` string does **NOT** have leading spaces.
49+
> The code should be formatted like this:
50+
>
51+
> ```ts
52+
> const codeExample = `
53+
> function greet(name) {
54+
> console.log('Hello, ' + name);
55+
> }
56+
>
57+
> greet('World');
58+
> `;
59+
> ```
60+
>
61+
> Avoid writing it with leading spaces like this:
62+
>
63+
> ```ts
64+
> const codeExample = `
65+
> function greet(name) {
66+
> console.log('Hello, ' + name);
67+
> }
68+
>
69+
> greet('World');
70+
> `;
71+
> ```
72+
>
73+
> Incorrect formatting may cause unexpected whitespace in the code block.
74+
75+
<!-- - **`codeClass`** (optional): A custom CSS class for the `<code>` element inside the block. This allows you to style the code content specifically. -->
76+
<!-- - **`linesHighlighted`** (optional): An array of line numbers to be highlighted. Accepts an array of strings or numbers (e.g., `[1, 3]` to highlight the 1st and 3rd lines). -->
77+
<!-- - **`wordsHighlighted`** (optional): An array of specific words to be highlighted within the code. Accepts an array of strings (e.g., `['console', 'log']`). -->
78+
79+
## Props:
80+
81+
| Prop | Type | Required | Default | Description |
82+
| ----------- | --------- | -------- | ------- | ----------------------------------------------------------------------- |
83+
| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. |
84+
| `language` | `string` | Yes | N/A | Specifies the programming language for syntax highlighting. |
85+
| `asElement` | `string` | No | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). |
86+
| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. |
87+
88+
<!-- ## Custom Styling
6689
6790
One of the key features of **vuejs-code-block** is that it provides **unstyled** components, allowing you to style them however you like. For example, using CSS or Tailwind classes:
6891
6992
```vue
7093
<template>
7194
<div class="p-4 bg-gray-800 rounded-lg">
72-
<CodeBlock :code="exampleCode" language="javascript" />
95+
<CodeBlock
96+
:code="exampleCode"
97+
language="javascript" />
7398
</div>
7499
</template>
75100
76101
<script setup>
77-
import { CodeBlock } from 'vuejs-code-block'
102+
import { CodeBlock } from 'vuejs-code-block';
78103
79-
const exampleCode = `function greet(name) {
104+
const exampleCode = `function greet(name) {
80105
console.log('Hello, ' + name);
81106
}
82107
83108
greet('World');
84-
`
109+
`;
85110
</script>
86-
87-
<style>
88-
.my-custom-code {
89-
color: #00ff00;
90-
}
91-
</style>
92111
```
93-
94-
## Customization & Configuration
95-
96-
With **vuejs-code-block**, you can extend functionality to suit your needs:
97-
98-
- **Custom Line Numbers**: Customize how line numbers appear.
99-
- **Syntax Themes**: Use Prism.js themes or create your own.
100-
- **Dynamic Code Blocks**: Bind code content from your app’s data for interactive code examples.
101-
102-
## Conclusion
103-
104-
You now have everything you need to start building powerful, customizable code blocks in your Vue.js or VitePress projects using **vuejs-code-block**. For more advanced use cases, be sure to explore the documentation and available props.
112+
-->
105113
106114
## Useful Links
107115

108116
- [GitHub Repository](https://github.com/hetari/vuejs-code-block)
109-
- [Prism.js Documentation](https://prismjs.com/)
110-
- [Vue.js Documentation](https://vuejs.org/)
111-

‎docs/why.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
layout: doc
33
---
44

5+
# Why `vuejs-code-block`?
56

6-
# Why Choose vuejs-code-block?
7-
8-
Building code blocks can be surprisingly complex, especially when you're aiming for more than just basic syntax highlighting. While there are many libraries available that handle syntax highlighting, the moment you require additional features—like **line numbers**, **line highlighting**, or **word-level customization**—things get tricky.
7+
Building code blocks can be surprisingly complex, especially when you're aiming for more than just basic syntax highlighting. While there are many libraries available that handle syntax highlighting, the moment you require additional features—like **line numbers**, **line highlighting**, or **word-level customization**—things get tricky.
98

109
If you're a technical writer or developer creating documentation or blog posts, these features are often essential. However, most syntax highlighting libraries fall short, either lacking these features entirely or making it difficult to customize or extend their functionality.
1110

@@ -15,6 +14,7 @@ If you're a technical writer or developer creating documentation or blog posts,
1514

1615
<!-- TODO: -->
1716
<!-- **prismjs** -->
17+
1818
`vuejs-code-block` is built on top of the widely-used library for syntax highlighting. We've extended it by adding additional features such as:
1919

2020
1. **Line Numbers**: Toggle line numbers on or off.
@@ -23,7 +23,6 @@ If you're a technical writer or developer creating documentation or blog posts,
2323

2424
All of these features are exposed as **primitive Vue components**, giving you full flexibility to compose and style your code blocks however you want.
2525

26-
2726
## Why Vue.js?
2827

2928
By offering **primitive components**, `vuejs-code-block` is incredibly flexible and allows for deep customization, unlike other libraries that come with rigid styling. As a Vue.js developer, you get to **compose** and **reuse** these components in a highly modular fashion, leveraging Vue’s reactive data and lifecycle methods for dynamic and performant code blocks.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<span
1616
class="number"
1717
v-if="!props.numbered"
18-
>{{ props.number }}</span
18+
>{{ i + 1 }}</span
1919
>
2020
</div>
2121
<div v-html="line"></div>

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ export const codeBlockProps = () =>
2525
},
2626
language: {
2727
type: String as PropType<string>,
28-
required: false,
29-
default: 'markup'
28+
required: true
3029
},
3130
codeClass: {
3231
type: String as PropType<string>,
@@ -52,11 +51,6 @@ export const codeBlockProps = () =>
5251
type: Boolean as PropType<boolean>,
5352
required: false,
5453
default: false
55-
},
56-
number: {
57-
type: Number as PropType<number>,
58-
required: false,
59-
default: 0
6054
}
6155
} as const);
6256

@@ -85,7 +79,6 @@ export interface UseCodeBlockProps {
8579
wordsHighlighted: MaybeRefOrGetter<string[]>;
8680
asElement: MaybeRefOrGetter<string | null>;
8781
numbered: MaybeRefOrGetter<boolean>;
88-
number: MaybeRefOrGetter<number>;
8982
}
9083

9184
// Props goes here
@@ -104,7 +97,6 @@ export type PublicCodeBlockProps = Partial<
10497
| 'wordsHighlighted'
10598
| 'asElement'
10699
| 'numbered'
107-
| 'number'
108100
>
109101
> &
110102
// Then explicitly pick properties from UseCodeBlockProps to make them required
@@ -119,5 +111,4 @@ export type PublicCodeBlockProps = Partial<
119111
| 'wordsHighlighted'
120112
| 'asElement'
121113
| 'numbered'
122-
| 'number'
123114
>;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ const defaultProps = {
1717
linesHighlighted: [],
1818
wordsHighlighted: [],
1919
asElement: '',
20-
numbered: false,
21-
number: 0
20+
numbered: false
2221
};
2322

2423
export function useCodeBlock(props: PublicCodeBlockProps) {

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ declare module 'code-block' {
1313
wordsHighlighted: string[];
1414
asElement: string;
1515
numbered: boolean;
16-
number: number;
1716
}
1817

1918
const CodeBlockType: DefineComponent<CodeBlockProps>;

0 commit comments

Comments
 (0)