From b0c5b19939f9a67fc548b5b6c37594303e55d178 Mon Sep 17 00:00:00 2001
From: abdellah hariti <haritiabdellah@gmail.com>
Date: Fri, 15 Mar 2024 20:49:32 +0000
Subject: [PATCH] Highlight replay snippets (#9454)

* feat: highlight Network Details on js replay setup snippet

* feat: highlight replayCanvasIntegration()

* feat: hightlight `replaysSessionSampleRate` and `integrations` in
session replay setup snippets

* hightlight `replaysOnErrorSampleRate`
---
 .../javascript/common/session-replay/configuration.mdx        | 2 +-
 .../session-replay/setup-canvas/javascript.angular.mdx        | 2 +-
 .../session-replay/setup-canvas/javascript.astro.mdx          | 2 +-
 .../session-replay/setup-canvas/javascript.ember.mdx          | 2 +-
 .../session-replay/setup-canvas/javascript.gatsby.mdx         | 2 +-
 platform-includes/session-replay/setup-canvas/javascript.mdx  | 2 +-
 .../session-replay/setup-canvas/javascript.nextjs.mdx         | 2 +-
 .../session-replay/setup-canvas/javascript.react.mdx          | 2 +-
 .../session-replay/setup-canvas/javascript.remix.mdx          | 2 +-
 .../session-replay/setup-canvas/javascript.svelte.mdx         | 2 +-
 .../session-replay/setup-canvas/javascript.sveltekit.mdx      | 3 +--
 .../session-replay/setup-canvas/javascript.vue.mdx            | 3 +--
 platform-includes/session-replay/setup/javascript.angular.mdx | 2 +-
 platform-includes/session-replay/setup/javascript.astro.mdx   | 4 ++--
 .../session-replay/setup/javascript.capacitor.mdx             | 2 +-
 .../session-replay/setup/javascript.electron.mdx              | 2 +-
 platform-includes/session-replay/setup/javascript.ember.mdx   | 2 +-
 platform-includes/session-replay/setup/javascript.gatsby.mdx  | 2 +-
 platform-includes/session-replay/setup/javascript.mdx         | 2 +-
 platform-includes/session-replay/setup/javascript.nextjs.mdx  | 2 +-
 platform-includes/session-replay/setup/javascript.react.mdx   | 2 +-
 platform-includes/session-replay/setup/javascript.remix.mdx   | 2 +-
 platform-includes/session-replay/setup/javascript.svelte.mdx  | 2 +-
 .../session-replay/setup/javascript.sveltekit.mdx             | 2 +-
 platform-includes/session-replay/setup/javascript.vue.mdx     | 2 +-
 25 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/docs/platforms/javascript/common/session-replay/configuration.mdx b/docs/platforms/javascript/common/session-replay/configuration.mdx
index a6f4222c18dc3..c7d955498d934 100644
--- a/docs/platforms/javascript/common/session-replay/configuration.mdx
+++ b/docs/platforms/javascript/common/session-replay/configuration.mdx
@@ -79,7 +79,7 @@ Requests to a URL matched by the configured patterns will be enhanced with the r
 
 If you want to capture additional headers, you'll have to configure them with the options `networkRequestHeaders` and `networkResponseHeaders`, for example:
 
-```javascript
+```javascript {7-8}
 replayIntegration({
   networkDetailAllowUrls: [
     window.location.origin,
diff --git a/platform-includes/session-replay/setup-canvas/javascript.angular.mdx b/platform-includes/session-replay/setup-canvas/javascript.angular.mdx
index e569c06107186..e5383f70904e5 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.angular.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.angular.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/angular-ivy";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup-canvas/javascript.astro.mdx b/platform-includes/session-replay/setup-canvas/javascript.astro.mdx
index 55233fadf2b5a..f8cf9ed955bca 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.astro.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.astro.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/astro";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup-canvas/javascript.ember.mdx b/platform-includes/session-replay/setup-canvas/javascript.ember.mdx
index bfc514e52219e..f1c579ad20d17 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.ember.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.ember.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/ember";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup-canvas/javascript.gatsby.mdx b/platform-includes/session-replay/setup-canvas/javascript.gatsby.mdx
index 0bf4040e44b00..1c0274fe5facc 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.gatsby.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.gatsby.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/gatsby";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup-canvas/javascript.mdx b/platform-includes/session-replay/setup-canvas/javascript.mdx
index 797c09ee86304..fda18c14468ba 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {14}
 // import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser
 import * as Sentry from "@sentry/browser";
 
diff --git a/platform-includes/session-replay/setup-canvas/javascript.nextjs.mdx b/platform-includes/session-replay/setup-canvas/javascript.nextjs.mdx
index 6605aa2937c2d..1f99c65944876 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.nextjs.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.nextjs.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup-canvas/javascript.react.mdx b/platform-includes/session-replay/setup-canvas/javascript.react.mdx
index 49c5a50fe125e..75b070edcc1cf 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.react.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.react.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/react";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup-canvas/javascript.remix.mdx b/platform-includes/session-replay/setup-canvas/javascript.remix.mdx
index 966daf45d220c..9baaa5d560395 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.remix.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.remix.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/remix";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup-canvas/javascript.svelte.mdx b/platform-includes/session-replay/setup-canvas/javascript.svelte.mdx
index 2fbc5e188ccfd..058256f9530c5 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.svelte.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.svelte.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/svelte";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup-canvas/javascript.sveltekit.mdx b/platform-includes/session-replay/setup-canvas/javascript.sveltekit.mdx
index f2f372e5c7405..19d99f0950d34 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.sveltekit.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.sveltekit.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/sveltekit";
 
 Sentry.init({
@@ -31,4 +31,3 @@ Sentry.init({
   crossorigin="anonymous"
 ></script>
 ```
-
diff --git a/platform-includes/session-replay/setup-canvas/javascript.vue.mdx b/platform-includes/session-replay/setup-canvas/javascript.vue.mdx
index 18eb0cf5c7cb2..99657a2f47fd0 100644
--- a/platform-includes/session-replay/setup-canvas/javascript.vue.mdx
+++ b/platform-includes/session-replay/setup-canvas/javascript.vue.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {13}
 import * as Sentry from "@sentry/vue";
 
 Sentry.init({
@@ -15,4 +15,3 @@ Sentry.init({
   ],
 });
 ```
-
diff --git a/platform-includes/session-replay/setup/javascript.angular.mdx b/platform-includes/session-replay/setup/javascript.angular.mdx
index 698eb8720a878..2375241b70b6e 100644
--- a/platform-includes/session-replay/setup/javascript.angular.mdx
+++ b/platform-includes/session-replay/setup/javascript.angular.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/angular-ivy";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.astro.mdx b/platform-includes/session-replay/setup/javascript.astro.mdx
index 89102cbee7a55..f3c811040677b 100644
--- a/platform-includes/session-replay/setup/javascript.astro.mdx
+++ b/platform-includes/session-replay/setup/javascript.astro.mdx
@@ -2,7 +2,7 @@ Session replay is enabled by default if you use the SDK configuration in your `a
 
 You can customize Replay sample rates like so:
 
-```javascript {filename:astro.config.mjs}
+```javascript {filename:astro.config.mjs} {8-9}
 import { defineConfig } from "astro/config";
 import sentry from "@sentry/astro";
 
@@ -19,7 +19,7 @@ export default defineConfig({
 
 If you have a <PlatformLink to="/manual-setup/#manual-sdk-initialization">custom SDK configuration file</PlatformLink> for the client side (`sentry.client.config.js`), add the Sentry `Replay` integration:
 
-```javascript {filename:sentry.client.config.js}
+```javascript {filename:sentry.client.config.js} {5-7}
 import * as sentry from "@sentry/astro";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.capacitor.mdx b/platform-includes/session-replay/setup/javascript.capacitor.mdx
index c2eeceb121da3..d782cffb884fa 100644
--- a/platform-includes/session-replay/setup/javascript.capacitor.mdx
+++ b/platform-includes/session-replay/setup/javascript.capacitor.mdx
@@ -6,7 +6,7 @@ Several options are supported and passable using the integration constructor. Se
 
 <SignInNote />
 
-```javascript
+```javascript {9,13,15-21}
 import * as Sentry from "@sentry/capacitor";
 import { Replay } from "@sentry/replay";
 
diff --git a/platform-includes/session-replay/setup/javascript.electron.mdx b/platform-includes/session-replay/setup/javascript.electron.mdx
index fb2bdd1465e1a..0009f6ba3850d 100644
--- a/platform-includes/session-replay/setup/javascript.electron.mdx
+++ b/platform-includes/session-replay/setup/javascript.electron.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/electron/renderer";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.ember.mdx b/platform-includes/session-replay/setup/javascript.ember.mdx
index 400d260ceeea1..c67d719089173 100644
--- a/platform-includes/session-replay/setup/javascript.ember.mdx
+++ b/platform-includes/session-replay/setup/javascript.ember.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/ember";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.gatsby.mdx b/platform-includes/session-replay/setup/javascript.gatsby.mdx
index 138e87004d6c8..5bbdc65feeb52 100644
--- a/platform-includes/session-replay/setup/javascript.gatsby.mdx
+++ b/platform-includes/session-replay/setup/javascript.gatsby.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/gatsby";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.mdx b/platform-includes/session-replay/setup/javascript.mdx
index da2847d55b7f9..a32cd3bed6e10 100644
--- a/platform-includes/session-replay/setup/javascript.mdx
+++ b/platform-includes/session-replay/setup/javascript.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {9,13,15-21}
 // import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser
 import * as Sentry from "@sentry/browser";
 
diff --git a/platform-includes/session-replay/setup/javascript.nextjs.mdx b/platform-includes/session-replay/setup/javascript.nextjs.mdx
index fa7a0cae66388..c9aa7743b9e53 100644
--- a/platform-includes/session-replay/setup/javascript.nextjs.mdx
+++ b/platform-includes/session-replay/setup/javascript.nextjs.mdx
@@ -1,6 +1,6 @@
 On your client-side NextJS app, add:
 
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.react.mdx b/platform-includes/session-replay/setup/javascript.react.mdx
index c6c50b141de45..94606c1fd4d3f 100644
--- a/platform-includes/session-replay/setup/javascript.react.mdx
+++ b/platform-includes/session-replay/setup/javascript.react.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/react";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.remix.mdx b/platform-includes/session-replay/setup/javascript.remix.mdx
index 67e6cc14db491..0d9b66515aceb 100644
--- a/platform-includes/session-replay/setup/javascript.remix.mdx
+++ b/platform-includes/session-replay/setup/javascript.remix.mdx
@@ -1,6 +1,6 @@
 On your client-side Remix app, add:
 
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/remix";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.svelte.mdx b/platform-includes/session-replay/setup/javascript.svelte.mdx
index af7536d931550..0e0cf96b56b7e 100644
--- a/platform-includes/session-replay/setup/javascript.svelte.mdx
+++ b/platform-includes/session-replay/setup/javascript.svelte.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/svelte";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.sveltekit.mdx b/platform-includes/session-replay/setup/javascript.sveltekit.mdx
index a37298d74f3f7..55d96e1f3bcaf 100644
--- a/platform-includes/session-replay/setup/javascript.sveltekit.mdx
+++ b/platform-includes/session-replay/setup/javascript.sveltekit.mdx
@@ -1,6 +1,6 @@
 On your client-side SvelteKit app, add:
 
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/sveltekit";
 
 Sentry.init({
diff --git a/platform-includes/session-replay/setup/javascript.vue.mdx b/platform-includes/session-replay/setup/javascript.vue.mdx
index b4f62e756b546..3574d1b72080d 100644
--- a/platform-includes/session-replay/setup/javascript.vue.mdx
+++ b/platform-includes/session-replay/setup/javascript.vue.mdx
@@ -1,4 +1,4 @@
-```javascript
+```javascript {8,12,14-20}
 import * as Sentry from "@sentry/vue";
 
 Sentry.init({