codeformat

website/src/pages/learn/code.mdx

@@ -43,7 +43,7 @@ So far, we've seen the following syntax:
 xxx("foo").yyy("bar")
 ```
 
-Generally, `xxx` and `yyy` are called [_functions_](https://en.wikipedia.org/wiki/Function_(computer_programming)), while `foo` and `bar` are called function [_arguments_ or _parameters_](https://en.wikipedia.org/wiki/Parameter_(computer_programming)).
+Generally, `xxx` and `yyy` are called [_functions_](<https://en.wikipedia.org/wiki/Function_(computer_programming)>), while `foo` and `bar` are called function [_arguments_ or _parameters_](<https://en.wikipedia.org/wiki/Parameter_(computer_programming)>).
 So far, we've used the functions to declare which aspect of the sound we want to control, and their arguments for the actual data.
 The `yyy` function is called a [_chained_ function](https://en.wikipedia.org/wiki/Method_chaining), because it is appended with a dot (`.`).
 
@@ -52,7 +52,8 @@ You can think of this as being similar to chaining audio effects together using
 
 Strudel makes heavy use of chained functions. Here is a more sophisticated example:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`note("a3 c#4 e4 a4")
 .s("sawtooth")
 .cutoff(500)
@@ -70,7 +71,7 @@ You can also use the keyboard shortcut `cmd-/` to toggle comments on and off.
 # Strings
 
 Ok, so what about the content inside the quotes (e.g. `"a3 c#4 e4 a4"`)?
-In JavaScript, as in most programming languages, this content is referred to as being a [_string_](https://en.wikipedia.org/wiki/String_(computer_science)).
+In JavaScript, as in most programming languages, this content is referred to as being a [_string_](<https://en.wikipedia.org/wiki/String_(computer_science)>).
 A string is simply a sequence of individual characters.
 In TidalCycles, strings are used to write _patterns_ using the mini-notation, and you may hear the phrase _pattern string_ from time to time.
 

website/src/pages/learn/getting-started.mdx

@@ -11,7 +11,6 @@ import { JsDoc } from '../../docs/JsDoc';
 
 Welcome to the Strudel documentation pages!
 
-
 These pages will introduce you to [Strudel](https://strudel.tidalcycles.org/), a web-based [live coding](https://github.com/toplap/awesome-livecoding/) environment that implements the [Tidal Cycles](https://tidalcycles.org) algorithmic pattern language.
 
 # What is Strudel?

website/src/pages/learn/notes.mdx

@@ -14,12 +14,17 @@ In Strudel, there are three different ways to express a pitch, `note`, `n` and `
 Here's the same pattern written in three different ways:
 
 - `note`: letter notation, good for those who are familiar with western music theory:
+
+  {' '}
   <MiniRepl client:idle tune={`note("a3 c#4 e4 a4")`} />
 
 - `n`: number notation, good for those who want to use recognisable pitches, but don't care about music theory:
+
+  {' '}
   <MiniRepl client:idle tune={`n("57 61 64 69")`} />
 
 - `freq`: frequency notation, good for those who want to go beyond standardised tuning systems:
+  {' '}
   <MiniRepl client:idle tune={`freq("220 275 330 440")`} />
 
 Let's look at `note`, `n` and `freq` in more detail...

website/src/pages/learn/samples.mdx

@@ -23,7 +23,8 @@ To know which sounds are available, open the [default sample map](https://strude
 You can load your own sample map using the `samples` function.
 In this example we create a map using sounds from the default sample map:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   bd: 'bd/BT0AADA.wav',
   sd: 'sd/rytm-01-classic.wav',
@@ -35,7 +36,8 @@ s("bd sd,hh*8")`}
 When you load your own samples, you can choose the names that you will then refer to in your pattern string inside the `s` function.
 Compare with this example which uses the same samples, but with different names.
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   bassdrum: 'bd/BT0AADA.wav',
   snaredrum: 'sd/rytm-01-classic.wav',
@@ -49,6 +51,7 @@ Here we have changed the "map" to include longer sample names.
 # Loading Custom Samples
 
 The `samples` function has two arguments:
+
 - A [JavaScript object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) that maps sound names to audio file paths.
 - A base URL that comes before each path describing where the sample folder can be found online.
   - Make sure your base URL ends with a slash, while your sample paths do **not** begin with one!
@@ -57,7 +60,8 @@ To see how this looks in practice, compare the [DirtSamples GitHub repo](https:/
 
 Because GitHub is a popular place for uploading open source samples, it has its own shortcut:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   bd: 'bd/BT0AADA.wav',
   sd: 'sd/rytm-01-classic.wav',
@@ -71,7 +75,8 @@ The format is `github:user/repo/branch/`.
 Let's see another example, this time based on the following GitHub repo: https://github.com/jarmitage/jarmitage.github.io.
 We can see there are some guitar samples inside the `/samples` folder, so let's try to load them:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   g0: 'samples/guitar/guitar_0.wav',
   g1: 'samples/guitar/guitar_1.wav',
@@ -86,7 +91,8 @@ s("[g0 g1 g2 g3 g4]/5")`}
 
 It is also possible, to declare multiple files for one sound, using the array notation:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav'],
   sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
@@ -98,7 +104,8 @@ s("<bd:0 bd:1>,~ <sd:0 sd:1>,[hh:0 hh:1]*2")`}
 The `:0` `:1` etc. are the indices of the array.
 The sample number can also be set using `n`:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav'],
   sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
@@ -109,7 +116,8 @@ s("bd,~ sd,hh*4").n("<0 1>")`}
 
 In that case, we might load our guitar sample map a different way:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   guitar: [
     'samples/guitar/guitar_0.wav', 
@@ -124,7 +132,8 @@ s("[guitar:0 guitar:1 guitar:2 guitar:3 guitar:4]/5")`}
 
 And as above, we can choose the sample number using `n` for even more flexibility:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   guitar: [
     'samples/guitar/guitar_0.wav', 
@@ -141,7 +150,8 @@ n("<0 1 2 3 4>").s("guitar")`}
 
 For pitched sounds, you can use `note`, just like with synths:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   'gtr': 'gtr/0001_cleanC.wav',
 }, 'github:tidalcycles/Dirt-Samples/master/');
@@ -151,7 +161,8 @@ note("g3 [bb3 c4] <g4 f4 eb4 f3>@2").s('gtr').gain(.5)`}
 Here, the guitar samples will overlap, because they always play till the end.
 If we want them to behave more like a synth, we can add `clip(1)`:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   'gtr': 'gtr/0001_cleanC.wav',
 }, 'github:tidalcycles/Dirt-Samples/master/');
