Customizable & Themeable Code Block Component For Vue 3

CodeBlock is a Vue 3 component that adds beautiful code snippets with syntax highlighting to your Vue-powered apps. It uses PrismJS or Highlight.js to take raw code and output it with proper formatting and coloring for a variety of programming languages.

Just pass the code as a prop to CodeBlock, and it handles the syntax highlighting automatically. The component also supports different themes, so you can match the styling to your app’s design system.

How to use it:

1. Import and register the CodeBlock component.

import { createApp } from 'vue';
import CodeBlock from 'vue3-code-block';
createApp()
  .component('CodeBlock', CodeBlock)
  .mount('#app');

2. Insert your code snippets to the CodeBlock.

<template>
  <CodeBlock
    :code="myCode"
    label="JavaScript"
    lang="javascript"
  />
</template>
<script setup>
  const myCode = `
    Your Code Snippets Here
  `;
</script>

3. It also provides a function which allows you to run the code when clicking on the Run label.

<template>
  <CodeBlock
    :code="myCode"
    label="JavaScript"
    lang="javascript"
    run-tab
    @run="customFunction"
  />
</template>

4. All possible props to customize the CodeBlock.

browserWindow?: boolean;
code?: object | [] | string | number;
codeBlockRadius?: string;
copyButton?: boolean;
copyIcons?: boolean;
copyTab?: boolean;
copyFailedText?: string;
copyText?: string;
copySuccessText?: string;
floatingTabs?: boolean;
globalOptions?: boolean;
height?: string | number;
highlightjs?: boolean; // uses highlight.js
indent?: number;
label?: string;
lang?: string;
languages?: string[];
maxHeight?: string | number;
persistentCopyButton?: boolean;
prismjs?: boolean; // uses prism.js
prismPlugin?: boolean;
runTab?: boolean;
runText?: string;
tabGap?: string | number;
tabs?: boolean;
// neon-bunny
// neon-bunny-carrot
// and highlight.js & prism.js themes
theme?: string | boolean;

Preview:

Download Details:

Author:

Live Demo:

Download Link:

Official Website:

Install & Download: