Text Editor - Code Block

Turn the current block into a fenced code block with the codeBlock command and pressed state.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
<TextEditor.Root v-model="value">
    <TextEditor.Toolbar>
        <CodeBlockButton />
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

A code block holds multi-line, preformatted code as its own block. A toolbar toggle button invokes commands.codeBlock() and reflects pressed state with state.codeBlock, both from useTextEditorContext(). This is the block-level companion to the inline code mark, which marks a short span inside a paragraph.

#Command

commands.codeBlock() turns the current block into a code block and toggles it back to a paragraph when applied again. The node holds plain text and accepts no inline marks, so bold, links, and other formatting do not apply inside it. With markdown enabled on TextEditor.Root, a triple backtick at the start of a line also opens a code block.

<!-- CodeBlockButton.vue -->
<script setup lang="ts">
import { useTextEditorContext } from '@primeui/vue-texteditor';

const { commands, state } = useTextEditorContext();
</script>

<template>
    <button @click="commands.codeBlock()" :aria-pressed="state.codeBlock">Code Block</button>
</template>

#Example

Loading Demo...

#API

commands.codeBlock() and state.codeBlock come from useTextEditorContext(). For syntax highlighting on top of a code block, see the Code Highlight plugin. See API for the full reference.