CodeRunner 2 Tips

Updated | PUBLISHED

CodeRunner is the best way to write code on your Mac. You can run code in almost any language instantly, and you’ll be surprised by the powerful set of features in such a lightweight and easy-to-use editor.

1. Change Build Directory

Shell variable

Create a shell variable named CR_BUILD_DIR on CodeRunner Preferences > Advanced and set the absolute path to your build directory.

CodeRunner Shell Variables

Languages

Set Run command to $compiler because the path to the program passed by the compile script will be absolute.
Click on Edit Script to edit the compile script and add this bloc of code:

1
2
3
4
5
if [[ ! -z $CR_BUILD_DIR ]]; then
    build_path="$CR_BUILD_DIR/objc"
    mkdir -p $build_path
    out="$build_path/$out"
fi

CodeRunner Shell Variables

Paste this block after the bloc out="$out.out", this will create a destination folder called objc and compile the script in.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

if [ ! -z $CR_SANDBOXED ]; then
echo -e "To run Objective-C code, you need to use the non-App Store version of CodeRunner, which is free for App Store customers.\n\nDownload the non-App Store version of CodeRunner at https://coderunnerapp.com/. You will also need Xcode to run Objective-C code, which can be downloaded from the Mac App Store."
exit 1
fi

out=`echo "$CR_FILENAME" | sed 's/\(.*\)\..*/\1/'`
if [ -d "$out" ]; then
    out="$out.out"
fi

if [[ ! -z $CR_BUILD_DIR ]]; then
    build_path="$CR_BUILD_DIR/objc"
    mkdir -p $build_path
    out="$build_path/$out"
fi

Do the same with Swift Language.

2. Tip to have Javascript, HTML and CSS in the same file

With the second version of CodeRunner is now possible to run code on a webview, the problem is that you can just run Javascript code like jQuery without a way to add HTML or Styles.

CodeRunner can run a shell script before executing the file, like the own used in Swift, the file is compiled with this script before running.

It gave me an idea to add a compile script who will separate the current file in 3 parts: Javascript, HTML and CSS, and return the complete HTML source code.

I don’t know if it is an optimal solution, it’s seems to work. You can download the script by downloading the below JavaScript AngularJS Code Runner Language.
In the file, the script tag is optional.

Template

1
2
3
4
5
6
7
8
9
10
11
//<script>
alert('Your javascript here');

//<html>
<div class='mydiv'>An HTML Div</div>

//<css>
.mydiv {
    background-color:orange;
    padding: 8px 5px;
}

Compilation Script

This script cut the file in 3 parts (Javascript, HTLM and CSS) and return a complete formated HTML source page for CodeRunner display in the webview.

Example

Check the example with AngularJS below.

3. Run AngularJS Javascript

coderunner-javascript-angularjs.zip (2Kb) download

CodeRunner Running AngularJS

Example with AngularJS