From 59d7f8e934909ab3df7aca98c842f40cde6038a0 Mon Sep 17 00:00:00 2001
From: lakith-rambukkanage <aclakith@gmail.com>
Date: Thu, 5 Sep 2024 13:15:08 +0530
Subject: [PATCH] Fix markdown doc styling issues

---
 .../src/main/webapp/site/public/css/main.css  |  3 ++
 .../src/main/webapp/site/public/css/main.css  |  6 +++
 .../Apis/Details/Documents/View.jsx           | 37 +++++++++++++++++--
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/portals/devportal/src/main/webapp/site/public/css/main.css b/portals/devportal/src/main/webapp/site/public/css/main.css
index e7d60ef3789..b8f81395da8 100644
--- a/portals/devportal/src/main/webapp/site/public/css/main.css
+++ b/portals/devportal/src/main/webapp/site/public/css/main.css
@@ -485,6 +485,9 @@ a {
 /* Styles to support rendering for markdown tables */
 .markdown-content-wrapper {
   padding-left: 20px;
+  flex-grow: 0;
+  max-width: 50%;
+  flex-basis: 50%;
 }
 .markdown-content-wrapper table{
   border-collapse: collapse;
diff --git a/portals/publisher/src/main/webapp/site/public/css/main.css b/portals/publisher/src/main/webapp/site/public/css/main.css
index e389ed10d34..4887abd1ee6 100644
--- a/portals/publisher/src/main/webapp/site/public/css/main.css
+++ b/portals/publisher/src/main/webapp/site/public/css/main.css
@@ -325,6 +325,12 @@ a {
   color: #000 !important;
 }
 /* Styles to support rendering for markdown tables */
+.markdown-content-wrapper {
+  padding-left: 20px;
+  flex-grow: 0;
+  max-width: 50%;
+  flex-basis: 50%;
+}
 .markdown-content-wrapper table{
   border-collapse: collapse;
   margin: 25px 0;
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsx
index 123208197a7..a52d3be8757 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsx
@@ -34,6 +34,9 @@ import Alert from 'AppComponents/Shared/Alert';
 import API from 'AppData/api';
 import APIProduct from 'AppData/APIProduct';
 import APIContext from 'AppComponents/Apis/Details/components/ApiContext';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import remarkGfm from 'remark-gfm';
+import { vscDarkPlus, vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import Utils from 'AppData/Utils';
 import Configuration from 'Config';
 import HTMLRender from 'AppComponents/Shared/HTMLRender';
@@ -145,6 +148,8 @@ function View(props) {
     const [isFileAvailable, setIsFileAvailable] = useState(true);
     const restAPI = isAPIProduct ? new APIProduct() : new API();
     
+    const syntaxHighlighterDarkTheme = false;
+
     useEffect(() => {
         const docPromise = restAPI.getDocument(api.id, documentId);
         docPromise
@@ -280,9 +285,35 @@ function View(props) {
 
                 <Paper className={classes.paper}>
                     {doc.sourceType === 'MARKDOWN' && (
-                        <Suspense fallback={<CircularProgress />}>
-                            <ReactMarkdown escapeHtml>{code}</ReactMarkdown>
-                        </Suspense>
+                        <div className='markdown-content-wrapper'>
+                            <Suspense fallback={<CircularProgress />}>
+                                <ReactMarkdown
+                                    skipHtml={true}
+                                    children={code}
+                                    remarkPlugins={[remarkGfm]}
+                                    components={{
+                                        code({
+                                            node, inline, className, children, ...propsInner
+                                        }) {
+                                            const match = /language-(\w+)/.exec(className || '');
+                                            return !inline && match ? (
+                                                <SyntaxHighlighter
+                                                    children={String(children).replace(/\n$/, '')}
+                                                    style={syntaxHighlighterDarkTheme ? vscDarkPlus : vs}
+                                                    language={match[1]}
+                                                    PreTag='div'
+                                                    {...propsInner}
+                                                />
+                                            ) : (
+                                                <code className={className} {...propsInner}>
+                                                    {children}
+                                                </code>
+                                            );
+                                        },
+                                    }}
+                                />
+                            </Suspense>
+                        </div>
                     )}
                     {doc.sourceType === 'INLINE' && <HTMLRender html={code} />}
                     {doc.sourceType === 'URL' && (