Merge pull request #164 from basiljs/dev-tutorial-js-highlight

fixed js highlighting on tutorials

Author: ff6347

_source/tutorials/03-hello-world/index.md

@@ -12,7 +12,7 @@ Create a new file and save it to helloworld.jsx within your user folder. Copy an
 
 ## Simple Hello World example
 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -29,7 +29,7 @@ Now run the script... either by pressing the play button from within the ExtendS
 
 No wonder, the statement
 
-```
+```js
 println( "Hello World!" );
 ```
 
@@ -41,7 +41,7 @@ Printing to the console is nice, but actually far from what basil.js is designed
 
 ## Hello World example using a textbox
 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 

_source/tutorials/05-drawing-color/index.md

@@ -15,7 +15,7 @@ description: "Adding new shapes and color swatches."
 
 
 ### 1. Filling the paper with a rect() by reading its size
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -30,12 +30,11 @@ function draw() {
 
 ### How to account for margins or bleed settings
 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
 function draw() {
-
     noFill();
     stroke(0, 255, 0);
 
@@ -49,7 +48,6 @@ function draw() {
     rect(0, 0, width, height);    
 
    //  the following examples only work for documents with facing pages
-
    canvasMode(FACING_MARGINS); 
    rect(0, 0, width, height);
 
@@ -67,12 +65,11 @@ function draw() {
 - You can still use other spots of the canvas with extreme coordinates as the canvas modes are not limiting you down to them.
 
 ### 2. Generate several swatches with color() and paint with rect()
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
 function draw() {
-
   colorMode(RGB); // this is the default anyways
 
   // create new RGB color
@@ -114,7 +111,7 @@ function draw() {
 <!-- Exercise: Create a horizontal rainbow -->
 
 ### 3. Using random() to pick a color and fill the background
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -130,7 +127,7 @@ function draw() {
 
 
 ### 4. Using line() to create a cross
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -146,7 +143,7 @@ function draw() {
 <!--  Exercise: Create a Haus of Nikolaus -->
 
 ### 5. Using random() and ellipse() to fill the page with circles
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -169,7 +166,7 @@ function draw() {
 
 
 ### 6. Using a for-loop and map() to create a gradient
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -190,7 +187,7 @@ function draw() {
 
 
 ### 8. Using random() and nested for loops to create a matrix of lines 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 

_source/tutorials/06-page-management/index.md

@@ -6,7 +6,7 @@ description: "How to add, remove, count and manage the pages of your document."
 ---
 
 ## Adding pages 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -18,19 +18,19 @@ function draw() {
 ```
 
 ## Removing pages
-```
-    // removes current page
-    removePage();
+```js
+// removes current page
+removePage();
 
-    // fill up again...
-    addPage();
+// fill up again...
+addPage();
 
-    // removes page 1
-    removePage(1);
+// removes page 1
+removePage(1);
 ```
 
 ## Using references to pages
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -49,7 +49,7 @@ function draw() {
 - You can pass a PageItem such as a TextFrame to `page()` in order to jump to the page that contains the given PageItem
 
 ## Populating larger documents and adding between pages
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 

_source/tutorials/07-selection-and-navigation/index.md

@@ -7,7 +7,7 @@ description: "How to stroll around in the InDesign object model."
 
 ## Get the mouse selection
 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -37,7 +37,7 @@ function draw() {
 - Also good for changing certain items only that you select by e.g. aesthetical criteria
 
 ## Add, get and set a layer
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -62,7 +62,7 @@ function draw() {
 - You can also use layers to select and alter the new items easily or set them to invisible
 
 ##Process all objects from a layer, page or document 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -91,7 +91,7 @@ function draw() {
 
 <!--
 ## Changing strokeColor, strokeWeight and fillColor on existing items
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -110,7 +110,7 @@ function draw() {
 -->
 
 ## Attaching labels to created items
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -150,7 +150,7 @@ select() is cancelling selection on previously selected things...
 <!-- ## How to use the Adobe Object Model and work with collections -->
 
 ## Cleaning up and removing stuff
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 

_source/tutorials/08-transform-pageitems/index.md

@@ -5,7 +5,7 @@ title: "Transform PageItems"
 description: "Moving things around (i.e. PageItem) that you have created in code or by mouse."
 ---
 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -52,6 +52,5 @@ function draw() {
   }
 
   r.remove();
-
 }
 ```

