feat: trying to figure out syntax highlighting

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,