Support inline if meta directives

marijnh · marijnh · commit b4a6f750b558 · 2017-09-29T15:04:33.000+02:00
diff --git a/01_values.md b/01_values.md
@@ -176,7 +176,7 @@ number from them. Here is what they look like in JavaScript:
 100 + 4 * 11
 ```
 
-{{index [operator, application], asterisk, "plus character", "pass:[*] operator", "+ operator"}}
+{{index [operator, application], asterisk, "plus character", "* operator", "+ operator"}}
 
 The `+` and `*`
 symbols are called _operators_. The first stands for addition, and the
@@ -406,7 +406,7 @@ possible to represent them as a sequence of numbers. When comparing
 strings, JavaScript goes over them from left to right, comparing the
 numeric codes of the characters one by one.
 
-{{index equality, ">= operator", "pass:[<=] operator", "== operator", "!= operator"}}
+{{index equality, ">= operator", "<= operator", "== operator", "!= operator"}}
 
 Other similar operators are `>=` (greater
 than or equal to), `<=` (less than or equal to), `==` (equal to), and
@@ -546,7 +546,7 @@ console.log(false == 0)
 // → true
 ```
 
-{{index "+ operator", arithmetic, "pass:[*] operator", "- operator"}}
+{{index "+ operator", arithmetic, "* operator", "- operator"}}
 
 When an operator is applied to the “wrong” type of value,
 JavaScript will quietly convert that value to the type it wants, using
