Code Editor

Code editor component

Default

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor } from '@platform-ui/highrise'
  const code = ref('.class-name{display:flex}')
  const updateCode = (value: string) => {
    code.value = value
  }
</script>
<template>
  <HLCodeEditor :value="code" @update:value="updateCode" language="css" id="testing" />
</template>

No Gutter

Vue

<template>
  <HLCodeEditor :value="code" @update:value="updateCode" language="css" id="testing" hideGutters />
</template>

Dark Mode

Vue

<template>
  <HLCodeEditor :value="code" @update:value="updateCode" language="css" id="testing" dark-mode />
</template>

Read Only

Vue

<template>
  <HLCodeEditor :value="code" @update:value="updateCode" language="css" id="testing" read-only />
</template>

Set Content

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLCodeEditor, HLButton } from '@platform-ui/highrise'
  const code = ref('.class-name{display:flex}')
  const editorRef = ref(null)
  const setCode = () => {
    editorRef.value?.setContent('#id{display:flex}')
  }
</script>
<template>
  <HLCodeEditor ref="editorRef" :value="code" @update:value="updateCode" language="css" id="testing" />
  <HLButton @click="setCode" class="mt-3">Set Code to id</HLButton>
</template>

Accessibility

• Supply aria-label when the editor lacks a visible label and mention the language/context in that string.
• Attach formatting tips, lint errors, or character limits through aria-describedby, and surface live errors inside an aria-live="polite" region.
• Document custom shortcuts in helper text so assistive tech users know how to interact without a mouse.

Imports

import { HLCodeEditor } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
language	'css' | 'html' | 'javascript' | 'json'	-	The language of the code
value	string	''	The value of the code inside the editor
resize	boolean	true	Whether the code editor is resizable
prettify	boolean	true	Whether to format the code
readOnly	boolean	false	Whether to allow editing the code editor
hideGutters	boolean	false	Whether to hide left side gutter (line numbers)
darkMode	boolean	false	whether the code editor theme is dark mode
autofocus	boolean	false	Focuses the editor as soon as it mounts.
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	The size of the code text inside the editor

Emits

Name	Parameters	Description
@update:value	(value: string)	Fired when the value changes

Methods

Name	Parameters	Description
setContent	(value: string)	Set the value of the code inside the editor