feat: trying to figure out syntax highlighting

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "cSpell.words": ["markdoc", "Onpsring"]
+  "cSpell.words": ["markdoc", "Onpsring", "prismjs"]
 }

package-lock.json

@@ -15,6 +15,7 @@
         "eslint": "8.38.0",
         "eslint-config-next": "13.3.0",
         "next": "13.2.4",
+        "prismjs": "^1.29.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "typescript": "5.0.4"
@@ -22,6 +23,7 @@
       "devDependencies": {
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
+        "@types/prismjs": "^1.26.0",
         "cross-env": "^7.0.3",
         "eslint-plugin-prettier": "^4.2.1",
         "jest": "^29.5.0",
@@ -1889,6 +1891,12 @@
       "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==",
       "dev": true
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+      "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -6495,6 +6503,14 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -9102,6 +9118,12 @@
       "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==",
       "dev": true
     },
+    "@types/prismjs": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+      "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -12436,6 +12458,11 @@
         }
       }
     },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+    },
     "prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "next": "13.2.4",
+    "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.0.4"
@@ -25,6 +26,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@types/prismjs": "^1.26.0",
     "cross-env": "^7.0.3",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^29.5.0",
@@ -32,4 +34,4 @@
     "prettier": "^2.8.7",
     "ts-node": "^10.9.1"
   }
-}
+}

src/app/components/Code.tsx

@@ -1,6 +1,10 @@
 'use client';
 
-import { MouseEvent, useState } from 'react';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-json';
+import 'prismjs/themes/prism.css';
+
+import { MouseEvent, useEffect, useState } from 'react';
 import styles from './Code.module.css';
 
 function CodeCopyButton() {
@@ -70,6 +74,10 @@ export default function Code({
   language: string;
   heading: string;
 }) {
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+
   return (
     <div className={styles.snippetContainer}>
       <div className={styles.snippetHeader}>

src/app/lib/markdoc.ts

@@ -1,9 +1,10 @@
-import Markdoc from '@markdoc/markdoc';
+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 { Doc, DocSection } from './../types/types';
+
 const DOCS_PATH = path.join(process.cwd(), 'src/docs');
 
 function getCopyPath(version: string, doc: Doc): string {
@@ -36,7 +37,6 @@ const markDocConfig = {
   tags: {
     code: {
       render: 'Code',
-      children: ['text'],
       attributes: {
         language: {
           type: 'string',

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

@@ -9,7 +9,7 @@ curl --location 'https://api.onspring.com/Records/appId/195' \
 
 {% code heading="RESPONSE" language="json" %}
 
-```json
+```json {% .language-json %}
 {
   "pageNumber": 1,
   "pageSize": 1,