feat: work on highlighting and displaying language snippets

src/app/components/CodeSnippet.module.css

@@ -20,6 +20,7 @@
   overflow: auto;
   padding: 1rem;
   scrollbar-color: #043160 #0b3766;
+  max-height: calc(100vh - 280px);
 }
 
 .snippetContent>pre::-webkit-scrollbar {

src/app/components/CodeSnippet.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import Prism from 'prismjs';
-import 'prismjs/components/prism-json';
-import 'prismjs/themes/prism.css';
+import {
+  Children,
+  MouseEvent,
+  ReactElement,
+  useState,
+} from 'react';
+import styles from './CodeSnippet.module.css';
 
-import { MouseEvent, useEffect, useState } from 'react';
-import styles from './Code.module.css';
-
-function CodeCopyButton() {
+function CodeSnippetCopyButton() {
   const [copyButtonTooltip, setCopyButtonTooltip] =
     useState<boolean>(false);
 
@@ -65,27 +66,42 @@ function CodeCopyButton() {
   );
 }
 
-export default function Code({
+function SnippetLanguageDropdown() {}
+
+export default function CodeSnippet({
   children,
-  language,
   heading,
+  defaultLanguage,
 }: {
-  children: string;
-  language: string;
+  children: ReactElement;
   heading: string;
+  defaultLanguage: string;
 }) {
-  useEffect(() => {
-    Prism.highlightAll();
-  }, []);
+  const [selectedLanguage, setSelectedLanguage] =
+    useState<string>(defaultLanguage);
+
+  const snippetLanguages = Children.toArray(children).map(
+    (child: any) => child.props.className.split('-')[1]
+  );
 
   return (
     <div className={styles.snippetContainer}>
       <div className={styles.snippetHeader}>
         <div>{heading}</div>
-        <CodeCopyButton />
+        <CodeSnippetCopyButton />
       </div>
       <div className={styles.snippetContent}>
-        {children}
+        <pre>
+          {Children.toArray(children)
+            .filter(
+              (child: any) =>
+                child.props.className ===
+                `language-${defaultLanguage}`
+            )
+            .map(child => {
+              return child;
+            })}
+        </pre>
       </div>
     </div>
   );

src/app/components/Fence.tsx

@@ -0,0 +1,24 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import './prism-custom.css';
+
+export default function Fence({
+  content,
+  language,
+}: {
+  content: string;
+  language: string;
+}) {
+  const html = Prism.highlight(
+    content,
+    Prism.languages[language],
+    language
+  );
+  return (
+    <code
+      className={`language-${language}`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    ></code>
+  );
+}

src/app/components/prism-custom.css

@@ -0,0 +1,115 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #282a36;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6272a4;
+}
+
+.token.punctuation {
+  color: #f8f8f2;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #ff79c6;
+}
+
+.token.boolean,
+.token.number {
+  color: #bd93f9;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #50fa7b;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #f1fa8c;
+}
+
+.token.keyword {
+  color: #8be9fd;
+}
+
+.token.regex,
+.token.important {
+  color: #ffb86c;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/app/lib/markdoc.ts

@@ -2,7 +2,8 @@ import { default as Markdoc } from '@markdoc/markdoc';
 import fs from 'fs';
 import path from 'path';
 import React, { ReactNode } from 'react';
-import Code from '../components/Code';
+import CodeSnippet from '../components/CodeSnippet';
+import Fence from '../components/Fence';
 import { Doc, DocSection } from './../types/types';
 
 const DOCS_PATH = path.join(process.cwd(), 'src/docs');
@@ -34,16 +35,29 @@ function getExamplePath(version: string, doc: Doc): string {
 }
 
 const markDocConfig = {
-  tags: {
-    code: {
-      render: 'Code',
+  nodes: {
+    fence: {
+      render: 'Fence',
       attributes: {
         language: {
           type: 'string',
         },
+        content: {
+          type: 'string',
+        },
+      },
+    },
+  },
+  tags: {
+    code: {
+      render: 'CodeSnippet',
+      attributes: {
         heading: {
           type: 'string',
         },
+        defaultLanguage: {
+          type: 'string',
+        },
       },
     },
   },
@@ -58,7 +72,8 @@ function parseMarkdown(sourcePath: string): ReactNode {
   );
   const children = Markdoc.renderers.react(content, React, {
     components: {
-      Code: Code,
+      CodeSnippet: CodeSnippet,
+      Fence: Fence,
     },
   });
 

src/docs/version_002/authentication/example.md

@@ -2,7 +2,7 @@
 
 API Keys are specific to an instance. If you are using the API to access data from multiple instances, you will need to create an API key for each instance.
 
-{% code heading="X-API KEY" language="text" %}
+{% code heading="X-API KEY" defaultLanguage="text" %}
 
 ```text
 X-ApiKey: 000000ffffff000000ffffff/00000000-ffff-0000-ffff-000000000000

src/docs/version_002/introduction/example.md

@@ -2,7 +2,7 @@
 
 The base url for the Onspring API will be the same for all instances regardless of whether the instances is a development, test, or production instance.
 
-{% code heading="BASE URL" language="text" %}
+{% code heading="BASE URL" defaultLanguage="text" %}
 
 ```text
 https://api.onspring.com

src/docs/version_002/resources/records/get_records_by_app/example.md

@@ -1,15 +1,19 @@
-{% code heading="GET /Records/appId/{appID}" language="text" %}
+{% code heading="GET /Records/appId/{appID}" defaultLanguage="bash" %}
 
-```curl
+```bash
 curl --location 'https://api.onspring.com/Records/appId/195' \
 --header 'X-ApiKey: 000000ffffff000000ffffff/00000000-ffff-0000-ffff-000000000000'
 ```
 
+```js
+var request = require('request');
+```
+
 {% /code %}
 
-{% code heading="RESPONSE" language="json" %}
+{% code heading="RESPONSE" defaultLanguage="json" %}
 
-```json {% .language-json %}
+```json
 {
   "pageNumber": 1,
   "pageSize": 1,