docs: add code titles to code blocks to emphasize Synco reqs

Co-authored-by: Alex Sklar <[email protected]>
Co-authored-by: Erik Margetis <[email protected]>

docs/core-concepts/mutators.md

@@ -13,7 +13,7 @@ Because mutators are just high-level Javascript functions, the developer gains a
 
 The function `increment` below is an example of a mutator:
 
-```javascript
+```js title="/src/mutators.js"
 function increment(tx, { key, delta }) {
   const prev = tx.get(key);
   const next = (prev ?? 0) + delta;

docs/core-concepts/rooms.md

@@ -8,7 +8,7 @@ The primary unit of collaboration within a Syncosaurus application is the **room
 
 In Syncosaurus, the room name is specified by passing it to the `launch` method of a `Syncosaurus` instance:
 
-```js
+```js title="/src/components/App.jsx"
 import mutators from './mutators.js';
 
 const synco = new Syncosaurus({

docs/core-concepts/subscriptions.md

@@ -12,7 +12,7 @@ At the implementation level, a *subscription* is represented by the return value
 
 Here is a simple implementation of a subscription and its query:
 
-```javascript
+```js
 const count = useSubscribe(synco, (tx) => tx.get('count'), 0)
 ```
 

docs/getting-started/add-to-existing-project.md

@@ -4,10 +4,12 @@ sidebar_position: 2
 
 # Add to an Existing Project
 
-To add Syncosaurus to an existing React-based project:
+To add Syncosaurus to an existing React-based project, first navigate to the root directory of your application.
+Then, run the following command in your terminal:
 
-1. Navigate to the root directory of your application
-2. Run the command `npx syncosaurus setup`
+```shell
+npx syncosaurus setup
+```
 
 That's it! Make sure to correctly configure your Syncosaurus application before deployment - see here for details.
 
@@ -17,7 +19,7 @@ Note that Syncosaurus currently only supports applications built with either Rea
 
 A local development environment makes it significantly easier to rapidly iterate, test, and debug your application in a consistent, controlled setting. Syncosaurus comes built-in with a local Syncosaurus server.
 
-If you added Syncosaurus to an existing project and are not using Vite as your build tool, run the same command with the `-b` or `-backendOnly` flag enabled:
+If you have added Syncosaurus to an existing project and are not using Vite as your frontend build tool, run the same command with the `-backendOnly` or `-b` flag enabled:
 
 ```shell
 npx syncosaurus dev -b
@@ -37,7 +39,7 @@ Press 'x' to gracefully shut down the server
 
 Make sure to update your `server` value in your Syncosaurus constructor calls in your application code:
 
-```javascript
+```js title="/src/components/App.jsx"
 import mutators from './mutators.js';
 
 const synco = new Syncosaurus({

docs/getting-started/start-a-new-project.md

@@ -47,7 +47,7 @@ Press 'x' to gracefully shut down both servers
 
 Make sure to update your `server` value in your Syncosaurus constructor calls in your application code:
 
-```javascript
+```js title="/src/components/App.jsx"
 import mutators from './mutators.js';
 
 const synco = new Syncosaurus({

docs/guides/authentication.md

@@ -12,7 +12,7 @@ The Syncosaurus framework supports token-based authentication. JSON web tokens a
 
 To use a token, you can directly pass a *token string*  to the `Syncosaurus` constructor as the `auth` key's value:
 
-```js
+```js title="/src/components/App.jsx"
 import mutators from './mutators.js';
 
 const synco = new Syncosaurus({
@@ -26,7 +26,7 @@ const synco = new Syncosaurus({
 
  You can also pass an *asynchronous function* that returns a token string to the `Syncosaurus` constructor as the `auth` key's value:
 
-```js
+```js title="/src/components/App.jsx"
 import mutators from './mutators.js';
 import getToken from './auth-client.js';
 
@@ -43,7 +43,7 @@ const synco = new Syncosaurus({
 
 Next, an `authHandler` function needs to be defined:
 
-```js
+```js title="/src/authHandler.js"
 const authServerUrl = `https://www.myAuthServer.com`;
 
 export default async function authHandler(token) {