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" />