Fix markdown doc styling issues

wso2 · Sep 5, 2024 · 59d7f8e · 59d7f8e
1 parent d3fcb20
commit 59d7f8e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 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
@@ -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
@@ -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
@@ -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' && (