vuejs-code-block

KO | EN

gitlite — search

#hacktoberfest #ai #go #golang #android #machine-learning #docker #awesome #cli #kubernetes #security #pytorch #mcp #openai

vuejs-code-block

(★ 13)

</> Set of basic styled UI components to build powerful code blocks in Vue 🧩

vuejs-code-block 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vuejs Code Block

## Enjoying my project? Please show your appreciation by starring it on GitHub! ⭐

[![NPM version](https://img.shields.io/npm/v/vuejs-code-block.svg)](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}
<template>
  <CodeBlock
    :code="code"
    :numbered="true"
    :show-header="true"
    file-name="codeBlock.ts"
    language="ts"
    theme="dracula">
  </CodeBlock>
</template>

> [!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       | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`).                    |
| `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.                                        |

<!-- ## Custom Styling

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:

```vue
<template>
  <div class="p-4 bg-gray-800 rounded-lg">
    <CodeBlock
      theme="dark"
      :code="exampleCode"
      language="javascript" />
  </div>
</template>

const exampleCode = `function greet(name) {
  console.log('Hello, ' + name);
}

greet('World');
`;
</script>
```
-->

## Themes:

| Theme Name                  | Image                                                                 |
| --------------------------- | --------------------------------------------------------------------- |
| Dracula                     | ![Dracula Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/draculaTheme.webp)                     |
| Duotone Dark                | ![Duotone Dark Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/duotoneDarkTheme.webp)            |
| Duotone Light               | ![Duotone Light Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/duotoneLightTheme.webp)          |
| GitHub                      | ![GitHub Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/githubTheme.webp)                       |
| Night Owl                   | ![Night Owl Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/nightOwlTheme.webp)                  |
| None                        | ![None](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/none.webp)                                      |
| Oceanic Next                | ![Oceanic Next Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/oceanicNextTheme.webp)            |
| Prism Dark                  | ![Prism Dark Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/prismDarkTheme.webp)                |
| Prism Funky                 | ![Prism Funky Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/prismFunkyTheme.webp)              |
| Prism Okaidia               | ![Prism Okaidia Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/prismOkaidiaTheme.webp)          |
| Prism Solarized Light Theme | ![Prism Solarized Light](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/prismSolarizedLightTheme.webp) |
| Prism                       | ![Prism Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/prismTheme.webp)                         |
| Prism Theme Coy             | ![Prism Theme Coy](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/prismThemeCoy.webp)                  |
| Prism Tomorrow              | ![Prism Tomorrow Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/prismTomorrowTheme.webp)        |
| Prism Twilight              | ![Prism Twilight Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/prismTwilightTheme.webp)        |
| Shades of Purple            | ![Shades of Purple](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/shadesOfPurple.webp)                |
| UltraMin                    | ![UltraMin Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/ultraminTheme.webp)                   |
| VS Dark                     | ![VS Dark Theme](https://raw.githubusercontent.com/hetari/vuejs-code-block/main/docs/public/vsDarkTheme.webp)                      |

vuejs-code-block

vuejs-code-block 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vuejs-code-block

vuejs-code-block 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README