Merge pull request #98 from alioso/CT-995

CT-995 better handling of description code blocks

Author: alioso

src/css/components/0_utilities/typography.css

@@ -22,15 +22,6 @@ input[type="text"] {
   @apply p-4 mt-2 mb-2 bg-ThemeBeige block;
 }
 
-.api-body pre code {
-  @apply p-2 mt-2 mb-4 bg-ThemeBeige block;
-  overflow-x: auto;
-}
-
-.api-body code {
-  @apply p-1 bg-ThemeBeige;
-}
-
 .api-desc code {
   @apply font-normal px-1 bg-ThemeTagGrey inline text-xs relative;
   padding-top: 4px;

src/pages/api/v4.js

@@ -2,6 +2,8 @@ import React from "react";
 // import PropTypes from "prop-types";
 import { graphql, StaticQuery } from "gatsby";
 import Markdown from "react-markdown/with-html";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 import Layout from "../../components/4_layouts/layout";
 import SEO from "../../components/0_utilities/seo";
@@ -27,6 +29,25 @@ const HeadingRenderer = props => {
   return <Heading {...props} />;
 };
 
+class CodeBlock extends React.PureComponent {
+  render() {
+    const { value } = this.props;
+
+    return (
+      <SyntaxHighlighter
+        language="shell"
+        style={atomDark}
+        className="api-samples"
+        codeTagProps={{
+          style: { whiteSpace: "pre-wrap" }
+        }}
+      >
+        {value}
+      </SyntaxHighlighter>
+    );
+  }
+}
+
 class APIDocs extends React.Component {
   componentDidMount() {
     window.addEventListener("scroll", () => {
@@ -58,7 +79,7 @@ class APIDocs extends React.Component {
               <Markdown
                 source={n.info.description}
                 escapeHtml={false}
-                renderers={{ heading: HeadingRenderer }}
+                renderers={{ heading: HeadingRenderer, code: CodeBlock }}
                 className="md:mt-8 api-body"
               />
             </div>