Text Editor - Code

Toggle inline code formatting on the current selection with the code command and pressed state.

#Usage

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

Inline code marks a short snippet or identifier inside running text. A toolbar button toggles the mark on the selection with commands.code() and reflects pressed state with state.code, both from useTextEditorContext().

#Command

commands.code() toggles the inline code mark on the selected text. This is the inline mark, not a fenced code block.

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

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

<template>
    <button @click="commands.code()" :aria-pressed="state.code">&lt;/&gt;</button>
</template>

#Example

Loading Demo...

#API

commands.code() and state.code come from useTextEditorContext(). For multi-line code, use the block-level Code Block instead. See API for the full reference.