https://github.com/hetari/vuejs-code-block
</> Set of basic styled UI components to build powerful code blocks in Vue 🧩
https://github.com/hetari/vuejs-code-block
code-blocks component highlight typescript ui-components unstyled unstyled-components vue vue-typescript vue3 vuejs vuejs-components vuejs-library vuejs3
Last synced: 11 months ago
JSON representation
</> Set of basic styled UI components to build powerful code blocks in Vue 🧩
- Host: GitHub
- URL: https://github.com/hetari/vuejs-code-block
- Owner: Hetari
- License: mit
- Created: 2024-09-27T13:04:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-16T15:42:03.000Z (over 1 year ago)
- Last Synced: 2025-03-17T11:50:29.703Z (11 months ago)
- Topics: code-blocks, component, highlight, typescript, ui-components, unstyled, unstyled-components, vue, vue-typescript, vue3, vuejs, vuejs-components, vuejs-library, vuejs3
- Language: TypeScript
- Homepage: https://hetari.github.io/vuejs-code-block/
- Size: 1.07 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vuejs Code Block
## Enjoying my project? Please show your appreciation by starring it on GitHub! ⭐
[](https://www.npmjs.com/package/vuejs-code-block)
> [!IMPORTANT]
> For now this package has default themes, but in the future, it will be fully unstyled, allowing you to style it however you like.
## Installation
To get started, install the package via npm:
```bash
npm install vuejs-code-block
```
Alternatively, if you're using Yarn:
```bash
yarn add vuejs-code-block
```
## Basic Usage
Once installed, you can start using the `CodeBlock` component in your `Vue 3` app to display syntax-highlighted code. Here’s a simple example:
```vue ts:line-numbers {1}
import { CodeBlock } from './components/code-block';
const code = `const name = 'Vuejs Code Block';
const usrls = {
github: 'https://github.com/hetari/vuejs-code-block',
docs: 'https://hetari.github.io/vuejs-code-block/'
};`;
```
> [!WARNING] WARNING ❗
> Make sure the content of the `codeExample` string does **NOT** have leading spaces.
> The code should be formatted like this:
>
> ```ts
> const codeExample = `
> function greet(name) {
> console.log('Hello, ' + name);
> }
>
> greet('World');
> `;
> ```
>
> Avoid writing it with leading spaces like this:
>
> ```ts
> const codeExample = `
> function greet(name) {
> console.log('Hello, ' + name);
> }
>
> greet('World');
> `;
> ```
>
> Incorrect formatting may cause unexpected whitespace in the code block.
## Props:
| Prop | Type | Required | Default | Description |
| ------------ | --------- | -------- | ------- | ------------------------------------------------------------------------------------------ |
| `code` | `string` | Yes | N/A | The code you want to display, passed as a string. |
| `language` | `string` | Yes | N/A | Specifies the programming language for syntax highlighting. |
| `theme` | `string` | Yes | N/A | Specifies the theme to be used for syntax highlighting (light or dark). |
| `asElement` | `string` | No | `
` | Defines the HTML element wrapping the code block (defaults to ``). |
| `numbered` | `boolean` | No | `false` | Displays line numbers when set to `true`. |
| `showHeader` | `boolean` | No | `true` | Displays the code block header (title, language icon, and copy button) when set to `true`. |
| `file-name` | `string` | No | N/A | The name of the file to be displayed in the header. |
## Themes:
| Theme Name | Image |
| --------------------------- | --------------------------------------------------------------------- |
| Dracula |  |
| Duotone Dark |  |
| Duotone Light |  |
| GitHub |  |
| Night Owl |  |
| None |  |
| Oceanic Next |  |
| Prism Dark |  |
| Prism Funky |  |
| Prism Okaidia |  |
| Prism Solarized Light Theme |  |
| Prism |  |
| Prism Theme Coy |  |
| Prism Tomorrow |  |
| Prism Twilight |  |
| Shades of Purple |  |
| UltraMin |  |
| VS Dark |  |