Vuejs Code Block

[!IMPORTANT] Note 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:

npm install vuejs-code-block

Alternatively, if you're using Yarn:

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:

<template>
  <CodeBlock
    theme="dark"
    :code="codeExample"
    language="javascript"
    class="custom-class"
    id="example-code-block" />
</template>

<script setup lang="ts">
  import { CodeBlock } from 'vuejs-code-block';

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

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

[!WARNING] WARNING ❗ Make sure the content of the codeExample string does NOT have leading spaces. The code should be formatted like this:

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

greet('World');
`;

Avoid writing it with leading spaces like this:

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

  greet('World');
`;

Incorrect formatting may cause unexpected whitespace in the code block.

Props: