Enjoying my project? Please show your appreciation by starring it on GitHub! ⭐
For now this package has default themes, but in the future, it will be fully unstyled, allowing you to style it however you like.
To get started, install the package via npm:
npm install vuejs-code-block Alternatively, if you're using Yarn:
yarn add vuejs-code-block Once installed, you can start using theCodeBlock component in yourVue 3 app to display syntax-highlighted code. Here’s a simple example:
<template > <CodeBlock :code =" code" :numbered =" true" :show-header =" true" file-name =" codeBlock.ts" language =" ts" theme =" dracula" CodeBlock ></template ><script setup lang="ts">import {CodeBlock }from ' ./components/code-block' const = ` const name = 'Vuejs Code Block'; const usrls = { github: 'https://github.com/hetari/vuejs-code-block', docs: 'https://hetari.github.io/vuejs-code-block/' }; ` ;script > [!WARNING] WARNING ❗Make sure the content of thecodeExample string doesNOT 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.
Prop Type Required Default Description codestringYes N/A The code you want to display, passed as a string. languagestringYes N/A Specifies the programming language for syntax highlighting. themestringYes N/A Specifies the theme to be used for syntax highlighting (light or dark). asElementstringNo <pre>Defines the HTML element wrapping the code block (defaults to<pre>). numberedbooleanNo falseDisplays line numbers when set totrue. showHeaderbooleanNo trueDisplays the code block header (title, language icon, and copy button) when set totrue. file-namestringNo N/A The name of the file to be displayed in the header.
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
