KodeEditor

A simple code editor with syntax highlighting and pinch to zoom.

Build Status

Master

Features

• [x] Pinch-To-Zoom
• [x] Line numbers
• [x] Syntax highlighting
  • [x] import languages you need
  • [x] or simply create your own highlighter using regex or other techniques
  • [x] themes
• [x] "Minimap" style document overview
• [x] Written entirely in Kotlin

How to use

Have a look at the demo app (app module) for a complete sample.

Gradle

To use this library just include it in your dependencies using

repositories {
    ...
    maven { url "https://jitpack.io" }
}

in your project build.gradle file and

dependencies {
    ...

    def codeEditorVersion = "v3.0.3"
    implementation("com.github.markusressel:KodeEditor:${codeEditorVersion}")
}

in your desired module build.gradle file.

Add to your layout

To use this editor simply add something similar to this to your desired layout xml file:

<de.markusressel.kodeeditor.library.view.CodeEditorLayout
        android:id="@+id/codeEditorView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:ke_divider_color="?android:attr/textColorPrimary"
        app:ke_divider_enabled="true"
        app:ke_editor_backgroundColor="?android:attr/windowBackground"
        app:ke_editor_maxZoom="10.0"
        app:ke_lineNumbers_backgroundColor="#ccc"
        app:ke_lineNumbers_textColor="#000"
        app:ke_minimap_enabled="true"
        app:ke_minimap_maxDimension="200dp"
        app:ke_minimap_borderColor="#000"
        app:ke_minimap_indicatorColor="#f00"
        />

Syntax highlighting

Language Autodetection

Currently there is no auto detection for the language used in a document.
You have to manage the syntax highlighter yourself and call the setSyntaxHighlighter method when appropriate.

Integrated syntax highlighters

Have a look at the KodeHighlighter section about this.

Writing a custom syntax highlighter

Have a look at the KodeHighlighter section about this.

Styling

KodeEditor can be styled in multiple ways:

1. xml attributes on KodeEditor
2. theme attributes in your custom theme
3. methods on the view object itself

Theme Attributes

You can either use those attributes directly on the view in your layout like this:

<de.markusressel.kodeeditor.library.view.CodeEditorView
    android:id="@+id/codeEditorView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    [...]
    app:ke_divider_color="?android:attr/textColorPrimary"
    app:ke_divider_enabled="true"
    app:ke_editor_backgroundColor="?android:attr/windowBackground"
    app:ke_editor_maxZoom="10.0"
    app:ke_lineNumbers_backgroundColor="#ccc"
    app:ke_lineNumbers_textColor="#000"
    app:ke_minimap_enabled="true"
    app:ke_minimap_maxDimension="200dp" 
    app:ke_divider="true"
    [...] />

or specify them in your application theme (styles.xml in dem app) for to apply a style globally:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Other theme attributes of your application -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- CodeEditorView -->
        <item name="ke_lineNumbers_backgroundColor">#ccc</item>
        <item name="ke_lineNumbers_textColor">#000</item>
        <item name="ke_divider_enabled">false</item>
        <item name="ke_divider_color">#000</item>
        <item name="ke_editor_backgroundColor">#fff</item>
        <item name="ke_editor_maxZoom">10.0</item>
        <item name="ke_editor_followCursor">true</item>
        <item name="ke_minimap_enabled">true</item>
        <item name="ke_minimap_maxDimension">200dp</item>
        [...]
         
    </style>

</resources>

APIs

All styling attributes can also be specified using code. Since KodeEditorLayout
is just a wrapper to extend the CodeEditorView with line numbers and the minimap to use
some of those methods you need to access the matching property of the KodeEditorLayout first.

KodeEditorLayout

Line numbers

Minimap

CodeEditorView

To acces these API methods use the codeEditorLayout.codeEditorView property.

GitHub

https://github.com/markusressel/KodeEditor