VvPrism Component

The VvPrism Component is a wrapper component allowing you to use it's slot to receive code content you want highlighted with Prism.js.

The component doesn't provide any <pre> or <code> elements that Prism.js requires, so you can freely add your own, wrapping your code to be highlighted in them, and allowing you to define whatever languages and plugins you may be using with Prism.js in your project's contexts.

The VvPrism Component does however give you boolean control over the inclusion of it's sister VvPrismVars component, which provides Tailwind CSS driven Prism.js colors and even light and dark mode functionality for your highlighted code for your users!

Import

To import a VvPrism Component installed by the vueventus CLI or vv-update CLI:

// ./src/components/SomeComponent.vue
import VvPrism from './vv/elements/VvPrism.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: debug

Type: Boolean
Default: false

The VvPrism 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- prefixed HTML attributes.

Syntax

<VvPrism :debug="true">
    <pre class="language-html">
        <code>
            &lt;br/&gt;
        </code>
    </pre>
</VvPrism>

Prop: prismVars

Type: Boolean
Default: true

The VvPrism Component prismVars prop sets the component instance border color based both on the prismVars prop and the prismVars prop value together.

Syntax

<VvPrism :prism-vars="true">
    <pre class="language-html">
        <code>
            &lt;div&gt;
                VvPrism example
            &lt;/div&gt;
        </code>
    </pre>
</VvPrism>

Result

<div>
    VvPrism example
</div>

Slot: #default

The VvPrism Component has a standard #default Vue slot to insert child elements/nodes into the component that will be processed by Prism.js.

Syntax

<VvPrism :prism-vars="true">
    <pre class="language-html">
        <code>
            &lt;div&gt;
                VvPrism example
            &lt;/div&gt;
        </code>
    </pre>
</VvPrism>

Result

<div>
    VvPrism example
</div>

Current Version:

v0.61.7