Update documentation links and syntax highlighting (#120)

CHANGELOG.md

@@ -16,6 +16,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### 📚 Documentation and demo website changes
 
 - Ensure GitHub Action deploys documentation to correct location
+- Fixed links and syntax highlighting in READMEs
 
 ### 🔧 Internal changes
 

README.md

@@ -4,19 +4,19 @@ Welcome to the repository for the MemoryViz project!
 MemoryViz is a visualization tool that generates memory model diagrams for Python code, aimed at students and educators.
 MemoryViz is written in Javascript and is built on top of the [Rough.js](https://roughjs.com/) library.
 
-For more information, check out our [demo](https://www.cs.toronto.edu/~david/memory-viz/demo/) [project documentation](https://www.cs.toronto.edu/~david/memory-viz/).
+For more information, check out our [demo](https://www.cs.toronto.edu/~david/memory-viz/demo/) and [project documentation](https://www.cs.toronto.edu/~david/memory-viz/).
 
 ## Installation
 
 Install MemoryViz using `npm` (requires [Node.js](https://nodejs.org/en) to be installed):
 
-```console
+```bash
 $ npm install memory-viz
 ```
 
 ## Example
 
-Given a JSON file [`demo.json`](examples/demo.json) that encodes a state of Python memory and some styling options:
+Given a JSON file [`demo.json`](examples/memory-viz-cli/demo.json) that encodes a state of Python memory and some styling options:
 
 ```json
 [
@@ -66,32 +66,32 @@ This repository contains multiple [npm workspaces](https://docs.npmjs.com/cli/v7
 1. Install [Node.js](https://nodejs.org/en/).
 2. Clone the MemoryViz repository and `cd` into it:
 
-    ```console
+    ```bash
     $ git clone https://github.com/david-yz-liu/memory-viz.git
     $ cd memory-viz
     ```
 
 3. Install the dependencies:
 
-    ```console
+    ```bash
     $ npm install
     ```
 
 4. Install the pre-commit hooks to automatically format your code when you make commits:
 
-    ```console
+    ```bash
     $ npx husky init
     ```
 
 5. Compile the MemoryViz library:
 
-    ```console
+    ```bash
     $ npm run build-dev --workspace=memory-viz
     ```
 
 6. Run the test suite to check that all tests pass:
 
-    ```console
+    ```bash
     $ npm test
     ```
 

demo/README.md

@@ -10,13 +10,13 @@ _Note_: you can instead run the commands in the root project directory by adding
 
 1. First, build the assets using Webpack:
 
-    ```console
+    ```bash
     $ npm run build-dev
     ```
 
 2. Then run the website:
 
-    ```console
+    ```bash
     $ npm start
     ```
 

docs/README.md

@@ -7,7 +7,7 @@ You can instead run them in the root project directory by adding the argument `-
 
 ## Local Development
 
-```console
+```bash
 $ npm start
 ```
 
@@ -16,7 +16,7 @@ Most changes are reflected live without having to restart the server.
 
 ## Build
 
-```console
+```bash
 $ npm run build
 ```
 
@@ -26,13 +26,13 @@ This command generates static content into the `build` directory and can be serv
 
 Using SSH:
 
-```console
+```bash
 $ USE_SSH=true npm run deploy
 ```
 
 Not using SSH:
 
-```console
+```bash
 $ GIT_USER=<Your GitHub username> npm run deploy
 ```
 

memory-viz/README.md

@@ -3,13 +3,13 @@
 MemoryViz is a visualization tool that generates memory model diagrams for Python code, aimed at students and educators.
 MemoryViz is written in Javascript and is built on top of the [Rough.js](https://roughjs.com/) library.
 
-For more information, check out our [demo](https://www.cs.toronto.edu/~david/memory-viz/demo/) [project documentation](https://www.cs.toronto.edu/~david/memory-viz/).
+For more information, check out our [demo](https://www.cs.toronto.edu/~david/memory-viz/demo/) and [project documentation](https://www.cs.toronto.edu/~david/memory-viz/).
 
 ## Installation
 
 Install MemoryViz using `npm` (requires [Node.js](https://nodejs.org/en) to be installed):
 
-```console
+```bash
 $ npm install memory-viz
 ```
 
@@ -19,7 +19,7 @@ MemoryViz can be run from the command line or using its Javascript API.
 
 ### Command-line interface
 
-Given a JSON file [`demo.json`](examples/demo.json) that encodes a state of Python memory and some styling options:
+Given a JSON file [`demo.json`](https://github.com/david-yz-liu/memory-viz/blob/master/examples/memory-viz-cli/demo.json) that encodes a state of Python memory and some styling options:
 
 ```json
 [
@@ -45,13 +45,13 @@ Given a JSON file [`demo.json`](examples/demo.json) that encodes a state of Pyth
 
 you can run the following command in the terminal:
 
-```console
+```bash
 $ npx memory-viz --output demo_output.svg demo.json
 ```
 
 This producs an SVG file, `demo_output.svg`, that visualizes the state of memory:
 
-![Sample usage svg output](examples/demo_output.svg)
+![Sample usage svg output](https://github.com/david-yz-liu/memory-viz/blob/master/examples/memory-viz-cli/demo_output.svg)
 
 ## Javascript API (Node.js)
 
@@ -98,40 +98,40 @@ Here is a [standalone example](https://github.com/david-yz-liu/memory-viz/tree/m
 1. Install [Node.js](https://nodejs.org/en/).
 2. Clone the MemoryViz repository and `cd` into it:
 
-    ```console
+    ```bash
     $ git clone https://github.com/david-yz-liu/memory-viz.git
     $ cd memory-viz
     ```
 
 3. Install the dependencies:
 
-    ```console
+    ```bash
     $ npm install
     ```
 
 4. Install the pre-commit hooks to automatically format your code when you make commits:
 
-    ```console
+    ```bash
     $ npx husky init
     ```
 
 5. Compile the MemoryViz library:
 
-    ```console
+    ```bash
     $ npm run build-dev --workspace=memory-viz
     ```
 
 6. Run the test suite to check that all tests pass:
 
-    ```console
+    ```bash
     $ npm test
     ```
 
 ### Developer tips
 
 **Automatic Javascript compilation**. Rather than running `npm run build-dev` to recompile your Javascript bundle every time you make a change, you can instead run the following command:
 
-```console
+```bash
 $ npm run watch --workspace=memory-viz
 ```
 

webstepper/README.md

@@ -10,13 +10,13 @@ _Note_: you can instead run the commands in the root project directory by adding
 
 1. First, build the assets using Webpack:
 
-    ```console
+    ```bash
     $ npm run build-dev
     ```
 
 2. Then run the website:
 
-    ```console
+    ```bash
     $ npm start
     ```