Vue 3 CodeBlock

by WebDevNerdStuff

v2.3.5

This will also update the examples and documentation below.

# Installation

# Description

The Vue 3 CodeBlock component leverages the power of PrismJS or Highlight.js to provide syntax highlighting for code blocks within your application. The component takes a prop, which is the code to be highlighted, and uses PrismJS or Highlight.js to render the code with syntax highlighting. The component supports a variety of programming languages and can be customized with different themes to match your application's design. With this component, your users can display their code snippets with ease and clarity, making it easier to share and collaborate on code within your application.

# Usage

# Props

#

Type	Description
#browserWindow	boolean	false	To give the code block a browser window look.
#code	object \| string \| number		The code to be displayed in the code block.
#codeBlockRadius	string	0.5rem	The border radius of the code block.
#copyButton	boolean	true	To show a copy button within the code block.
#copyFailedText	string	Copy failed!	The text to be displayed when the code copy failed.
#copyIcons	boolean	true	To show the copy icons on the copy code tab.
#copySuccessText	string	Copied!	The text to be displayed when the code copy was successful.
#copyTab	boolean	true?	To show the copy code tab.
#copyText	string	Copy Code	The text to be displayed on the copy tab.
#cssPath	string \| undefined	undefined	Used to load the css from a specified location instead of the component using the CDN location. If you want to dynamically change the theme, you will also need to change the theme prop.
#floatingTabs	boolean	true	To make the tabs float on top of the code block.
#height	string \| number	auto	The height of the code block.
#highlightjs	boolean	false	Specifies that the Highlight.js library should be used. * Required if `prismjs` prop is not set.
#indent	number	4	The number of spaces to indent the code for json.
#label	string		The label to be displayed on the code block.
#lang	string	javascript	The language of the code.
#maxHeight	string \| number	auto	The max height of the code block.
#persistentCopyButton	boolean	false	To show a persistent copy button within the code block.
#prismjs	boolean	true	Specifies that the PrismJS library should be used. * Required if `highlightjs` prop is not set.
#prismPlugin	boolean	false	Specifies that a PrismJS plugin is being used. This is needed for the plugin to work properly.
#runTab	boolean	false	To show the run tab.
#runText	string	Run	The text to be displayed on the run tab.
#tabGap	string	0.25rem	The gap between the tabs.
#tabs	boolean	false	To show the tabs. This will show/hide all tabs.
#theme	string \| boolean	neon-bunny	The theme to be used for the code block. Available options include: `false` - When you are loading the theme's styles yourself. Neon Bunny Themes `neon-bunny` `neon-bunny-carrot` PrismJS Themes Highlight.js Themes

# Events

Name	Description
#run	The event emitted when the run tab is clicked.
#update:copy-status	The event emitted when the copy status is updated.

# Slots

Name	Description
#copyButton	Slot for the copy button inside the code block of the component.

#label	Slot for the label of the component.

#tabs	Slot for the tabs of the component.

# Examples

Languages

Additional Languages

PrismJS does not load all languages by default. In order to use additional languages you will need to import that languages component.

Plugins

PrismJS does not load all plugins by default. In order to use additional plugins you will need to import them. Please note that not all plugins may work with this component.

Tabs

Copy Button

Browser Window

Other Prop Examples

# Developer Playground

Setup the Playground

This will create a file for you to adjust and play with.
/src/playground/PlaygroundPage.vue

# Dependencies

Vue 3
PrismJS
Highlight.js
UAParser.js