Code Display 1.1.0

Component name: <v-code-display>

Vue component that renders code with syntax highlighting using highlight.js (opens new window) with a copy button.

Examples

No <script> tags

The <v-code-display> component does not support displaying <script> or <style> tags. Doing so will cause the component or the entire page to break.

API

Documentation table

Name	Type	Description	Default
language	String	Language for syntax highlighting. Supported values: xml html javascript js typescript ts json css, scss markdown md bash shell	xml
code	String	The code string to display	""

Supported Languages

This component uses a custom highlight.js build with the following languages included:

• HTML/XML (xml, html)
• JavaScript (javascript, js)
• TypeScript (typescript, ts)
• JSON (json)
• CSS (css)
• SCSS (scss)
• Markdown (markdown, md)
• Bash/Shell (bash, shell)

To add more languages, import them in the component and register them.