Juicy lil' bytes

How to Turn Your Browser Into a Text Editor With Syntax Highlighting

Pop this script into your browser’s navigation bar and code away in the browser with syntax highlighting for multiple languages.

Script

1
data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/textmate");e.getSession().setMode("ace/mode/python");</script>

Source: jdkanani Gist on GitHub with language + theme modifications

Instructions

Copy the script above, paste it into your browser navigation bar, and hit Enter/Return. Through the power of Ace, your browser will turn into a text editor with automatic line numbers, code folding, and syntax highlighting (in this case for Python).

Browser Screenshot with a Python Script

image

Customize Your Language

Ace supports over 60 languages. To change the syntax highlighter in the script, modify the line:

1
e.getSession().setMode("ace/mode/python");

with the language mode that you’d like to use. You can find the list of supported language modes in the GitHub repository. Here is how you specify the JavaScript syntax highlighter:

1
e.getSession().setMode("ace/mode/javascript");

Customize Your Editor Theme

The Ace editor supports over 20 different text editor themes too. To change the editor theme, modify the line:

1
e.setTheme("ace/theme/textmate");

with any of the supported themes. Here is how you switch to Monokai:

1
e.setTheme("ace/theme/monokai");

^5

Kudos to jdkanani for this script. Head over to his repository and show him some love if you use it.