CodeHighlighterComponent
A component that displays and edits code.
You can add this component using SettingEx.addCodeHighlighter.
In order to add the styles for the component, use initPluginContext in your plugin’s onload() function.
Alternatively, you can copy styles from https://github.com/mnaoumov/obsidian-dev-utils/releases/latest/download/styles.css.
Import:
import { CodeHighlighterComponent } from 'obsidian-dev-utils/obsidian/setting-components/code-highlighter-component';Signature:
export class CodeHighlighterComponent extends ValueComponent<string> implements TextBasedComponent<string>, ValidatorComponent, ValueComponentWithChangeTracking<string>Extends: ValueComponent<string>
Implements: TextBasedComponent<string>, ValidatorComponent, ValueComponentWithChangeTracking<string>
Constructor
new CodeHighlighterComponent(containerEl: HTMLElement)Creates a new multiple text component.
Properties
| Property | Type | Description |
|---|---|---|
| codeEl | HTMLElement | The <code> element that renders the syntax-highlighted overlay. Subclasses customizing the highlighting can target it. |
| preEl | HTMLElement | The <pre> element that wraps the highlighted code overlay. Subclasses customizing the highlighting can target it. |
| textAreaComponent | TextAreaComponent | The inner text area component. |
| validatorEl | ValidatorElement | A validator element of the component. (Inherited from ValidatorComponent) |
Methods
| Method | Returns | Description |
|---|---|---|
| empty() | void | Empties the component. |
| getValue() | string | Gets the value of the component. |
| isEmpty() | boolean | Checks if the component is empty. |
| onChange(callback) | this | Adds a change listener to the component. |
| onChange(callback) | this | Sets a callback function to be called when the value of the component changes. (Inherited from ValueComponentWithChangeTracking) |
| setDisabled(disabled) | this | Sets the disabled state of the component. |
| setLanguage(language) | this | Sets the language for code highlighting. |
| setPlaceholder(placeholder) | this | Sets the placeholder of the component. |
| setPlaceholderValue(placeholderValue) | this | Sets the placeholder value of the component. |
| setPlaceholderValue(placeholderValue) | this | Sets the placeholder value of the component. (Inherited from TextBasedComponent) |
| setTabSize(tabSize) | this | Sets the tab size of the component. |
| setValue(value) | this | Sets the value of the component. |
| simulateChange__() | void | Simulate a change event. |
| updateHighlightedCode() | Promise<void> | Re-renders the highlighted code overlay from the current text area value. Subclasses can override to customize the render. |
Links to this page: