Syntax Highlighting QML API

Basic Highlighting

If all you need is doing syntax highlighting for a fixed language and using a color theme matching the current system palette this is a matter of adding the SyntaxHighlighter component from the org.kde.syntaxhighlighting QML module to a text control.

import QtQuick.Controls 2.15
import org.kde.syntaxhighlighting 1.0
TextArea {
text: "..."
SyntaxHighlighter {
id: myHighlighter
textEdit: parent
definition: "C++"

Advanced Use

For more complex uses the syntax definition might not be fixed but depend on input data (e.g. derived from its mimetype or file name), or a user selection. In the C++ API this is enabled by the Repository class, which is now also available in QML as a singleton object.

The following example shows how to use this for a simple syntax selection combo box.

ComboBox {
model: Repository.definitions
displayText: currentValue.translatedName + " (" + currentValue.translatedSection + ")"
textRole: "translatedName"
onCurrentIndexChanged: myHighlighter.definition = currentValue

Handling color themes is also possible, similarly to syntax definitions. Themes can be listed, their properties can be accessed and they can be set by theme object or name on the highlighter. Like in the C++ API it's also possible to just ask for the light or dark default theme.

Further References

There's a more complete and pure-QML example in examples/qml/example.qml provided as part of the KSyntaxHighlighting source code that can be run with qmlscene.

This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Jun 21 2024 11:55:28 by doxygen 1.10.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.