All Projects → markusressel → KodeEditor

markusressel / KodeEditor

Licence: MIT license
A simple code editor with syntax highlighting and pinch to zoom

Programming Languages

kotlin
9241 projects
shell
77523 projects

Projects that are alternatives of or similar to KodeEditor

Code Surfer
Rad code slides <🏄/>
Stars: ✭ 5,477 (+9028.33%)
Mutual labels:  syntax-highlighting, syntax, code
Chroma
A general purpose syntax highlighter in pure Go
Stars: ✭ 3,013 (+4921.67%)
Mutual labels:  syntax, highlighter, highlighting
sora-editor
A cool code editor library on Android with syntax-highlighting and auto-completion. (aka CodeEditor)
Stars: ✭ 580 (+866.67%)
Mutual labels:  syntax-highlighting, code-editor, codeeditor
splash
🌊 Highlight source code embedded in HTML with a splash of color
Stars: ✭ 19 (-68.33%)
Mutual labels:  syntax-highlighting, syntax, highlighting
fastedit
安卓端高性能输入框。
Stars: ✭ 38 (-36.67%)
Mutual labels:  syntax-highlighting, syntax, edittext
CodeView
Android Library to make it easy to create an Code editor or IDE that support any languages and themes, with auto complete, auto indenting, snippets and more features
Stars: ✭ 254 (+323.33%)
Mutual labels:  syntax-highlighting, highlighting, codeeditor
ax-editor
Ax is a code editor with syntax highlighting that runs in your terminal written completely in Swift.
Stars: ✭ 42 (-30%)
Mutual labels:  syntax-highlighting, code, code-editor
core
🌈 light, fast, and easy to use, dependencies free javascript syntax highlighter, with automatic language detection
Stars: ✭ 40 (-33.33%)
Mutual labels:  syntax-highlighting, highlighter, highlighting
Nord Sublime Text
An arctic, north-bluish clean and elegant Sublime Text theme.
Stars: ✭ 109 (+81.67%)
Mutual labels:  syntax-highlighting, syntax, highlighting
language-rainmeter
Syntax highlighting for Rainmeter files in Atom.
Stars: ✭ 19 (-68.33%)
Mutual labels:  syntax-highlighting, syntax
sublime-coconut
Coconut syntax highlighting for Sublime Text and VSCode.
Stars: ✭ 18 (-70%)
Mutual labels:  syntax-highlighting, highlighting
Friendly Code Editor
Try this Friendly Code Editor. You'll love it. I made it with a lot of effort. It has some great features. I will update it adequately later. Very helpful for developers. Enjoy and share.
Stars: ✭ 20 (-66.67%)
Mutual labels:  code-editor, codeeditor
nord-atom-syntax
An arctic, north-bluish clean and elegant Atom syntax theme.
Stars: ✭ 72 (+20%)
Mutual labels:  syntax-highlighting, syntax
syntax highlighter
Syntax Highlighter for Dart/Flutter Code
Stars: ✭ 28 (-53.33%)
Mutual labels:  syntax-highlighting, syntax
nord-notepadplusplus
An arctic, north-bluish clean and elegant Notepad++ theme.
Stars: ✭ 112 (+86.67%)
Mutual labels:  syntax-highlighting, syntax
vscode-liquid
💧Liquid language support for VS Code
Stars: ✭ 137 (+128.33%)
Mutual labels:  syntax-highlighting, syntax
Hyena
鬣狗快速开发库(2018年6月停止维护)
Stars: ✭ 21 (-65%)
Mutual labels:  textview, edittext
code-run
一个代码在线编辑预览工具,类似codepen、jsbin、jsfiddle等。
Stars: ✭ 325 (+441.67%)
Mutual labels:  code, code-editor
code editor
A code editor (dart, js, html, ...) for Flutter with syntax highlighting and custom theme.
Stars: ✭ 48 (-20%)
Mutual labels:  syntax-highlighting, code-editor
KeyLighter
Yet another syntax highlighter for PHP
Stars: ✭ 29 (-51.67%)
Mutual labels:  syntax-highlighting, highlighter

KodeEditor

A simple code editor with syntax highlighting and pinch to zoom

Editing Scroll and zoom Minimap

Build Status

Master
codebeat badge

Features

  • Pinch-To-Zoom
  • Line numbers
  • Syntax highlighting
    • import languages you need
    • or simply create your own highlighter using regex or other techniques
    • themes
  • "Minimap" style document overview
  • 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 = "v4.0.1"
    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

Name Description Type Default
ke_lineNumbers_textColor Specifies the text color of line numbers Color android.R.attr.textColorPrimary
ke_lineNumbers_backgroundColor Specifies the background color of the line numbers view Color android.R.attr.windowBackground
ke_divider_enabled Specifies if a divider should be drawn between line numbers and the actual code editor content Boolean true
ke_divider_color Specifies the color of the divider (has no effect if ke_divider_enabled is set to false) Color android.R.attr.textColorPrimary
ke_editor_backgroundColor Specifies the background color of the code editor view Color android.R.attr.windowBackground
ke_editor_maxZoom Specifies the maximum zoom level of the editor Float 10
ke_minimap_enabled Enables the minimap Boolean true
ke_minimap_maxDimension Specifies the maximum dimension of the minimap for both axis Dimension 150dp
ke_minimap_borderColor Specifies the border color of the minimap Color Color.BLACK
ke_minimap_indicatorColor Specifies the color of the minimap indicator Color Color.RED

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

Name Description Type
text Sets the given text in the editor. String
setText(@StringRes) Sets the given string resource as the text in the editor. Int
languageRuleBook Gets/Sets the active language rule book used for highlighting. Use null to disable highlighting altogether. LanguageRuleBook?
editable Gets/Sets if the editor content is editable. Boolean

Line numbers

Name Description Type
showDivider Gets/Sets if the divider between line numbers and code editor is shown. Boolean
lineNumberGenerator Sets text to show for line number based on total number of lines (Long) -> List

Minimap

Name Description Type
showMinimap Gets/Sets if the minimap is shown. Boolean
minimapMaxDimension Gets/Sets the maximum dimension of the minimap in pixels. Float
minimapBorderWidth Gets/Sets the minimap border size in in pixels. Number
minimapBorderColor Gets/Sets the minimap border color. @ColorInt
minimapIndicatorColor Gets/Sets the minimap indicator color. @ColorInt
minimapGravity Gets/Sets the minimap positioning gravity. Int

CodeEditorView

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

Name Description Type
text Sets the given text in the editor. String
setText(@StringRes) Sets the given string resource as the text in the editor. Int
getLineCount() Returns the current line count. Long
languageRuleBook Gets/Sets the active language rule book used for highlighting. Use null to disable highlighting altogether. LanguageRuleBook?
editable Gets/Sets if the editor content is editable. Boolean
hasSelection True when a range is selected. Boolean
selectionStart The start index of the current selection. Int
selectionEnd The end index of the current selection. Int
selectionChangedListener Gets/Sets the Listener for selection changes. SelectionChangedListener?

Contributing

GitHub is for social coding: if you want to write code, I encourage contributions through pull requests from forks of this repository. Create GitHub tickets for bugs and new features and comment on the ones that you are interested in.

License

MIT License

Copyright (c) 2018 Markus Ressel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].