Customizing the Mini Micro code editor

With the recent release of Mini Micro v1.2, you can now customize the colors used in the built-in code editor! This post will show you how, and point you to a GitHub repo where you can find some premade color themes.

How it works

All this is documented here on the MiniScript wiki, but in brief, you just create a map of colors and assign it to env.editorColors. Here's an example:

m = {}
m.codeBackground = "#333333"
m.noCodeBackground = "#000000"
m.lineNumber = "#666666"
m.caret = "#CCCCCCCC"
m.toolbarTint = "#CCCCFF"

m.text = {}
m.text.default = "#BBBBBB"
m.text.operator = "#AAAADD"
m.text.string = "#DDAAAA"
m.text.openString = "#FF0000"
m.text.identifier = "#BBBBBB"
m.text.comment = "#FFFFCC"
m.text.number = "#88FF88"
m.text.keyword = "#FF99FF"
m.text.colon = color.fuchsia
m.text.paren = ["#00FFFF", "#FF8800", "#CC44FF", "#00FF00"]
m.text.bracket = m.text.paren

env.editorColors = m

This example shows all the different elements that can be set. Most of them are pretty obvious; codeBackground is the background color for any lines of code, and noCodeBackground is drawn after the end of a short program, where there is no code (not even blank lines) yet. The caret is the vertical bar showing the insertion point; typically you want to use a translucent color here. And toolbarTint is a color applied to the otherwise light-grey toolbar at the top of the screen.

The rest of the colors apply under a secondary map called text. So, text.operator is the color used for operators like + and *, text.number is used for numeric literals, etc.

text.paren and text.bracket deserve special mention; each of these can be a list of colors. The code editor cycles through the list for more deeply nested parentheses or square-brackets. So if you have code like:

...the outer square brackets are cyan, and the inner ones are orange, because those are the first two colors in the text.bracket list.

All the colors can be specified in HTML format, or as names from the color module, as explained here.

The editor-themes repo

We've started a community collection of themes for the Mini Micro code editor at https://github.com/JoeStrout/minimicro-editor-themes. The README file there explains how to browse and install the themes therein, either temporarily, or more permanently by loading them in your startup script.

The collection is new and still quite small, but already has some great themes, such as this user-contributed "autumn" theme:

Conclusion

Now you know how to customize the colors in your Mini Micro code editor. What's your favorite theme? Let me know in the comments below!