@@ -163,7 +174,8 @@ note("g3 [bb3 c4] <g4 f4 eb4 f3>@2").s('gtr').clip(1)
 
 If we have 2 samples with different base pitches, we can make them in tune by specifying the pitch like this:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   'gtr': 'gtr/0001_cleanC.wav',
   'moog': { 'g3': 'moog/005_Mighty%20Moog%20G3.wav' },
@@ -176,7 +188,8 @@ If a sample has no pitch set, `c3` is the default.
 
 We can also declare different samples for different regions of the keyboard:
 
-<MiniRepl client:idle
+<MiniRepl
+  client:idle
   tune={`samples({
   'moog': {
     'g2': 'moog/004_Mighty%20Moog%20G2.wav',

website/src/pages/learn/sounds.mdx

@@ -10,6 +10,7 @@ import { JsDoc } from '../../docs/JsDoc';
 # Sounds
 
 We can play sounds with `s`, in two different ways:
+
 - `s` can trigger audio samples, where a sound file is loaded in the background and played back:
   <MiniRepl client:idle tune={`s("bd hh sd hh")`} />
 - `s` can trigger audio synthesisers, which are synthesised in real-time using code also running in the background:

website/src/pages/learn/synths.mdx

@@ -34,7 +34,8 @@ Now we not only pattern the notes, but the sound as well!
 You can control the envelope of a synth using the `attack`, `decay`, `sustain` and `release` functions:
 
 <MiniRepl
-  client:idle tune={`note("c2 <eb2 <g2 g1>>").s('sawtooth')
+  client:idle
+  tune={`note("c2 <eb2 <g2 g1>>").s('sawtooth')
   .attack(.1).decay(.1).sustain(.2).release(.1)`}
 />