diff --git a/docs/devGuide/design/projectStructure.md b/docs/devGuide/design/projectStructure.md
index eb2ac5cfec..0cb38d8bff 100644
--- a/docs/devGuide/design/projectStructure.md
+++ b/docs/devGuide/design/projectStructure.md
@@ -14,6 +14,8 @@
This page gives you an overview of the MarkBind's internal project structure.
+
+
## Packages
The MarkBind project is developed in a monorepo ([MarkBind/markbind](https://github.com/MarkBind/markbind)) of 4 packages:
@@ -145,6 +147,7 @@ Some custom components and directives are also added for MarkBind's use.
* TabGroup.vue
* Tabset.vue
+
{% from "njk/common.njk" import previous_next %}
{{ previous_next('../development/migratingToTypeScript', 'architecture') }}
\ No newline at end of file
diff --git a/docs/devGuide/development/exploringCodebase.md b/docs/devGuide/development/exploringCodebase.md
new file mode 100644
index 0000000000..c42fb82d61
--- /dev/null
+++ b/docs/devGuide/development/exploringCodebase.md
@@ -0,0 +1,161 @@
+{% set title = "Exploring Codebase" %}
+{{ title }}
+
+
+ title: "{{ title }}"
+ layout: devGuide.md
+ pageNav: default
+
+
+# {{ title }}
+
+
+This page provides an overview of the MarkBind codebase and innovative methods to explore it as an onboarding developer.
+
+
+## TL;DR
+
+- [ ] Overarching structure of the MarkBind codebase
+- [ ] Stepping through the codebase with a debugger
+- [ ] Ingesting the codebase with LLMs
+
+## Overarching Structure of the MarkBind Codebase
+
+
+
+
+
+## Debugger Setup
+
+After setting up an experimental MarkBind site, you can step through the codebase with a debugger to understand the flow of the codebase.
+
+
+
+
+First, we will set up a **VS Code debug configuration**. This will allow us to configure and save setup details while debugging. If not already done so, set up a new `Node.js` debugger as shown below, which will create a new template `.vscode/launch.json` file for you to get started.
+
+ {.ms-4}
+
+Next, we will configure the `.vscode/launch.json` file to use some sample configurations as a baseline. These configurations specify specific application entry points as well as runtime arguments. Feel free to tweak them as you see fit.
+
+
+
+In this configuration, we simulate running `markbind serve -o -d` on MarkBind's documentation as a development environment. Here, notice we specify the following runtime arguments:
+* the lazy reload`-o`lazy reload`-o` option to speed up page building
+* the `-d` developer option.
+
+```json {.ms-4 heading="launch.json"}
+{
+ "configurations": [
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "Dev Docs",
+ "skipFiles": [
+ "/**"
+ ],
+ "cwd": "${workspaceFolder}/docs",
+ "program": "${workspaceFolder}/packages/cli/index.js",
+ "args": ["serve", "-o", "-d"]
+ }
+ ]
+}
+```
+
+
+
+
+In this configuration, we will simulate running `npm run test` on MarkBind's packages. This allows us to step through the testing done in the various packages in MarkBind.
+
+```json {.ms-4 heading="launch.json"}
+{
+ "configurations": [
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "test",
+ "skipFiles": [
+ "/**"
+ ],
+ "cwd": "${workspaceFolder}",
+ "runtimeExecutable": "npm",
+ "runtimeArgs": ["run", "test"]
+ }
+ ]
+}
+```
+
+
+
+
+In this configuration, we will simulate running `npm run test` on MarkBind's `CLI` package. Notice that the application entry point has been updated to reflect this.
+
+```json {.ms-4 heading="launch.json"}
+{
+ "configurations": [
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "test cli",
+ "skipFiles": [
+ "/**"
+ ],
+ "cwd": "${workspaceFolder}/packages/cli",
+ "runtimeExecutable": "npm",
+ "runtimeArgs": ["run", "test"]
+ }
+ ]
+}
+```
+
+
+
+
+You can add **multiple configurations** as needed in debugging, each with their own respective application entry points, runtime arguments, and environment variables.
+
+ {.ms-4}
+
+After setting up the appropriate configurations, **set up breakpoints** in your code to tell the debugger to pause execution when it reaches that line. You can set breakpoints by clicking in the gutter next to the line number in the editor. For more information about breakpoints, see [VSCode: Working with Breakpoints](https://code.visualstudio.com/docs/editor/debugging#_breakpoints).
+
+Next, start a **debugging session** by selecting the desired debug configuration, and clicking run.
+* The Debug console at the bottom of the window will be displayed, which shows the debugging output.
+* The Debug toolbar at the top of the window allows you to control the flow of the debug session, such as stepping through code, pausing execution and stopping the session.
+* The Variables section of the Run and Debug view allows inspection of variables and expressions relative to the selected stack frame in the Call Stack section.
+
+ {.ms-4}
+
+To **learn more** about debugging with Visual Studio Code, refer [here](https://code.visualstudio.com/docs/editor/debugging) for a more extensive official guide on debugging in VS Code.
+
+
+
+
+ Tested on JetBrains IDEs version `2024.1.1` and above.
+
+ 1. Navigate to `Run` > `Edit Configurations...`.
+ 2. Click the `+` icon and select `Node.js`.
+ 3. Set the `Working directory` to the root of the MarkBind test site.
+ Set the `Working directory` to `markbind/docs` to experiment with the MarkBind documentation site.
+ 4. Set the `File` to the **ABSOLUTE PATH** of `packages/cli/index.js`.
+
+ 5. Set the `Application parameters` to `serve -d -o`.
+
+
+
+ 6. Name the configuration and click `OK`.
+ 7. Add breakpoints to the lines you want to inspect.
+ 8. Select the configuration from the dropdown next to the "run" button and click the "debug" button to start tracing.
+
+
+
+These steps should allow you to easily start debugging and gain deeper insights into MarkBind’s internal code flow and behavior. With breakpoints, step-through execution, and variable inspection, you will be able to:
+
+* Understand how different parts of the code interact,
+* Trace bugs or unexpected behavior more efficiently,
+* Experiment with changes in a controlled environment.
+
+
+## Ingesting the Codebase with LLMs
+
+[//]: # (TODO: Add content)
+
+
diff --git a/docs/devGuide/development/workflow.md b/docs/devGuide/development/workflow.md
index 49956afa25..80affabbb6 100644
--- a/docs/devGuide/development/workflow.md
+++ b/docs/devGuide/development/workflow.md
@@ -156,7 +156,7 @@ You can run `npm run build:backend` in the root directory to compile the files,
1. Configure your IDE to perform automatic compilation on file change/save. (_Recommended for general development_)
- Refer to your IDE's guides to set this up. For instance, here are the guides for [WebStorm](https://www.jetbrains.com/help/webstorm/compiling-typescript-to-javascript.html#ts_compiler_compile_code_automatically) and [Visual Studio Code](https://code.visualstudio.com/docs/typescript/typescript-compiling#_step-2-run-the-typescript-build).
+ Refer to your IDE's guides to set this up. For instance, here are the guides for WebStorm and Visual Studio Code.
#### Editing frontend features
diff --git a/docs/images/debugger/VSCode_1.jpg b/docs/images/debugger/VSCode_1.jpg
new file mode 100644
index 0000000000..e0f8786f42
Binary files /dev/null and b/docs/images/debugger/VSCode_1.jpg differ
diff --git a/docs/images/debugger/VSCode_2.jpg b/docs/images/debugger/VSCode_2.jpg
new file mode 100644
index 0000000000..f901d2dd42
Binary files /dev/null and b/docs/images/debugger/VSCode_2.jpg differ
diff --git a/docs/images/debugger/VSCode_3.jpg b/docs/images/debugger/VSCode_3.jpg
new file mode 100644
index 0000000000..ac3735e423
Binary files /dev/null and b/docs/images/debugger/VSCode_3.jpg differ
diff --git a/docs/userGuide/cliCommands.md b/docs/userGuide/cliCommands.md
index 0e00d6c909..e553efda17 100644
--- a/docs/userGuide/cliCommands.md
+++ b/docs/userGuide/cliCommands.md
@@ -68,6 +68,8 @@ Usage: markbind
+
+
### `serve` Command
@@ -136,6 +138,7 @@ The caveat is that not building all pages during the initial process, or not reb
* `markbind serve -p 8888 -s otherSite.json` : Serves the site in Port 8888 from the current working directory, using `otherSite.json` as the site configuration file.
+
diff --git a/packages/core-web/src/styles/markbind.css b/packages/core-web/src/styles/markbind.css
index 5ad4b56284..472fb3d24a 100644
--- a/packages/core-web/src/styles/markbind.css
+++ b/packages/core-web/src/styles/markbind.css
@@ -227,6 +227,10 @@ footer {
color: white !important;
}
+.mkb-text-violet {
+ color: violet !important;
+}
+
/* Bootstrap small(sm) responsive breakpoint */
@media (width <= 767.98px) {
.dropdown-menu > li > a {
diff --git a/packages/core/src/lib/markdown-it/plugins/markdown-it-colour-text.js b/packages/core/src/lib/markdown-it/plugins/markdown-it-colour-text.js
index cd6d205e17..32cf8453f2 100644
--- a/packages/core/src/lib/markdown-it/plugins/markdown-it-colour-text.js
+++ b/packages/core/src/lib/markdown-it/plugins/markdown-it-colour-text.js
@@ -36,6 +36,7 @@ module.exports = function colourtext_plugin(md) {
[109, '#m#'],
[121, '#y#'],
[107, '#k#'],
+ [118, '#v#'],
[119, '#w#'],
]);
const delimMarkerToClassMap = new Map([
@@ -46,6 +47,7 @@ module.exports = function colourtext_plugin(md) {
['#m#', 'mkb-text-magenta'],
['#y#', 'mkb-text-yellow'],
['#k#', 'mkb-text-black'],
+ ['#v#', 'mkb-text-violet'],
['#w#', 'mkb-text-white'],
]);
@@ -59,7 +61,7 @@ module.exports = function colourtext_plugin(md) {
if (marker === 35/* # */ &&
acsiiCodeToTokenMap.has(state.src.charCodeAt(start + 1)) &&
- start + 2 <= max &&
+ start + 2 <= max &&
state.src.charCodeAt(start + 2) === 35/* # */
) {
state.scanDelims(state.pos, true);