From c87b2a39e856070e8cfae2e806dbcb881775b76f Mon Sep 17 00:00:00 2001 From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:00:54 -0500 Subject: [PATCH] feat: trying to figure out syntax highlighting --- .vscode/settings.json | 2 +- package-lock.json | 27 +++++++++++++++++++ package.json | 4 ++- src/app/components/Code.tsx | 10 ++++++- src/app/lib/markdoc.ts | 4 +-- .../records/get_records_by_app/example.md | 2 +- 6 files changed, 43 insertions(+), 6 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 490a9aa..0a60da2 100644 --- a/.vscode/settings.json +++ b/.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"] } diff --git a/package-lock.json b/package-lock.json index 9ae7062..3c46ec5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 0c66503..0293bea 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/app/components/Code.tsx b/src/app/components/Code.tsx index 6687fd5..d56aa5d 100644 --- a/src/app/components/Code.tsx +++ b/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 (
diff --git a/src/app/lib/markdoc.ts b/src/app/lib/markdoc.ts index 263b898..57eb9ab 100644 --- a/src/app/lib/markdoc.ts +++ b/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', diff --git a/src/docs/version_002/resources/records/get_records_by_app/example.md b/src/docs/version_002/resources/records/get_records_by_app/example.md index c6418de..21e3a71 100644 --- a/src/docs/version_002/resources/records/get_records_by_app/example.md +++ b/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,