fix(curriculum) replace single-line blocks with multi-line blocks for… (#41526)

* fix(curriculum) replace single-line blocks with multi-line blocks for issue 51418

Data visualization and Coding Interview Prep portions.

* Update execute-a-markov-algorithm.md

Implemented as inline code blocks as discussed

* Adding missed blocks

* Last file added

curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md

@@ -12,7 +12,9 @@ Using a lot of inline styles on HTML elements gets hard to manage, even for smal
 
 The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection:
 
-`selection.attr("class", "container");`
+```js
+selection.attr("class", "container");
+```
 
 Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change.
 

curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md

@@ -12,7 +12,9 @@ D3 has several methods that let you add and change elements in your document.
 
 The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:
 
-`const anchor = d3.select("a");`
+```js
+const anchor = d3.select("a");
+```
 
 The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods.
 

curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md

@@ -12,7 +12,9 @@ D3 lets you add inline CSS styles on dynamic elements with the `style()` method.
 
 The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:
 
-`selection.style("color","blue");`
+```js
+selection.style("color","blue");
+```
 
 # --instructions--
 

curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md

@@ -18,7 +18,9 @@ It's unlikely you would plot raw data as-is. Before plotting it, you set the sca
 
 D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`:
 
-`const scale = d3.scaleLinear()`
+```js
+const scale = d3.scaleLinear()
+```
 
 By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.
 

curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md

@@ -10,7 +10,9 @@ dashedName: select-a-group-of-elements-with-d3
 
 D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:
 
-`const anchors = d3.selectAll("a");`
+```js
+const anchors = d3.selectAll("a");
+```
 
 Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods.
 

curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md

@@ -16,7 +16,9 @@ The previous challenges covered how to display data from an array and how to add
 
 Recall the format to set a style using a callback function:
 
-`selection.style("cssProperty", (d) => d)`
+```js
+selection.style("cssProperty", (d) => d)
+```
 
 # --instructions--
 

curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md

@@ -14,7 +14,9 @@ In the previous challenge, you created a new `h2` element for each item in the `
 
 The D3 `text()` method can take a string or a callback function as an argument:
 
-`selection.text((d) => d)`
+```js
+selection.text((d) => d)
+```
 
 In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to.
 

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md

@@ -14,7 +14,9 @@ For example, when a user clicks the `Get Message` button, it changes the text of
 
 This works by adding the following code within the click event:
 
-`document.getElementsByClassName('message')[0].textContent="Here is the message";`
+```js
+document.getElementsByClassName('message')[0].textContent="Here is the message";
+```
 
 # --instructions--
 

curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md

@@ -14,7 +14,9 @@ When you're looping through these objects, you can use this `imageLink` property
 
 Here's the code that does this:
 
-`html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";`
+```js
+html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
+```
 
 # --instructions--
 

curriculum/challenges/english/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md

@@ -12,15 +12,21 @@ Now that you have worked through ES5, you are going to perform something similar
 
 To create a new empty set:
 
-`var set = new Set();`
+```js
+var set = new Set();
+```
 
 You can create a set with a value:
 
-`var set = new Set(1);`
+```js
+var set = new Set(1);
+```
 
 You can create a set with an array:
 
-`var set = new Set([1, 2, 3]);`
+```js
+var set = new Set([1, 2, 3]);
+```
 
 Once you have created a set, you can add the values you wish using the `add` method:
 

curriculum/challenges/english/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md

@@ -14,13 +14,17 @@ While binary heaps may be implemented as tree structures with nodes that contain
 
 For instance, consider this array representation of a binary min heap:
 
-`[ 6, 22, 30, 37, 63, 48, 42, 76 ]`
+```js
+[ 6, 22, 30, 37, 63, 48, 42, 76 ]
+```
 
 The root node is the first element, `6`. Its children are `22` and `30`. If we look at the relationship between the array indices of these values, for index `i` the children are `2 * i + 1` and `2 * i + 2`. Similarly, the element at index `0` is the parent of these two children at indices `1` and `2`. More generally, we can find the parent of a node at any index with the following: `Math.floor((i - 1) / 2)`. These patterns will hold true as the binary tree grows to any size. Finally, we can make a slight adjustment to make this arithmetic even easier by skipping the first element in the array. Doing this creates the following relationship for any element at a given index `i`:
 
 Example array representation:
 
-`[ null, 6, 22, 30, 37, 63, 48, 42, 76 ]`
+```js
+[ null, 6, 22, 30, 37, 63, 48, 42, 76 ]
+```
 
 An element's left child: `i * 2`
 

curriculum/challenges/english/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md

@@ -12,7 +12,9 @@ Let's practice removing items from an ES6 Set using the `delete` method.
 
 First, create an ES6 Set:
 
-`var set = new Set([1,2,3]);`
+```js
+var set = new Set([1,2,3]);
+```
 
 Now remove an item from your Set with the `delete` method.
 

curriculum/challenges/english/10-coding-interview-prep/data-structures/typed-arrays.md

@@ -10,7 +10,9 @@ dashedName: typed-arrays
 
 Arrays are JavaScript objects that can hold a lot of different elements.
 
-`var complexArr = [1, 5, "2", "Word", {"name": "James"}];`
+```js
+var complexArr = [1, 5, "2", "Word", {"name": "James"}];
+```
 
 Basically what happens in the background is that your browser will automatically give the right amount of memory space for that array. It will also change as needed if you add or remove data.
 

curriculum/challenges/english/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md

@@ -12,15 +12,21 @@ Let's look at the .has and .size methods available on the ES6 Set object.
 
 First, create an ES6 Set
 
-`var set = new Set([1,2,3]);`
+```js
+var set = new Set([1,2,3]);
+```
 
 The .has method will check if the value is contained within the set.
 
-`var hasTwo = set.has(2);`
+```js
+var hasTwo = set.has(2);
+```
 
 The .size method will return an integer representing the size of the Set
 
-`var howBig = set.size;`
+```js
+var howBig = set.size;
+```
 
 # --instructions--
 

curriculum/challenges/english/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md

@@ -40,13 +40,7 @@ the shop -> my brother
 a never used -> .terminating rule
 </pre>
 
-Sample text of:
+Sample text of `I bought a B of As from T S.` should generate the output `I bought a bag of apples from my brother.`
-
-`I bought a B of As from T S.`
-
-Should generate the output:
-
-`I bought a bag of apples from my brother.`
 
 **Ruleset 2:**
 
@@ -61,13 +55,7 @@ the shop -> my brother
 a never used -> .terminating rule
 </pre>
 
-Sample text of:
+Sample text of `I bought a B of As from T S.` should generate `I bought a bag of apples from T shop.`
-
-`I bought a B of As from T S.`
-
-Should generate:
-
-`I bought a bag of apples from T shop.`
 
 **Ruleset 3:**
 
@@ -86,13 +74,7 @@ the shop -> my brother
 a never used -> .terminating rule
 </pre>
 
-Sample text of:
+Sample text of `I bought a B of As W my Bgage from T S.` should generate `I bought a bag of apples with my money from T shop.`
-
-`I bought a B of As W my Bgage from T S.`
-
-Should generate:
-
-`I bought a bag of apples with my money from T shop.`
 
 **Ruleset 4:**
 
@@ -128,13 +110,7 @@ _1 -> 1
 _+_ ->
 </pre>
 
-Sample text of:
+Sample text of `_1111*11111_` should generate the output `11111111111111111111`
-
-`_1111*11111_`
-
-should generate the output:
-
-`11111111111111111111`
 
 **Ruleset 5:**
 
@@ -164,13 +140,7 @@ B1 -> 1B
 1C1 -> H11
 </pre>
 
-This ruleset should turn
+This ruleset should turn `000000A000000` into `00011H1111000`
-
-`000000A000000`
-
-into
-
-`00011H1111000`
 
 # --hints--
 

curriculum/challenges/english/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md

@@ -12,11 +12,15 @@ Loop over multiple arrays and create a new array whose $i^{th}$ element is the c
 
 For this example, if you are given this array of arrays:
 
-`[ ["a", "b", "c"], ["A", "B", "C"], [1, 2, 3] ]`
+```js
+[ ["a", "b", "c"], ["A", "B", "C"], [1, 2, 3] ]
+```
 
 the output should be:
 
-`["aA1","bB2","cC3"]`
+```js
+["aA1","bB2","cC3"]
+```
 
 # --instructions--
 

curriculum/challenges/english/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md

@@ -14,7 +14,9 @@ Make your function work with the following list of values and set of indices:
 
 <code>values: [7, <b>6</b>, 5, 4, 3, 2, <b>1</b>, <b>0</b>]</code>
 
-`indices(0-based): {6, 1, 7}`
+```js
+indices(0-based): {6, 1, 7}
+```
 
 Where the correct result would be:
 

curriculum/challenges/english/10-coding-interview-prep/rosetta-code/top-rank-per-group.md

@@ -32,7 +32,9 @@ testData1 = [
 
 One could rank top 10 employees in each department by calling:
 
-`topRankPerGroup(10, testData1, 'dept', 'salary')`
+```js
+topRankPerGroup(10, testData1, 'dept', 'salary')
+```
 
 Given the following data:
 
@@ -48,7 +50,9 @@ testData2 = [
 
 One could rank the top-rated movie in each genre by calling:
 
-`topRankPerGroup(1, testData2, 'genre', 'rating')`
+```js
+topRankPerGroup(1, testData2, 'genre', 'rating')
+```
 
 The function should return an array with an array for each group containing the top `n` objects.