VueVentus DocsVvPrismVars Component
The VvPrismVars Component is an implementation of @antfu's awesome prism-theme-vars package, but setup to allow you to use Tailwind CSS classes to control your app's code highlighting colors.
OVERRIDES PRISM.JS CSS
The VvPrismVars Component pushes a CSS variables packed into a style tag preceding your highlighted code. This CSS cascades over any Prism.js CSS theme you may be using.
Import
To import a VvPrismVars Component installed by the vueventus CLI or vv-update CLI:
// ./src/components/SomeComponent.vue
import VvPrismVars from './vv/elements/VvPrismVars.vue'TIP
CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.
Prop: commentStyle
Type: String
Valid Values: "normal", "italic", "oblique"
Default: "normal"
The VvPrismVars Component commentStyle prop sets the font style of comments in highlighted code.
Syntax
<VvPrismVars comment-style="normal"/>Typing for Downstream Component Instances
Coming Soon!
Prop: debug
Type: Boolean
Default: false
The VvPrismVars Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-prism-vars- prefixed HTML attributes.
Syntax
<VvPrismVars :debug="true"/>Prop: fontSize
Type: String
Default: "1rem"
The VvPrismVars Component fontSize prop sets the font size of highlighted code.
Syntax
<VvPrismVars font-size="1rem"/>Prop: lineHeight
Type: String
Default: "1.3rem"
The VvPrismVars Component lineHeight prop sets the line height of highlighted code.
Syntax
<VvPrismVars line-height="1.3rem"/>Prop: lineHighlightOpacity
Type: String
Default: "0.25"
The VvPrismVars Component lineHighlightOpacity prop sets the opacity of highlighted lines of code within your highlighted code.
Syntax
<VvPrismVars line-highlight-opacity="0.25"/>Prop: textShadow
Type: String
Default: "unset"
The VvPrismVars Component textShadow prop sets the text shadowing used for highlighted code. VueVentus sets this to "unset" by default, because text shadows can make the code a little harder to read in the contexts of dark/light mode highlighted code.
Syntax
<VvPrismVars text-shadow="unset"/>Typing for Downstream Component Instances
Coming Soon!
Prop: urlDecoration
Type: String
Valid Values: "underline", "overline", "none" Default: "underline"
The VvPrismVars Component urlDecoration prop sets the text decoration for any URL's that may appear in your highlighted code or code comments.
Syntax
<VvPrismVars url-decoration="underline"/>Typing for Downstream Component Instances
Coming Soon!
Slot: None
NO SLOT AVAILABLE
The VvPrismVars Component does not have a Vue slot option.