diff --git a/02_program_structure.md b/02_program_structure.md
@@ -940,7 +940,7 @@ exercises, refer to the [introduction](00_intro.html#intro).
 
 Each exercise starts with a problem description. Read that and try to
 solve the exercise. If you run into problems, consider reading the
-hints (!interactive after the exercise!)(!book at the [end of the book](hints.html#hints)!).
+hints [after the exercise]{if interactive}[at the [end of the book](hints.html#hints)]{if book}.
 Full solutions to the exercises are not included in this
 book, but you can find them online at
 http://eloquentjavascript.net/code[_eloquentjavascript.net/code_].
diff --git a/03_functions.md b/03_functions.md
@@ -208,7 +208,7 @@ var landscape = function() {
 };
 
 console.log(landscape());
-// → __/''''\_____/'\_
+// → ___/''''\______/'\_
 ```
 
 {{index [function, scope], scope}}
diff --git a/04_data.md b/04_data.md
@@ -520,7 +520,6 @@ _ϕ_ can be computed using the following formula, where _n_ refers to the table:
 
 {{if html
 
-```{lang: null}
 <div>
 <style scoped="scoped">sub { font-size: 60%; }</style>
 <table style="border-collapse: collapse; margin-left: 1em;"><tr>
@@ -533,32 +532,31 @@ _ϕ_ can be computed using the following formula, where _n_ refers to the table:
   </td>
 </tr></table>
 </div>
-```
 
 if}}
 
 {{if tex
 
-pass:[\begin{equation}\varphi = \frac{n_{11}n_{00}-n_{10}n_{01}}{\sqrt{n_{1\bullet}n_{0\bullet}n_{\bullet1}n_{\bullet0}}}\end{equation}]
+[\begin{equation}\varphi = \frac{n_{11}n_{00}-n_{10}n_{01}}{\sqrt{n_{1\bullet}n_{0\bullet}n_{\bullet1}n_{\bullet0}}}\end{equation}]{latex}
 
 if}}
 
-The notation (!html _n_~01~!)(!tex pass:[$n_{01}$]!) indicates the
+The notation [_n_~01~]{if html}[[$n_{01}$]{latex}]{if tex} indicates the
 number of measurements where the first variable (squirrelness) is false
 (0) and the second variable (pizza) is true (1). In this
-example, (!html _n_~01~!)(!tex pass:[$n_{01}$]!) is 9.
+example, [_n_~01~]{if html}[[$n_{01}$]{latex}]{if tex} is 9.
 
-The value (!html _n_~1•~!)(!tex pass:[$n_{1\bullet}$]!) refers to the
+The value [_n_~1•~]{if html}[[$n_{1\bullet}$]{latex}]{if tex} refers to the
 sum of all measurements where the first variable is true, which is 5
-in the example table. Likewise, (!html _n_~•0~!)(!tex pass:[$n_{\bullet0}$]!)
+in the example table. Likewise, [_n_~•0~]{if html}[[$n_{\bullet0}$]{latex}]{if tex}
 refers to the sum of the measurements where the second variable is false.
 
 {{index correlation, "phi coefficient"}}
 
 So for the pizza table, the part
 above the division line (the dividend) would be 1×76 - 4×9 = 40, and
 the part below it (the divisor) would be the square root of
-5×85×10×80, or (!html √340000!)(!tex pass:[$\sqrt{340000}$]!). This
+5×85×10×80, or [√340000]{if html}[[$\sqrt{340000}$]{latex}]{if tex}. This
 comes out to _ϕ_ ≈ 0.069, which is tiny. Eating ((pizza)) does not
 appear to have influence on the transformations.
 
@@ -605,15 +603,15 @@ This is simply a direct
 translation of the _ϕ_ formula into JavaScript. `Math.sqrt` is the
 square root function, as provided by the `Math` object in a standard
 JavaScript environment. We have to sum two fields from the table to
-get fields like (!html n~1•~!)(!tex pass:[$n_{1\bullet}$]!) because
+get fields like [n~1•~]{if html}[[$n_{1\bullet}$]{latex}]{if tex} because
 the sums of rows or columns are not stored directly in our data
 structure.
 
 {{index "JOURNAL data set"}}
 
 Jacques kept his journal for three months. The
 resulting ((data set)) is available in the coding sandbox for this
-chapter(!book (http://eloquentjavascript.net/code#4[_eloquentjavascript.net/code#4_])!),
+chapter[(http://eloquentjavascript.net/code#4[_eloquentjavascript.net/code#4_])]{if book},
 where it is stored in the `JOURNAL` variable, and in a downloadable
 http://eloquentjavascript.net/code/jacques_journal.js[file].
 
diff --git a/05_higher_order.md b/05_higher_order.md
@@ -475,7 +475,7 @@ console.log(JSON.parse(string).born);
 The variable `ANCESTRY_FILE`, available in
 the ((sandbox)) for this chapter and in
 http://eloquentjavascript.net/code/ancestry.js[a downloadable file] on
-the website(!book (http://eloquentjavascript.net/code#5[_eloquentjavascript.net/code#5_])!), contains the
+the website[(http://eloquentjavascript.net/code#5[_eloquentjavascript.net/code#5_])]{if book}, contains the
 content of my ((JSON)) file as a string. Let's decode it and see how
 many people it contains.
 
diff --git a/06_object.md b/06_object.md
@@ -813,7 +813,7 @@ The source data for the table of
 mountains that we are trying to build is available in the `MOUNTAINS`
 variable in the ((sandbox)) and also
 http://eloquentjavascript.net/code/mountains.js[downloadable] from the
-website(!book (http://eloquentjavascript.net/code#6[_eloquentjavascript.net/code#6_])!).
+website[(http://eloquentjavascript.net/code#6[_eloquentjavascript.net/code#6_])]{if book}.
 
 {{index "table example"}}
 
@@ -1188,7 +1188,7 @@ constructor can be done with the `Object.defineProperty` function. To
 compute the distance from (0, 0) to (x, y), you can use the
 Pythagorean theorem, which says that the square of the distance we are
 looking for is equal to the square of the x-coordinate plus the square
-of the y-coordinate. Thus, (!html √(x^2^ + y^2^pass:[)]!)(!tex pass:[$\sqrt{x^2 + y^2}$]!)
+of the y-coordinate. Thus, [√(x^2^ + y^2^)]{if html}[[$\sqrt{x^2 + y^2}$]{latex}]{if tex}
 is the number you want, and `Math.sqrt` is the way you compute a square
 root in JavaScript.
 
diff --git a/07_elife.md b/07_elife.md
@@ -1046,7 +1046,7 @@ var valley = new LifelikeWorld(
 {{index animation, simulation}}
 
 Let's see what happens if we run this.
-(!book These snapshots illustrate a typical run of this world.!)
+[These snapshots illustrate a typical run of this world.]{if book}
 
 {{if interactive
 
diff --git a/09_regexp.md b/09_regexp.md
@@ -236,7 +236,7 @@ console.log(/'\d*'/.test("''"));
 // → true
 ```
 
-{{index "pass:[*] operator", asterisk}}
+{{index "* operator", asterisk}}
 
 The star (`*`) has a similar
 meaning but also allows the pattern to match zero times. Something
diff --git a/13_dom.md b/13_dom.md
@@ -1114,7 +1114,7 @@ cells (`<td>`).
 The same
 source data that was used in [Chapter 6](06_object.html#mountains)
 is again available in the `MOUNTAINS` variable in the sandbox. It can also be http://eloquentjavascript.net/code/mountains.js[downloaded]
-from the website(!book (http://eloquentjavascript.net/code#13[_eloquentjavascript.net/code#13_])!).
+from the website[(http://eloquentjavascript.net/code#13[_eloquentjavascript.net/code#13_])]{if book}.
 
 Write a function `buildTable` that, given an array of objects that all
 have the same set of properties, builds up a DOM structure
diff --git a/15_game.md b/15_game.md
@@ -38,7 +38,7 @@ from the side, and do lots of jumping onto and over things.
 
 Our
 ((game)) will be roughly based on
-http://www.lessmilk.com/games/10[Dark Blue](!book  (_www.lessmilk.com/games/10_)!) by Thomas Palef. I chose this game
+http://www.lessmilk.com/games/10[Dark Blue][ (_www.lessmilk.com/games/10_)]{if book} by Thomas Palef. I chose this game
 because it is both entertaining and minimalist, and because it can be built
 without too much ((code)). It looks like this:
 
@@ -1269,8 +1269,8 @@ and output in general in [Chapter 20](20_node.html#node).
 {{index game, "GAME_LEVELS data set"}}
 
 There is a set of
-((level)) plans available in the `GAME_LEVELS` variable (!book (downloadable from
-http://eloquentjavascript.net/code#15[_eloquentjavascript.net/code#15_])!).
+((level)) plans available in the `GAME_LEVELS` variable [(downloadable from
+http://eloquentjavascript.net/code#15[_eloquentjavascript.net/code#15_])]{if book}.
 This page feeds them to `runGame`, starting an actual game:
 
 // start_code
diff --git a/16_canvas.md b/16_canvas.md
@@ -1548,8 +1548,8 @@ going from zero to more than a whole circle, and fill it.
 
 To model the ball's position
 and ((speed)), you can use the `Vector` type from
-[Chapter 15](15_game.html#vector)(!interactive (which is available on this
-page)!). Give it a starting speed, preferably one that is not purely
+[Chapter 15](15_game.html#vector)[(which is available on this
+page)]{if interactive}. Give it a starting speed, preferably one that is not purely
 vertical or horizontal, and every ((frame)), multiply that speed with
 the amount of time that elapsed. When the ball gets too close to a
 vertical wall, invert the x component in its speed. Likewise, invert
diff --git a/19_paint.md b/19_paint.md
@@ -668,7 +668,7 @@ call `Math.sin` and `Math.cos` to create the corresponding point. But with that
 the dots are more likely to appear near the center of the circle. 
 There are other ways around that, but they're more complicated than the previous loop.
 
-We now have a functioning paint program.(!interactive  Run the code below to try it.!)
+We now have a functioning paint program.[ Run the code below to try it.]{if interactive}
 
 {{if interactive
 
diff --git a/21_skillsharing.md b/21_skillsharing.md
@@ -32,9 +32,9 @@ central organizer.
 
 {{figure {url: "img/unicycle.svg", alt: "The unicycling meetup"}}}
 
-(!interactive Just like in the [previous chapter](20_node.html#node), the
+[Just like in the [previous chapter](20_node.html#node), the
 code in this chapter is written for Node.js, and running it directly
-in the HTML page that you are looking at is unlikely to work. !)The
+in the HTML page that you are looking at is unlikely to work.]{if interactive}The
 full code for the project can be ((download))ed from
 http://eloquentjavascript.net/code/skillsharing.zip[_eloquentjavascript.net/code/skillsharing.zip_].
 
diff --git a/src/convert.js b/src/convert.js
@@ -77,6 +77,9 @@ text = text
   .replace(/\n!!hint!!\n([^]+?)\n!!hint!!/g, function(_, content) {
     return `\n{{hint\n${content}\nhint}}`
   })
+  .replace(/\(!(html|book|tex|interactive) ([^]*?)\s?!\)/g, function(_, tag, content) {
+    return `[${content}]{if ${tag}}`
+  })
   .replace(/\[sic]/, "\\[sic]")
 
 console.log(text)
diff --git a/src/transform.js b/src/transform.js
@@ -45,12 +45,21 @@ function smartQuotes(tokens, i) {
     .slice(from, to)
 }
 
+function handleIf(tokens, i, options) {
+  let tag = tokens[i].args[0]
+  if (options.defined.indexOf(tag) > -1) return i
+  for (let j = i + 1; j < tokens.length; j++) if (tokens[j].type == "meta_if_close" && tokens[j].args[0] == tag)
+    return j
+}
+
 function transformInline(tokens, options) {
   let result = []
   for (let i = 0; i < tokens.length; i++) {
     let tok = tokens[i], type = tok.type
-    if (options.index === false && type == "meta_index") {
+    if (type == "meta_if_close" || (options.index === false && type == "meta_index")) {
       // Drop
+    } else if (type == "meta_if_open") {
+      i = handleIf(tokens, i, options)
     } else {
       if (type == "text" && /[\'\"]/.test(tok.content)) tok.content = smartQuotes(tokens, i)
       result.push(tok)
@@ -71,13 +80,7 @@ exports.transformTokens = function(tokens, options) {
         break
       }
     } else if (type == "meta_if_open") {
-      let tag = tok.args[0]
-      if (options.defined.indexOf(tag) == -1) {
-        for (let j = i + 1; j < tokens.length; j++) if (tokens[j].type == "meta_if_close" && tokens[j].args[0] == tag) {
-          i = j
-          break
-        }
-      }
+      i = handleIf(tokens, i, options)
     } else if (type == "meta_if_close" || (options.index === false && (type == "meta_indexsee" || type == "meta_index"))) {
       // Drop
     } else if (tok.tag == "h1") {
