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>

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
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