From 620e2c324f1d730e09ef31e43e41e4d85588247e Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Wed, 27 Sep 2023 13:20:48 +0530
Subject: [PATCH] Onboarding Docs - Copy to clipboard (#3634)

* feat: enable copy-to-clipboard to onboarding docs snippets

* feat: remove commented code & <br></br> from md docs

* feat: remove react-copy-to-clipboard lib and fix type issues

* feat: markdown renderer - pre - remove any with reactnode
---
 frontend/package.json                         |   4 +
 .../CodeCopyBtn/CodeCopyBtn.scss              |  34 ++++
 .../CodeCopyBtn/CodeCopyBtn.tsx               |  32 ++++
 .../MarkdownRenderer/MarkdownRenderer.tsx     |  43 +++++
 .../OnboardingContainer/APM/GoLang/GoLang.tsx |  14 +-
 .../OnboardingContainer/APM/GoLang/goLang.md  |  46 ++---
 .../OnboardingContainer/APM/Java/Java.tsx     |  34 +++-
 .../APM/Java/md-docs/java.md                  |  14 +-
 .../APM/Java/md-docs/jboss.md                 |  18 +-
 .../APM/Java/md-docs/spring_boot.md           |  14 +-
 .../APM/Java/md-docs/tomcat.md                |  14 +-
 .../APM/Javascript/Javascript.tsx             |  31 +++-
 .../APM/Javascript/md-docs/express.md         |  18 +-
 .../APM/Javascript/md-docs/javascript.md      |  20 +--
 .../APM/Javascript/md-docs/nestjs.md          |  18 +-
 .../OnboardingContainer/APM/Python/Python.tsx |  35 ++--
 .../APM/Python/md-docs/django.md              |  28 +--
 .../APM/Python/md-docs/falcon.md              |  29 +---
 .../APM/Python/md-docs/fastAPI.md             |  12 +-
 .../APM/Python/md-docs/flask.md               |  12 +-
 .../APM/Python/md-docs/python.md              |   6 +-
 .../InfrastructureMonitoring.tsx              |  14 +-
 .../infraMonitoringDocs.md                    |   6 +-
 .../ApplicationLogs/ApplicationLogs.tsx       |  62 ++-----
 .../applicationLogsUsingJavaOtelSDK.md        |   2 +-
 .../LogsManagement/Docker/Docker.tsx          |  16 +-
 .../LogsManagement/Docker/docker.md           |   6 +-
 .../ExistingCollectors/ExistingCollectors.tsx |  28 ++-
 .../LogsManagement/Kubernetes/Kubernetes.tsx  |  16 +-
 .../LogsManagement/LogsManagement.tsx         |  10 --
 .../LogsManagement/Nodejs/Nodejs.tsx          |  16 +-
 .../LogsManagement/SysLogs/SysLogs.tsx        |  16 +-
 frontend/webpack.config.js                    |  15 +-
 frontend/yarn.lock                            | 162 +++++++++++++++++-
 34 files changed, 563 insertions(+), 282 deletions(-)
 create mode 100644 frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss
 create mode 100644 frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx
 create mode 100644 frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

diff --git a/frontend/package.json b/frontend/package.json
index 8e013ce78a..da217e7888 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -84,9 +84,11 @@
 		"react-helmet-async": "1.3.0",
 		"react-i18next": "^11.16.1",
 		"react-intersection-observer": "9.4.1",
+		"react-markdown": "8.0.7",
 		"react-query": "^3.34.19",
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
+		"react-syntax-highlighter": "15.5.0",
 		"react-use": "^17.3.2",
 		"react-virtuoso": "4.0.3",
 		"redux": "^4.0.5",
@@ -150,6 +152,7 @@
 		"@types/react-redux": "^7.1.11",
 		"@types/react-resizable": "3.0.3",
 		"@types/react-router-dom": "^5.1.6",
+		"@types/react-syntax-highlighter": "15.5.7",
 		"@types/styled-components": "^5.1.4",
 		"@types/uuid": "^8.3.1",
 		"@types/webpack": "^5.28.0",
@@ -183,6 +186,7 @@
 		"lint-staged": "^12.5.0",
 		"portfinder-sync": "^0.0.2",
 		"prettier": "2.2.1",
+		"raw-loader": "4.0.2",
 		"react-hooks-testing-library": "0.6.0",
 		"react-hot-loader": "^4.13.0",
 		"react-resizable": "3.0.4",
diff --git a/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss
new file mode 100644
index 0000000000..78bfa54dad
--- /dev/null
+++ b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss
@@ -0,0 +1,34 @@
+.code-snippet-container {
+	position: relative;
+	background-color: rgb(43, 43, 43);
+}
+
+.code-copy-btn {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+
+	button {
+		cursor: pointer;
+
+		background-color: rgba($color: #1d1d1d, $alpha: 0.7);
+		color: white;
+		border: none;
+		padding: 8px;
+		border-radius: 3px;
+		transition: all 0.1s;
+
+		&:hover {
+			background-color: rgba($color: #1d1d1d, $alpha: 1);
+		}
+	}
+
+	&.copied {
+		button {
+			background-color: rgba($color: #52c41a, $alpha: 1);
+		}
+	}
+}
diff --git a/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx
new file mode 100644
index 0000000000..e23882cc71
--- /dev/null
+++ b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx
@@ -0,0 +1,32 @@
+import './CodeCopyBtn.scss';
+
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import cx from 'classnames';
+import { useState } from 'react';
+
+export default function CodeCopyBtn({
+	children,
+}: {
+	children: React.ReactNode;
+}): JSX.Element {
+	const [isSnippetCopied, setIsSnippetCopied] = useState(false);
+
+	const handleClick = (): void => {
+		if (children && Array.isArray(children)) {
+			setIsSnippetCopied(true);
+			navigator.clipboard.writeText(children[0].props.children[0]).finally(() => {
+				setTimeout(() => {
+					setIsSnippetCopied(false);
+				}, 1000);
+			});
+		}
+	};
+
+	return (
+		<div className={cx('code-copy-btn', isSnippetCopied ? 'copied' : '')}>
+			<button type="button" onClick={handleClick}>
+				{!isSnippetCopied ? <CopyOutlined /> : <CheckOutlined />}
+			</button>
+		</div>
+	);
+}
diff --git a/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
new file mode 100644
index 0000000000..82b438dcd0
--- /dev/null
+++ b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+import CodeCopyBtn from './CodeCopyBtn/CodeCopyBtn';
+
+function Pre({ children }: { children: React.ReactNode }): JSX.Element {
+	return (
+		<pre className="code-snippet-container">
+			<CodeCopyBtn>{children}</CodeCopyBtn>
+			{children}
+		</pre>
+	);
+}
+
+function Code({
+	node,
+	inline,
+	className = 'blog-code',
+	children,
+	...props
+}: CodeProps): JSX.Element {
+	const match = /language-(\w+)/.exec(className || '');
+	return !inline && match ? (
+		<SyntaxHighlighter
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			style={a11yDark}
+			language={match[1]}
+			PreTag="div"
+			{...props}
+		>
+			{String(children).replace(/\n$/, '')}
+		</SyntaxHighlighter>
+	) : (
+		<code className={className} {...props}>
+			{children}
+		</code>
+	);
+}
+
+export { Code, Pre };
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
index f2310ec292..8319979f9a 100644
--- a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
@@ -1,8 +1,9 @@
 import './GoLang.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
 import { Form, Input } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import GoLangDocs from './goLang.md';
@@ -44,9 +45,14 @@ export default function GoLang({
 					</div>
 
 					<div className="content-container">
-						<MDXProvider>
-							<GoLangDocs />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{GoLangDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md b/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
index 284d45e5e8..e3ec94dde2 100644
--- a/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
+++ b/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
@@ -9,7 +9,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
 
 #### **Send traces directly to SigNoz Cloud**
 
-1. **Install Dependencies**<br></br>
+1. **Install Dependencies**
    
    Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
    
@@ -24,7 +24,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
       go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
     ```
     
-2. **Declare environment variables for configuring OpenTelemetry**<br></br>
+2. **Declare environment variables for configuring OpenTelemetry**
    
    Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
    
@@ -36,7 +36,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     )
     ```
     
-3. **Instrument your Go application with OpenTelemetry**<br></br>
+3. **Instrument your Go application with OpenTelemetry**
    
    To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
    
@@ -98,7 +98,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     }
     ```
     
-4. **Initialize the tracer in main.go**<br></br>
+4. **Initialize the tracer in main.go**
    
    Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
     
@@ -111,7 +111,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     }
     ```
     
-5. **Add the OpenTelemetry Gin middleware**<br></br>
+5. **Add the OpenTelemetry Gin middleware**
    
    Configure Gin to use the middleware by adding the following lines in `main.go`.
     
@@ -129,7 +129,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     }
     ```
 
-6. **Set environment variables and run your Go Gin application**<br></br>
+6. **Set environment variables and run your Go Gin application**
    
    The run command must have some environment variables to send data to SigNoz cloud. The run command:
     
@@ -146,11 +146,11 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     `OTEL_EXPORTER_OTLP_ENDPOINT`: ingest.{region}.signoz.cloud:443. Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
 
     
-    US - ingest.us.signoz.cloud:443 <br></br>
+    US - ingest.us.signoz.cloud:443 
 
-    IN - ingest.in.signoz.cloud:443 <br></br>
+    IN - ingest.in.signoz.cloud:443 
 
-    EU - ingest.eu.signoz.cloud:443 <br></br>
+    EU - ingest.eu.signoz.cloud:443 
 
 
 ---
@@ -161,7 +161,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Golang application.
 
-1. **Install Dependencies**<br></br>
+1. **Install Dependencies**
    
    Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
    
@@ -176,7 +176,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
       go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
     ```
     
-2. **Declare environment variables for configuring OpenTelemetry**<br></br>
+2. **Declare environment variables for configuring OpenTelemetry**
    
    Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
    
@@ -188,7 +188,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
     )
     ```
     
-3. **Instrument your Go application with OpenTelemetry**<br></br>
+3. **Instrument your Go application with OpenTelemetry**
    
    To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
     
@@ -249,7 +249,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
         return exporter.Shutdown
     }
     
-4. **Initialize the tracer in main.go**<br></br>
+4. **Initialize the tracer in main.go**
    
    Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
     
@@ -262,7 +262,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
     }
     ```
     
-5. **Add the OpenTelemetry Gin middleware**<br></br>
+5. **Add the OpenTelemetry Gin middleware**
    
    Configure Gin to use the middleware by adding the following lines in `main.go`.
     
@@ -280,7 +280,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
     }
     ```
     
-6. **Set environment variables and run your Go Gin application**<br></br>
+6. **Set environment variables and run your Go Gin application**
    
    The run command must have some environment variables to send data to SigNoz. The run command:
     
@@ -288,7 +288,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
     SERVICE_NAME=goGinApp INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go
     ```
     
-    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.<br></br>
+    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
     `SERVICE_NAME`: goGinApp (you can name it whatever you want)
 
 ---
@@ -299,7 +299,7 @@ For Golang application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Golang instrumentation by following the below steps:
 
-1. **Install Dependencies**<br></br>
+1. **Install Dependencies**
    
    Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
    
@@ -314,7 +314,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
       go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
     ```
     
-2. **Declare environment variables for configuring OpenTelemetry**<br></br>
+2. **Declare environment variables for configuring OpenTelemetry**
    
    Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
    
@@ -326,7 +326,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
     )
     ```
     
-3. **Instrument your Go application with OpenTelemetry**<br></br>
+3. **Instrument your Go application with OpenTelemetry**
    
    To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
     
@@ -387,7 +387,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
         return exporter.Shutdown
     }
     
-4. **Initialize the tracer in main.go**<br></br>
+4. **Initialize the tracer in main.go**
    
    Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
     
@@ -400,7 +400,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
     }
     ```
     
-5. **Add the OpenTelemetry Gin middleware**<br></br>
+5. **Add the OpenTelemetry Gin middleware**
    
    Configure Gin to use the middleware by adding the following lines in `main.go`.
     
@@ -418,7 +418,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
     }
     ```
     
-6. **Set environment variables and run your Go Gin application**<br></br>
+6. **Set environment variables and run your Go Gin application**
 
    The run command must have some environment variables to send data to SigNoz. The run command:
     
@@ -426,5 +426,5 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
     SERVICE_NAME=goGinApp INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go
     ```
     
-    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.<br></br>
+    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
     `SERVICE_NAME`: goGinApp (you can name it whatever you want)
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
index 205d68d4c0..2ebcba93e0 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
@@ -1,9 +1,10 @@
 import './Java.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
 import { Form, Input, Select } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -26,7 +27,9 @@ export default function Java({
 	activeStep: number;
 }): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('spring_boot');
-
+	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(
+		SprintBootDocs,
+	);
 	const [form] = Form.useForm();
 
 	useEffect(() => {
@@ -37,16 +40,22 @@ export default function Java({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedFrameWork]);
 
-	const renderDocs = (): JSX.Element => {
+	const handleFrameworkChange = (selectedFrameWork: string): void => {
+		setSelectedFrameWork(selectedFrameWork);
+
 		switch (selectedFrameWork) {
 			case 'tomcat':
-				return <TomcatDocs />;
+				setSelectedFrameWorkDocs(TomcatDocs);
+				break;
 			case 'spring_boot':
-				return <SprintBootDocs />;
+				setSelectedFrameWorkDocs(SprintBootDocs);
+				break;
 			case 'jboss':
-				return <JbossDocs />;
+				setSelectedFrameWorkDocs(JbossDocs);
+				break;
 			default:
-				return <JavaDocs />;
+				setSelectedFrameWorkDocs(JavaDocs);
+				break;
 		}
 	};
 
@@ -71,7 +80,7 @@ export default function Java({
 								defaultValue="spring_boot"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"
-								onChange={(value): void => setSelectedFrameWork(value)}
+								onChange={(value): void => handleFrameworkChange(value)}
 								options={[
 									{
 										value: 'spring_boot',
@@ -110,7 +119,14 @@ export default function Java({
 					</div>
 
 					<div className="content-container">
-						<MDXProvider>{renderDocs()}</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{selectedFrameWorkDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
index 54ee11d642..6b2ae7e2ba 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
@@ -39,11 +39,11 @@ java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <my-app>.jar
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 
 ---
@@ -54,13 +54,13 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
 
-Step 1. Download OTel java binary agent<br></br>
+Step 1. Download OTel java binary agent
 
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
 ```
 
-Step 2. Run your application<br></br>
+Step 2. Run your application
 
 ```bash
 java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <myapp>.jar
@@ -77,13 +77,13 @@ For Java application deployed on Kubernetes, you need to install OTel Collector
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary<br></br>
+1. Download otel java binary
 
    ```bash
    wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
    ```
 
-2. Run your application<br></br>
+2. Run your application
    
    ```bash
    java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <myapp>.jar
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
index 378b085261..2dc72e5082 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
@@ -40,20 +40,20 @@ JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar
 -Dotel.exporter.otlp.headers="signoz-access-token=<SIGNOZ_INGESTION_KEY>"
 -Dotel.resource.attributes="service.name=<app_name>""
 ```
-You need to replace the following things based on your environment:<br></br>
+You need to replace the following things based on your environment:
 
-- `<path>` - Update it to the path of your downloaded Java JAR agent.<br></br>
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 - `<app_name>` is the name for your application
 - `<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
    
 Step 4. [Optional] Write the output/logs of standalone.sh script to a file nohup.out as a background thread
@@ -69,7 +69,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
 
-Step 1. Download OTel java binary agent<br></br>
+Step 1. Download OTel java binary agent
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
 ```
@@ -90,7 +90,7 @@ JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar"
 ```
 
 where,
-- `path` - Update it to the path of your downloaded Java JAR agent.<br></br>
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
 ---
 
@@ -100,7 +100,7 @@ For Java application deployed on Kubernetes, you need to install OTel Collector
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-Step 1. Download otel java binary<br></br>
+Step 1. Download otel java binary
 
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
@@ -121,7 +121,7 @@ JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar"
 ```
 
 where,
-- `path` - Update it to the path of your downloaded Java JAR agent.<br></br>
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
 
 Step 4. Make sure to dockerise your application along with OpenTelemetry instrumentation.
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
index 66f1fbc659..e4d02bfe4d 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
@@ -38,11 +38,11 @@ java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 ---
 
@@ -52,12 +52,12 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
 
-Step 1. Download OTel java binary agent<br></br>
+Step 1. Download OTel java binary agent
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
 ```
 
-Step 2. Run your application<br></br>
+Step 2. Run your application
 
 ```bash
 java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
@@ -74,13 +74,13 @@ For Java application deployed on Kubernetes, you need to install OTel Collector
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary<br></br>
+1. Download otel java binary
 
    ```bash
    wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
    ```
 
-2. Run your application<br></br>
+2. Run your application
    
    ```bash
    java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
index 6cb29b33ff..f0b0ee9c20 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
@@ -42,11 +42,11 @@ export OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name>
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 ---
 
@@ -56,12 +56,12 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
 
-Step 1. Download OTel java binary agent<br></br>
+Step 1. Download OTel java binary agent
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
 ```
 
-Step 2. Enable the instrumentation agent and run your application<br></br>
+Step 2. Enable the instrumentation agent and run your application
 
 If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder.
 
@@ -82,13 +82,13 @@ For Java application deployed on Kubernetes, you need to install OTel Collector
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary<br></br>
+1. Download otel java binary
 
    ```bash
    wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
    ```
 
-2. Enable the instrumentation agent and run your application<br></br>
+2. Enable the instrumentation agent and run your application
 
    If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder.
    
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
index ff32c0230d..d467dc161c 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
@@ -1,9 +1,10 @@
 import './Javascript.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
 import { Form, Input, Select } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -24,7 +25,9 @@ export default function Javascript({
 	activeStep: number;
 }): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('express');
-
+	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(
+		ExpressDocs,
+	);
 	const [form] = Form.useForm();
 
 	useEffect(() => {
@@ -35,14 +38,19 @@ export default function Javascript({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedFrameWork]);
 
-	const renderDocs = (): JSX.Element => {
+	const handleFrameworkChange = (selectedFrameWork: string): void => {
+		setSelectedFrameWork(selectedFrameWork);
+
 		switch (selectedFrameWork) {
 			case 'nodejs':
-				return <JavascriptDocs />;
+				setSelectedFrameWorkDocs(JavascriptDocs);
+				break;
 			case 'nestjs':
-				return <NestJsDocs />;
+				setSelectedFrameWorkDocs(NestJsDocs);
+				break;
 			default:
-				return <ExpressDocs />;
+				setSelectedFrameWorkDocs(ExpressDocs);
+				break;
 		}
 	};
 
@@ -67,7 +75,7 @@ export default function Javascript({
 								defaultValue="express"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"
-								onChange={(value): void => setSelectedFrameWork(value)}
+								onChange={(value): void => handleFrameworkChange(value)}
 								options={[
 									{
 										value: 'nodejs',
@@ -108,7 +116,14 @@ export default function Javascript({
 					</div>
 
 					<div className="content-container">
-						<MDXProvider>{renderDocs()}</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{selectedFrameWorkDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
index a6a4790d39..2d008e3458 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
@@ -26,7 +26,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
 
 You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `node_app`.
 
@@ -71,13 +71,13 @@ process.on('SIGTERM', () => {
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443/v1/traces <br></br>
+ US -	ingest.us.signoz.cloud:443/v1/traces 
 
- IN -	ingest.in.signoz.cloud:443/v1/traces <br></br>
+ IN -	ingest.in.signoz.cloud:443/v1/traces 
 
- EU - ingest.eu.signoz.cloud:443/v1/traces <br></br>
+ EU - ingest.eu.signoz.cloud:443/v1/traces 
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 
 Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
 ```bash
@@ -104,7 +104,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
 
 You need to configure your service name. In this example, we have used `node_app`.
 
@@ -144,7 +144,7 @@ process.on('SIGTERM', () => {
 });
 ```
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 ```bash
 node -r ./tracing.js app.js
 ```
@@ -165,7 +165,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
 
 You also need to configure your service name. In this example, we have used `node_app`.
 
@@ -205,7 +205,7 @@ process.on('SIGTERM', () => {
 });
 ```
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 
 ```bash
 node -r ./tracing.js app.js
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
index 30eb052951..81fc46b08d 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
@@ -1,6 +1,6 @@
 ## Requirements
 
-- Node.js version 14 or newer ([See here](https://github.com/open-telemetry/opentelemetry-js#supported-runtimes))<br></br>
+- Node.js version 14 or newer ([See here](https://github.com/open-telemetry/opentelemetry-js#supported-runtimes))
 
 ## Send traces to SigNoz Cloud
 
@@ -24,7 +24,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
 
 You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `node_app`.
 
@@ -69,13 +69,13 @@ process.on('SIGTERM', () => {
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443/v1/traces <br></br>
+ US -	ingest.us.signoz.cloud:443/v1/traces 
 
- IN -	ingest.in.signoz.cloud:443/v1/traces <br></br>
+ IN -	ingest.in.signoz.cloud:443/v1/traces 
 
- EU - ingest.eu.signoz.cloud:443/v1/traces <br></br>
+ EU - ingest.eu.signoz.cloud:443/v1/traces 
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 
 Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
 
@@ -102,7 +102,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
 
 You need to configure your service name. In this example, we have used `node_app`.
 
@@ -142,7 +142,7 @@ process.on('SIGTERM', () => {
 });
 ```
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 
 ```bash
 node -r ./tracing.js app.js
@@ -165,7 +165,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
 
 You need to configure your service name. In this example, we have used `node_app`.
 
@@ -205,7 +205,7 @@ process.on('SIGTERM', () => {
 });
 ```
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 ```bash
 node -r ./tracing.js app.js
 ```
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
index 54ba57c58a..0baace6abe 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
@@ -26,7 +26,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create `tracer.ts` file<br></br>
+Step 2. Create `tracer.ts` file
 
 You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `sampleNestjsApplication`.
 
@@ -69,11 +69,11 @@ const sdk = new opentelemetry.NodeSDK({
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
 
- US -	ingest.us.signoz.cloud:443/v1/traces <br></br>
+ US -	ingest.us.signoz.cloud:443/v1/traces 
 
- IN -	ingest.in.signoz.cloud:443/v1/traces <br></br>
+ IN -	ingest.in.signoz.cloud:443/v1/traces 
 
- EU - ingest.eu.signoz.cloud:443/v1/traces <br></br>
+ EU - ingest.eu.signoz.cloud:443/v1/traces 
 
 
 
@@ -84,7 +84,7 @@ const tracer = require('./tracer')
 ```
     
 
-Step 4. Start the tracer<br></br>
+Step 4. Start the tracer
 
 In the `async function boostrap` section of the application code `(Ex —> In main.ts)`, initialize the tracer as follows: 
 
@@ -131,7 +131,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create `tracer.ts` file<br></br>
+Step 2. Create `tracer.ts` file
 
 You need to configure your service name. In this example, we have used `sampleNestjsApplication`.
 
@@ -180,7 +180,7 @@ const tracer = require('./tracer')
 ```
     
 
-Step 4. Start the tracer<br></br>
+Step 4. Start the tracer
 
 In the `async function boostrap` section of the application code, initialize the tracer as follows: 
 
@@ -219,7 +219,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create `tracer.ts` file<br></br>
+Step 2. Create `tracer.ts` file
 
 You need to configure your service name. In this example, we have used `sampleNestjsApplication`.
 
@@ -268,7 +268,7 @@ const tracer = require('./tracer')
 ```
     
 
-Step 4. Start the tracer<br></br>
+Step 4. Start the tracer
 
 In the `async function boostrap` section of the application code, initialize the tracer as follows: 
 
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
index 526b566124..faf7dfee86 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
@@ -1,9 +1,10 @@
 import './Python.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
 import { Form, Input, Select } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -28,7 +29,7 @@ export default function Python({
 	activeStep: number;
 }): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('django');
-
+	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(DjangoDocs);
 	const [form] = Form.useForm();
 
 	useEffect(() => {
@@ -39,18 +40,25 @@ export default function Python({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedFrameWork]);
 
-	const renderDocs = (): JSX.Element => {
+	const handleFrameworkChange = (selectedFrameWork: string): void => {
+		setSelectedFrameWork(selectedFrameWork);
+
 		switch (selectedFrameWork) {
 			case 'django':
-				return <DjangoDocs />;
+				setSelectedFrameWorkDocs(DjangoDocs);
+				break;
 			case 'fastAPI':
-				return <FastAPIDocs />;
+				setSelectedFrameWorkDocs(FastAPIDocs);
+				break;
 			case 'flask':
-				return <FlaskDocs />;
+				setSelectedFrameWorkDocs(FlaskDocs);
+				break;
 			case 'falcon':
-				return <FalconDocs />;
+				setSelectedFrameWorkDocs(FalconDocs);
+				break;
 			default:
-				return <PythonDocs />;
+				setSelectedFrameWorkDocs(PythonDocs);
+				break;
 		}
 	};
 
@@ -75,7 +83,7 @@ export default function Python({
 								defaultValue="Django"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"
-								onChange={(value): void => setSelectedFrameWork(value)}
+								onChange={(value): void => handleFrameworkChange(value)}
 								options={[
 									{
 										value: 'django',
@@ -118,7 +126,14 @@ export default function Python({
 					</div>
 
 					<div className="content-container">
-						<MDXProvider>{renderDocs()}</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{selectedFrameWorkDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
index 4709adc91f..5daecee6b1 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
@@ -24,7 +24,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
 
 #### **Send traces directly to SigNoz Cloud**
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -38,22 +38,6 @@ pip install opentelemetry-distro==0.38b0
 pip install opentelemetry-exporter-otlp==1.17.0
 ```
 
-<!-- The dependencies included are briefly explained below:
-
-`opentelemetry-distro` - The distro provides a mechanism to automatically configure some of the more common options for users. It helps to get started with OpenTelemetry auto-instrumentation quickly. 
-
-`opentelemetry-exporter-otlp` - This library provides a way to install all OTLP exporters. You will need an exporter to send the data to SigNoz.
-
-:::note
-💡 The `opentelemetry-exporter-otlp` is a convenience wrapper package to install all OTLP exporters. Currently, it installs:
-
-- opentelemetry-exporter-otlp-proto-http
-- opentelemetry-exporter-otlp-proto-grpc
-
-- (soon) opentelemetry-exporter-otlp-json-http
-
-The `opentelemetry-exporter-otlp-proto-grpc` package installs the gRPC exporter which depends on the `grpcio` package. The installation of `grpcio` may fail on some platforms for various reasons. If you run into such issues, or you don't want to use gRPC, you can install the HTTP exporter instead by installing the `opentelemetry-exporter-otlp-proto-http` package. You need to set the `OTEL_EXPORTER_OTLP_PROTOCOL` environment variable to `http/protobuf` to use the HTTP exporter.
-::: -->
 
 Step 3. Add automatic instrumentation
 
@@ -79,11 +63,11 @@ opentelemetry-instrument <your_run_command>
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -96,7 +80,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -142,7 +126,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
index 13b8c331da..549c75e804 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
@@ -15,7 +15,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
 
 #### **Send traces directly to SigNoz Cloud**
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -29,23 +29,6 @@ pip install opentelemetry-distro==0.38b0
 pip install opentelemetry-exporter-otlp==1.17.0
 ```
 
-<!-- The dependencies included are briefly explained below:
-
-`opentelemetry-distro` - The distro provides a mechanism to automatically configure some of the more common options for users. It helps to get started with OpenTelemetry auto-instrumentation quickly. 
-
-`opentelemetry-exporter-otlp` - This library provides a way to install all OTLP exporters. You will need an exporter to send the data to SigNoz.
-
-:::note
-💡 The `opentelemetry-exporter-otlp` is a convenience wrapper package to install all OTLP exporters. Currently, it installs:
-
-- opentelemetry-exporter-otlp-proto-http
-- opentelemetry-exporter-otlp-proto-grpc
-
-- (soon) opentelemetry-exporter-otlp-json-http
-
-The `opentelemetry-exporter-otlp-proto-grpc` package installs the gRPC exporter which depends on the `grpcio` package. The installation of `grpcio` may fail on some platforms for various reasons. If you run into such issues, or you don't want to use gRPC, you can install the HTTP exporter instead by installing the `opentelemetry-exporter-otlp-proto-http` package. You need to set the `OTEL_EXPORTER_OTLP_PROTOCOL` environment variable to `http/protobuf` to use the HTTP exporter.
-::: -->
-
 Step 3. Add automatic instrumentation
 
 ```bash
@@ -70,11 +53,11 @@ opentelemetry-instrument <your_run_command>
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -87,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -138,7 +121,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
index f29a743272..9855eba3f9 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
@@ -15,7 +15,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
 
 #### **Send traces directly to SigNoz Cloud**
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -53,11 +53,11 @@ opentelemetry-instrument <your_run_command>
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -70,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -119,7 +119,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
index 1c593b6f4a..2ce0daec6b 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
@@ -15,7 +15,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
 
 #### **Send traces directly to SigNoz Cloud**
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -53,11 +53,11 @@ opentelemetry-instrument <your_run_command>
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -70,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -121,7 +121,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
index 218ad40c4e..c5b625b30c 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
@@ -43,11 +43,11 @@ opentelemetry-instrument <your_run_command>
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation.
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
index 0b61a0d442..dc0f642340 100644
--- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
@@ -1,6 +1,7 @@
 import './InfrastructureMonitoring.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import ReactMarkdown from 'react-markdown';
 
 import InfraMonitoringDocs from './infraMonitoringDocs.md';
 
@@ -28,9 +29,14 @@ export default function InfrastructureMonitoring({
 						</div>
 					</div>
 
-					<MDXProvider>
-						<InfraMonitoringDocs />
-					</MDXProvider>
+					<ReactMarkdown
+						components={{
+							pre: Pre,
+							code: Code,
+						}}
+					>
+						{InfraMonitoringDocs}
+					</ReactMarkdown>
 				</div>
 			)}
 			{activeStep === 3 && <div> Infra Monitoring Step 3 </div>}
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
index 351c4542c6..b8e44e1fe9 100644
--- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
@@ -71,11 +71,11 @@ service:
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
-US - ingest.us.signoz.cloud:443 <br></br>
+US - ingest.us.signoz.cloud:443 
 
-IN - ingest.in.signoz.cloud:443 <br></br>
+IN - ingest.in.signoz.cloud:443 
 
-EU - ingest.eu.signoz.cloud:443 <br></br>
+EU - ingest.eu.signoz.cloud:443 
 
 To enable a new OpenTelemetry receiver, follow the steps below:
 
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
index f08da7d539..3341dadaff 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
@@ -1,11 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
-import { Tabs } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
 import LogsFromLogFile from './applicationLogsFromLogFile.md';
-import LogsUsingJavaOtelSDK from './applicationLogsUsingJavaOtelSDK.md';
-import LogsUsingPythonOtelSDK from './applicationLogsUsingPythonOtelSDK.md';
 
 interface ApplicationLogsProps {
 	type: string;
@@ -14,29 +12,12 @@ interface ApplicationLogsProps {
 
 const collectLogsFromFileURL =
 	'https://signoz.io/docs/userguide/collect_logs_from_file/';
-const collectLogsFromOTELSDK =
-	'https://signoz.io/docs/userguide/collecting_application_logs_otel_sdk_java/';
 
 export default function ApplicationLogs({
 	type,
 	activeStep,
 }: ApplicationLogsProps): JSX.Element {
-	function renderContentForCollectingLogsOtelSDK(language: string): JSX.Element {
-		if (language === 'Java') {
-			return <LogsUsingJavaOtelSDK />;
-		}
-		return <LogsUsingPythonOtelSDK />;
-	}
-
-	enum ApplicationLogsType {
-		FROM_LOG_FILE = 'from-log-file',
-		USING_OTEL_COLLECTOR = 'using-otel-sdk',
-	}
-
-	const docsURL =
-		type === ApplicationLogsType.FROM_LOG_FILE
-			? collectLogsFromFileURL
-			: collectLogsFromOTELSDK;
+	const docsURL = collectLogsFromFileURL;
 
 	return (
 		<>
@@ -44,38 +25,21 @@ export default function ApplicationLogs({
 				<div className="golang-setup-instructions-container">
 					<Header
 						entity="docker"
-						heading={
-							type === ApplicationLogsType.FROM_LOG_FILE
-								? 'Collecting Application Logs from Log file'
-								: 'Collecting Application Logs Using OTEL SDK'
-						}
-						imgURL={`/Logos/${
-							type === ApplicationLogsType.FROM_LOG_FILE
-								? 'software-window'
-								: 'cmd-terminal'
-						}.svg`}
+						heading="Collecting Application Logs from Log file"
+						imgURL={`/Logos/${'software-window'}.svg`}
 						docsURL={docsURL}
 						imgClassName="supported-logs-type-img"
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							{type === ApplicationLogsType.FROM_LOG_FILE && <LogsFromLogFile />}
-							{type === ApplicationLogsType.USING_OTEL_COLLECTOR && (
-								<Tabs
-									defaultActiveKey="1"
-									items={['Java', 'Python'].map((language, i) => {
-										const id = String(i + 1);
-
-										return {
-											label: <div className="language-tab-item">{language}</div>,
-											key: id,
-											children: renderContentForCollectingLogsOtelSDK(language),
-										};
-									})}
-								/>
-							)}
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{LogsFromLogFile}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
index dd3591d472..f0e512581a 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
@@ -13,7 +13,7 @@ The command for it will look like
 OTEL_LOGS_EXPORTER=otlp OTEL_EXPORTER_OTLP_ENDPOINT="http://<IP of SigNoz Backend>:4317" OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name> java -javaagent:/path/opentelemetry-javaagent.jar -jar  <myapp>.jar
 ```
 
-<br></br>
+
 
 In the below example we will configure a java application to send logs to SigNoz.
 
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
index 972372c59d..e88d62632b 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './docker.md';
+import DockerDocs from './docker.md';
 
 export default function Docker({
 	activeStep,
@@ -22,9 +23,14 @@ export default function Docker({
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							<Post />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{DockerDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
index 008dcf598d..1c1025963a 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
@@ -6,11 +6,11 @@
 
     Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
 
-    US -	ingest.us.signoz.cloud:443 <br></br>
+    US -	ingest.us.signoz.cloud:443 
 
-    IN -	ingest.in.signoz.cloud:443 <br></br>
+    IN -	ingest.in.signoz.cloud:443 
 
-    EU - ingest.eu.signoz.cloud:443 <br></br>
+    EU - ingest.eu.signoz.cloud:443 
 
 
  - Start the containers
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
index 6ad936134b..e86bbabfe4 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
@@ -1,7 +1,8 @@
-import { MDXProvider } from '@mdx-js/react';
 import { Select } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -17,6 +18,7 @@ enum FrameworksMap {
 
 export default function ExistingCollectors(): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('fluent_d');
+	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(FluentD);
 
 	useEffect(() => {
 		// on language select
@@ -26,14 +28,19 @@ export default function ExistingCollectors(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedFrameWork]);
 
-	const renderDocs = (): JSX.Element => {
+	const handleFrameworkChange = (selectedFrameWork: string): void => {
+		setSelectedFrameWork(selectedFrameWork);
+
 		switch (selectedFrameWork) {
 			case 'fluent_d':
-				return <FluentD />;
+				setSelectedFrameWorkDocs(FluentD);
+				break;
 			case 'fluent_bit':
-				return <FluentBit />;
+				setSelectedFrameWorkDocs(FluentBit);
+				break;
 			default:
-				return <LogStashDocs />;
+				setSelectedFrameWorkDocs(LogStashDocs);
+				break;
 		}
 	};
 
@@ -56,7 +63,7 @@ export default function ExistingCollectors(): JSX.Element {
 						defaultValue="fluent_d"
 						style={{ minWidth: 120 }}
 						placeholder="Select Framework"
-						onChange={(value): void => setSelectedFrameWork(value)}
+						onChange={(value): void => handleFrameworkChange(value)}
 						options={[
 							{
 								value: 'fluent_d',
@@ -76,7 +83,14 @@ export default function ExistingCollectors(): JSX.Element {
 			</div>
 
 			<div className="content-container">
-				<MDXProvider>{renderDocs()}</MDXProvider>
+				<ReactMarkdown
+					components={{
+						pre: Pre,
+						code: Code,
+					}}
+				>
+					{selectedFrameWorkDocs}
+				</ReactMarkdown>
 			</div>
 		</div>
 	);
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
index 9c93ce5aa9..0a60acc7db 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './kubernetes.md';
+import KubernetesDocs from './kubernetes.md';
 
 export default function Kubernetes({
 	activeStep,
@@ -22,9 +23,14 @@ export default function Kubernetes({
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							<Post />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{KubernetesDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
index ef7bae252e..0a54cbce0f 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
@@ -35,16 +35,6 @@ const supportedLogTypes = [
 		id: 'application_logs_log_file',
 		imgURL: `Logos/software-window.svg`,
 	},
-	// {
-	// 	name: 'NodeJS Winston Logs ',
-	// 	id: 'nodejs',
-	// 	imgURL: `Logos/node-js.svg`,
-	// },
-	// {
-	// 	name: 'Application Logs using OTEL SDK',
-	// 	id: 'application_logs_otel_sdk',
-	// 	imgURL: `Logos/cmd-terminal.svg`,
-	// },
 	{
 		name: 'Logs from existing collectors',
 		id: 'existing_collectors',
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
index 5ebc044205..75f9a3a487 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './nodejs.md';
+import NodeJsDocs from './nodejs.md';
 
 export default function Nodejs({
 	activeStep,
@@ -22,9 +23,14 @@ export default function Nodejs({
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							<Post />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{NodeJsDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
index eb00380e44..9cd568f79d 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './syslogs.md';
+import SysLogsDocs from './syslogs.md';
 
 export default function SysLogs({
 	activeStep,
@@ -22,9 +23,14 @@ export default function SysLogs({
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							<Post />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{SysLogsDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 5fe07bfa87..a5862179a4 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -78,19 +78,10 @@ const config = {
 				use: ['babel-loader'],
 				exclude: /node_modules/,
 			},
+			// Add a rule for Markdown files using raw-loader
 			{
-				test: /\.mdx?$/,
-				use: [
-					// `babel-loader` is optional:
-					{ loader: 'babel-loader', options: {} },
-					{
-						loader: '@mdx-js/loader',
-						/** @type {import('@mdx-js/loader').Options} */
-						options: {
-							/* jsxImportSource: …, otherOptions… */
-						},
-					},
-				],
+				test: /\.md$/,
+				use: 'raw-loader',
 			},
 			{
 				test: /\.css$/,
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 0c2074a83e..a7998ef225 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2013,6 +2013,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.3.1":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
+  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz"
@@ -3499,6 +3506,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-syntax-highlighter@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.7.tgz#bd29020ccb118543d88779848f99059b64b02d0f"
+  integrity sha512-bo5fEO5toQeyCp0zVHBeggclqf5SQ/Z5blfFmjwO5dkMVGPgmiwZsJh9nu/Bo5L7IHTuGWrja6LxJVE2uB5ZrQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-test-renderer@^16.8.2":
   version "16.9.5"
   resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.5.tgz"
@@ -5229,16 +5243,31 @@ character-entities-html4@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
   integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
 
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
 character-entities-legacy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
   integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
 
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
 character-entities@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 character-reference-invalid@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
@@ -5451,6 +5480,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
 comma-separated-tokens@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
@@ -7302,6 +7336,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.11.3:
   version "0.11.4"
   resolved "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz"
@@ -7495,6 +7536,11 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@@ -7849,6 +7895,11 @@ hast-util-is-element@^2.0.0:
     "@types/hast" "^2.0.0"
     "@types/unist" "^2.0.0"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
+  integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
+
 hast-util-parse-selector@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz#25ab00ae9e75cbc62cf7a901f68a247eade659e2"
@@ -7956,6 +8007,17 @@ hast-util-whitespace@^2.0.0:
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
   integrity sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==
 
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 hastscript@^7.0.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-7.2.0.tgz#0eafb7afb153d047077fa2a833dc9b7ec604d10b"
@@ -7972,6 +8034,11 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+highlight.js@^10.4.1, highlight.js@~10.7.0:
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+
 history@4.10.1, history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.npmjs.org/history/-/history-4.10.1.tgz"
@@ -8346,11 +8413,24 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
 is-alphabetical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
   integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
 
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-alphanumerical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875"
@@ -8451,6 +8531,11 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-decimal@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
@@ -8493,6 +8578,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-hexadecimal@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
@@ -9777,6 +9867,14 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lowlight@^1.17.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
+  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.7.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz"
@@ -11182,6 +11280,18 @@ parse-bmfont-xml@^1.1.4:
     xml-parse-from-string "^1.0.0"
     xml2js "^0.4.5"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-entities@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.1.tgz#4e2a01111fb1c986549b944af39eeda258fc9e4e"
@@ -11751,6 +11861,16 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prismjs@^1.27.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
+prismjs@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
@@ -11795,6 +11915,13 @@ prop-types@15, prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.8, prop-typ
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-information@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+  dependencies:
+    xtend "^4.0.0"
+
 property-information@^6.0.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.3.0.tgz#ba4a06ec6b4e1e90577df9931286953cdf4282c3"
@@ -11905,6 +12032,14 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rbush@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz"
@@ -12430,7 +12565,7 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-markdown@~8.0.0:
+react-markdown@8.0.7, react-markdown@~8.0.0:
   version "8.0.7"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
   integrity sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==
@@ -12516,6 +12651,17 @@ react-router@5.3.4:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-syntax-highlighter@15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
+  integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.27.0"
+    refractor "^3.6.0"
+
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz"
@@ -12628,6 +12774,15 @@ redux@^4.0.0, redux@^4.0.5, redux@^4.2.0:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+refractor@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
+  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.27.0"
+
 refractor@^4.8.0:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-4.8.1.tgz#fbdd889333a3d86c9c864479622855c9b38e9d42"
@@ -13467,6 +13622,11 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
 space-separated-tokens@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"