|
1 | | -# Vue 3 + TypeScript + Vite |
| 1 | +# Vuejs Code Block |
2 | 2 |
|
3 | | -This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
| 3 | +[](https://www.npmjs.com/package/vuejs-code-block) |
4 | 4 |
|
5 | | -Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
| 5 | +> [!IMPORTANT] Note |
| 6 | +> For now this package has default themes, but in the future, it will be fully unstyled, allowing you to style it however you like. |
| 7 | +
|
| 8 | +## Installation |
| 9 | + |
| 10 | +To get started, install the package via npm: |
| 11 | + |
| 12 | +```bash |
| 13 | +npm install vuejs-code-block |
| 14 | +``` |
| 15 | + |
| 16 | +Alternatively, if you're using Yarn: |
| 17 | + |
| 18 | +```bash |
| 19 | +yarn add vuejs-code-block |
| 20 | +``` |
| 21 | + |
| 22 | +## Basic Usage |
| 23 | + |
| 24 | +Once installed, you can start using the `CodeBlock` component in your `Vue 3` app to display syntax-highlighted code. Here’s a simple example: |
| 25 | + |
| 26 | +```vue ts:line-numbers {1} |
| 27 | +<template> |
| 28 | + <CodeBlock |
| 29 | + theme="dark" |
| 30 | + :code="codeExample" |
| 31 | + language="javascript" |
| 32 | + class="custom-class" |
| 33 | + id="example-code-block" /> |
| 34 | +</template> |
| 35 | +
|
| 36 | +<script setup lang="ts"> |
| 37 | + import { CodeBlock } from 'vuejs-code-block'; |
| 38 | +
|
| 39 | + const codeExample = ` |
| 40 | +function greet(name) { |
| 41 | + console.log('Hello, ' + name); |
| 42 | +} |
| 43 | +
|
| 44 | +greet('World'); |
| 45 | +`; |
| 46 | +</script> |
| 47 | +``` |
| 48 | + |
| 49 | +> [!WARNING] WARNING ❗ |
| 50 | +> Make sure the content of the `codeExample` string does **NOT** have leading spaces. |
| 51 | +> The code should be formatted like this: |
| 52 | +> |
| 53 | +> ```ts |
| 54 | +> const codeExample = ` |
| 55 | +> function greet(name) { |
| 56 | +> console.log('Hello, ' + name); |
| 57 | +> } |
| 58 | +> |
| 59 | +> greet('World'); |
| 60 | +> `; |
| 61 | +> ``` |
| 62 | +> |
| 63 | +> Avoid writing it with leading spaces like this: |
| 64 | +> |
| 65 | +> ```ts |
| 66 | +> const codeExample = ` |
| 67 | +> function greet(name) { |
| 68 | +> console.log('Hello, ' + name); |
| 69 | +> } |
| 70 | +> |
| 71 | +> greet('World'); |
| 72 | +> `; |
| 73 | +> ``` |
| 74 | +> |
| 75 | +> Incorrect formatting may cause unexpected whitespace in the code block. |
| 76 | +
|
| 77 | +<!-- - **`codeClass`** (optional): A custom CSS class for the `<code>` element inside the block. This allows you to style the code content specifically. --> |
| 78 | +<!-- - **`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). --> |
| 79 | +<!-- - **`wordsHighlighted`** (optional): An array of specific words to be highlighted within the code. Accepts an array of strings (e.g., `['console', 'log']`). --> |
| 80 | +
|
| 81 | +## Props: |
| 82 | +
|
| 83 | +| Prop | Type | Required | Default | Description | |
| 84 | +| ----------- | --------- | -------- | ------- | ----------------------------------------------------------------------- | |
| 85 | +| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. | |
| 86 | +| `language` | `string` | Yes | N/A | Specifies the programming language for syntax highlighting. | |
| 87 | +| `theme` | `string` | Yes | N/A | Specifies the theme to be used for syntax highlighting (light or dark). | |
| 88 | +| `asElement` | `string` | No | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). | |
| 89 | +| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. | |
| 90 | +
|
| 91 | +<!-- ## Custom Styling |
| 92 | +
|
| 93 | +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: |
| 94 | +
|
| 95 | +```vue |
| 96 | +<template> |
| 97 | + <div class="p-4 bg-gray-800 rounded-lg"> |
| 98 | + <CodeBlock |
| 99 | + theme="dark" |
| 100 | + :code="exampleCode" |
| 101 | + language="javascript" /> |
| 102 | + </div> |
| 103 | +</template> |
| 104 | +
|
| 105 | +<script setup> |
| 106 | + import { CodeBlock } from 'vuejs-code-block'; |
| 107 | +
|
| 108 | + const exampleCode = `function greet(name) { |
| 109 | + console.log('Hello, ' + name); |
| 110 | +} |
| 111 | +
|
| 112 | +greet('World'); |
| 113 | +`; |
| 114 | +</script> |
| 115 | +``` |
| 116 | +--> |
0 commit comments