Code Block

This is the Code Block extension. It allows you to create fenced code blocks for displaying multi-line code snippets.

Usage

Default usage of the code block extension and its control button.

Code Block

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlCode :editor="editor" type="block" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlCode,
  CodeBlock,
} from '@platform-ui/rte'

const content = ref()
const HTML = ref()

const editor = new Editor({
  content: '<p>Click the code block button to insert a fenced code block</p>',
  extensions: [CodeBlock, RequiredExtensions.configure({})],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})
</script>

Commands

// Toggle code block
editor?.chain().focus().toggleCodeBlock().run()

// Set code block
editor?.commands.setCodeBlock()

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlCode,
  CodeBlock,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
type	'inline' | 'block'	'inline'	The type of code formatting
tooltipLabel	string	Code	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language
ariaLabel	string	null	The aria label

Slots

Slot	Description	Default
icon	The icon to display	CodeBrowserIcon