ContentCodeBlock

A block of code with line numbers, highlighted lines, wrapping, a maximum height, a copy button and a pluggable highlighter.

import { ContentCodeBlock } from '@zairakai/vue-components/Content'

Usage

<ContentCodeBlock />

Example

hello.jsjs

const greeting = 'Hello'
console.log(greeting)

<template>
  <ContentCodeBlock
    title="hello.js"
    language="js"
    :code="`const greeting = 'Hello'\nconsole.log(greeting)`"
    line-numbers
    :highlight-lines="[2]"
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
code	string		The code. It can also be given as the text of the default slot.
language	string
title	string		A title: a file name, for example.
lineNumbers	boolean	false
highlightLines	string|array	undefined	The lines to highlight: "2,4-6" or [2, "4-6"].
wrap	boolean	false
maxHeight	string		A maximum height (any CSS length): the code scrolls inside.
copyable	boolean	true
copyLabel	string	'Copy'
copiedLabel	string	'Copied'
highlighter	func		Turns the code into highlighted HTML: (code, language) => string. The result is rendered as HTML: only give it the output of a highlighter you trust.

See Theming for the class hooks and the data-* state of the components.