_source/tutorials/09-modifying-typography/index.md

@@ -8,7 +8,7 @@ description: "Changing InDesign text programatically."
 ## 1. Getting started with type
 
 ### Add basic text box
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -24,7 +24,7 @@ Visit our reference section on [`text()`](/reference/#text) for additional typog
 
 ### Change type attributes
 Add these one at a time *before* your text frame, as they only effect proceeding `text()`.
-```
+```js
 textFont("Helvetica", "Regular"); 
 // copy name exactly as found when selecting fonts by pull-down menu
 // optional 2nd param to specify font-weight
@@ -36,22 +36,22 @@ textTracking(500);
 ### Overflowing text
 If the font gets too big, you'll see that the type is now flowing past the bounds of the box, so let's resize it. In order to change the TextFrame we just built, we need to create it as a variable so that we can easily refer to it later. To do this, simply changing the following:
 
-```
+```js
 // text("hello world", 0, 0, 350, 50);
 var myFrame = text("hello world", 0, 0, 350, 50);
 ```
 
 Note the 'var myFrame = ' placed in front of our text() code.<br>
 We can now refer to it and resize it, by writing the following after our manipulations:
-```
+```js
 transform(myFrame, "size", [width, height]);
 ```
 
 The bounding box is now as big as our page's width + height.
 ### Styling those contents
 
 Now that you can refer to your text frame, let's change further attributes inside using the all encompassing `typo()` function:
-```
+```js
 typo(myFrame, 'pointSize', 100);
 typo(myFrame, 'strikeThru', true); // add strike through
 typo(myFrame, 'characterRotation', -45); // add strike through
@@ -71,7 +71,7 @@ If creating a generative book across multiple pages, you'll surely want to know
 
 Start with a new document and let's build two very generative text frames 
 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -86,14 +86,14 @@ function draw() {
 
 To link these text boxes, you simply write the following after they have been created:
 
-```
+```js
 linkTextFrames(myFrame1, myFrame2);
 ```
 
 If you saw the type leave myFrame2 and join myFrame1, then they have been properly linked.<br>
 Just to test out that it's working, try flowing some placeholder text through the two text frames:
 
-```
+```js
 typo(myFrame1, "contents", ""); // clear the current text
 myFrame1.contents = TextFrameContents.placeholderText;
 ```
@@ -106,14 +106,14 @@ Each can be set in the following way:
 
 Before you generate the text frame
 
-```
+```js
 textAlign(CENTER_ALIGN);
 // var myFrame1 = text("this is frame 1", 30, 30, 300, 300);
 ```
 
 After you've generated the text frame
 
-```
+```js
 // var myFrame1 = text("this is frame 1", 30, 30, 300, 300);
 typo(myFrame1, "justification", Justification.CENTER_ALIGN);
 ```
@@ -136,7 +136,7 @@ Refer to the following list for setting various justifications:
 
 Note: vertical justification of a text frame should be done before generating it, also using the [`textAlign()`](/reference/#textAlign) function.
 
-```
+```js
 textAlign(Justification.FULLY_JUSTIFIED, VerticalJustification.CENTER_ALIGN);
 ```
 
@@ -157,7 +157,7 @@ Incase you are not opening an old project, create a new document and place a new
 
 To begin let's get our selected text frame or text into something that we can refer to by code, a variable:
 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";
 
@@ -170,7 +170,7 @@ This code is looking for an object or text that is selected and grabs the very f
 
 Next let's break the selection down and isolate every single word within the text. Todo this, we have two ways to walk forward. Both accomplish the exact same task, but approach it quite differently.  
 
-```
+```js
 words(selItems, function(w, n){
   typo(w, "pointSize", n+1);
 });
@@ -180,7 +180,7 @@ The snippet above is the most efficient way to cycle through all of the words, o
 
 Think about how long that would take you with the mouse...!
 
-```
+```js
 var myWords = words(selItems);
 
 for (var i = 0; i < myWords.length; i++) {
@@ -208,7 +208,7 @@ and test different combinations of modifying the content based on typo() or othe
 ## 4. Example - Website typo
 Here is a quick script demonstrating how to recreate the headlines as seen on this website:
 
-```
+```js
 // @includepath "~/Documents/;%USERPROFILE%Documents";
 // @include "basiljs/basil.js";