From e078ff436b254d802d4ef9a2443fc29f0143dd1b Mon Sep 17 00:00:00 2001
From: ludamad <adam.domurad@gmail.com>
Date: Thu, 21 Sep 2023 10:53:29 +0100
Subject: [PATCH] feat(docs): allow raw code interpolation (#2447)

Used in sandbox intro.
---
 docs/docs/dev_docs/getting_started/sandbox.md | 16 ++++++----------
 docs/src/preprocess/index.js                  |  8 +++++---
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/docs/docs/dev_docs/getting_started/sandbox.md b/docs/docs/dev_docs/getting_started/sandbox.md
index 46f9f5f5bae..3a192951d27 100644
--- a/docs/docs/dev_docs/getting_started/sandbox.md
+++ b/docs/docs/dev_docs/getting_started/sandbox.md
@@ -132,22 +132,18 @@ Add a `tsconfig.json` file into the project root, here is an example:
 yarn add @aztec/aztec.js @aztec/noir-contracts
 ```
 
-7. Create an `index.ts` file in the `src` directory and add the following imports:
-
-#include_code imports /yarn-project/end-to-end/src/e2e_sandbox_example.test.ts typescript
-
-Below the imports, set up a function in which we'll add the logic to interact with the Sandbox.
+7. Create an `index.ts` file in the `src` directory with the following sandbox connection setup:
 
 ```ts
-async function main() {}
+#include_code imports /yarn-project/end-to-end/src/e2e_sandbox_example.test.ts raw
+
+async function main() {
+#include_code setup /yarn-project/end-to-end/src/e2e_sandbox_example.test.ts raw
+}
 
 main();
 ```
 
-and the following setup code goes in the `main` function:
-
-#include_code setup /yarn-project/end-to-end/src/e2e_sandbox_example.test.ts typescript
-
 8. Finally, run the package:
 
 ```sh
diff --git a/docs/src/preprocess/index.js b/docs/src/preprocess/index.js
index f52e5da4063..e5ac984e936 100644
--- a/docs/src/preprocess/index.js
+++ b/docs/src/preprocess/index.js
@@ -221,7 +221,6 @@ async function processMarkdownFilesInDir(rootDir, docsDir, regex) {
           );
 
           const relativeCodeFilePath = path.resolve(rootDir, codeFilePath);
-
           const url = `https://github.com/AztecProtocol/aztec-packages/blob/master/${relativeCodeFilePath}#L${startLine}-L${endLine}`;
 
           const title = noTitle ? "" : `title="${identifier}"`;
@@ -229,8 +228,11 @@ async function processMarkdownFilesInDir(rootDir, docsDir, regex) {
           const source = noSourceLink
             ? ""
             : `\n> [<sup><sub>Source code: ${url}</sub></sup>](${url})`;
-          const replacement = `\`\`\`${language} ${title} ${lineNumbers} \n${codeSnippet}\n\`\`\`${source}\n`;
-
+          let replacement = codeSnippet;
+          if (language !== "raw") {
+            // if we aren't raw mode, wrap in a code block
+            replacement = `\`\`\`${language} ${title} ${lineNumbers} \n${codeSnippet}\n\`\`\`${source}\n`;
+          }
           // Replace the include tag with the code snippet
           updatedContent = updatedContent.replace(fullMatch, replacement);
         } catch (error) {