CodeArea: A Code Editor For Your App

android
webviewer

#1

Still in development, but works well!

LiveG Technologies have now created an open-source code editor that you can inject into your app.

  • No extensions, just a WebViewer that has CodeMirror embedded into it.
  • Really cool features, including line numbers, syntax highlighting, bracket pairing and more!
  • Customisable, built for any programming language.
  • Softkeys at the bottom of the editor for easy coding on mobile.
  • Intuitive way to get and set the editor’s current code.
  • This is what you’re looking for. The only code editor on Thunkable (yet).

Grab it now!
Get the example app: CodeAreaExample.aia (72.9 KB)

Learn how to implement it:

  1. Create a new app with a WebViewer and a File object.
  2. Rename CodeAreaExample.txt (306.1 KB) to CodemirrorCompiled.html and upload it in the Media section of the editor.
  3. Insert the following code in the Blocks section:
    CodeAreaExampleBlocksBare

To set and get text in the editor, just use the Web_Viewer1.WebView String block, as it contains the current editor’s code.

Example code:

Have fun, and don’t forget to credit LiveG Technologies! https://liveg.tech

EDIT: Version 1.0.1: Fix tab indents.


Code Boxes & Syntax Highlighting
Code editor html js and more tutorial (credit : LiveG technologies)
#2

hey there
I looooooooove your codearea :heart:
I will use it for my app (CodeZone - an alternative of sublimetext for android), I’ll not forget to add you in credits :wink:
oh, when is the next update ?
regards


#3

It will be soon, don’t worry!
There’s plenty more languages that I’m gonna be implementing with the codearea. :grin:
It’s fine if you wanna delve into the source (good luck, just one big HTML file) and add a language. http://codemirror.net/2/ can also help with this. Inspect Element is your friend! :grin:


#4

Ok, I will help you as soon as possible :wink:


#5

Got some more language files for CodeArea!

Just rename your desired items to CodemirrorCompiled.html, or you could even mash multiple language files by running the call File1.Read From fileName "//\<The language filename here...>" command.

Here they are:

Have fun!


#6

The downloads kinda give away what my app is going to be called! :joy:


#7

Oh, for those who are wondering, the HTML feature will also colour any embedded CSS and JavaScript to their right colours too!


#8

But sir how can i save the written code in a file through app as i don’t find anyway to retrieve html custom code written on this platform. Please help? Actually i am unable to get the html code in textarea. Even your sample aia app shows code only when its default and many a times don’t show the code in notifier.


#9

Okay, that’s odd behaviour! I’ll have to look into this seeing that my phone likes to do it correctly…


#10

Sir i its fixed and working but it not work on webview when i use it on makeroid. Any solution ?


#11

That is rather strange that it doesn’t work in Makeroid seeing that they run on the same system, but I’d probably suggest just sticking to Thunkable because I know it works well there. Makeroid is good but basically has the same features as Thunkable so I’d just stick to Thunkable if I were you.