vue-hi-code

vue-hi-code

A light Vue 3 component to display javascript snippets.

npm i vue-hi-code

import { VueHiCode } from "vue-hi-code";
import "vue-hi-code/style.css"; // Include the css

const content = `
cosnt foo = function(param) {
    return param + 1;
}
`;

<VueHiCode :content="content" language="javascript" />

Props

Name	Type	Required	Default
backgroundColor	string	no	"#2A2A2A"
baseTextColor	string	no	"#CCCCCC"
borderRadius	string	no	"0.3rem"
colorBrackets	string	no	"#559AD3"
colorComment	string	no	"#8A8A8A"
colorCssSelector	string	no	"#D7BA7D"
colorCurlyBrackets	string	no	"#8A8A8A"
colorError	string	no	"#E46962"
colorFunction	string	no	"#DCDCAA"
colorHtmlTag	string	no	"#559AD3"
colorJsReserved	string	no	"#4ec9b0"
colorKeywords	string	no	"#B37BAE"
colorLineNumber	string	no	"#8A8A8A"
colorNumber	string	no	"#AEC6A1"
colorParenthesis	string	no	"#8A8A8A"
colorString	string	no	"#CD9077"
colorVariableKeyword	string	no	"#559AD3"
colorSpecial	string	no	"#559AD3"
content	string	yes
copyIconColor	string	no	"#CCCCCC"
copyIconSize	number	no	20
copyIconStrokeWidth	number	no	1.5
fontFamily	string	no	"'Fira code', monospace"
fontSize	string	no	"1rem"
language	"javascript" or "html" or "css"	yes
lineHeight	string	no	"1.4rem"
padding	string	no	"1rem"
showIcon	boolean	no	false
title	string	no	""
tsTypesCustom	string[]	no	[]
withCopy	boolean	no	true
withLineNumbers	boolean	no	false

Emits

Using the props withCopy, a button is displayed on the top right of the component, which will copy the text content on click, and emit "copy" with the content.

<VueHiCode :content="content" language="javascript" @copy="copy" />