Codeblock

Updated on August 22, 2024

BaleadaProseCodeblock is the Baleada Prose version of the classic Markdown fenced codeblock that starts with three backticks. It comes with easy-to-style line numbers and a copy-to-clipboard button (powered by Baleada Logic's Copyable class).

Example

Markdown

  ::: canCopy
  ```js
  const thing = new Stuff()
  ```
  :::

Rendered

const example = new Thing()

Props

Prop

Type

Required

Default

Description

canCopy

Boolean

false

Indicates whether or not BaleadaProseCodeblock should render the copy-to-clipboard button and icon.

hasLineNumbers

Boolean

false

Indicates whether or not BaleadaProseCodeblock should render line numbers.

classes

String

none

Adds additional classes to the component's root element.

Structure

Here's the structure of BaleadaProseCodeblock's markup, written in Pug for simplicity:

section.baleada-prose-codeblock
  section.baleada-prose-contents
    pre
      code // This pre > code contains the code language
    pre
      code // This pre > code contains line numbers
    slot <- Your pre > code slots in here
  button // Copy-to-clipboard button
    svg // Copy-to-clipboard icon

API design compliance

[WIP]

Blockquote Details

Edit doc on GitHub

Filter by package