From 0a9332aac09ec1b441d7fe4edb7606ee02d2894c Mon Sep 17 00:00:00 2001 From: el Date: Mon, 26 Jun 2023 14:46:09 +0300 Subject: [PATCH] adding syntax highlighter --- package-lock.json | 36 ++++++++++++++++++++++++++++++++++++ package.json | 1 + src/app/codeedit/page.js | 13 ++++++++----- 3 files changed, 45 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 374cf37c..7b6ffb77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "web", "version": "0.1.0", "dependencies": { + "@monaco-editor/react": "^4.5.1", "autoprefixer": "10.4.14", "codemirror": "^6.0.1", "file-saver": "^2.0.5", @@ -389,6 +390,30 @@ "@lezer/common": "^1.0.0" } }, + "node_modules/@monaco-editor/loader": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz", + "integrity": "sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==", + "dependencies": { + "state-local": "^1.0.6" + }, + "peerDependencies": { + "monaco-editor": ">= 0.21.0 < 1" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.1.tgz", + "integrity": "sha512-NNDFdP+2HojtNhCkRfE6/D6ro6pBNihaOzMbGK84lNWzRu+CfBjwzGt4jmnqimLuqp5yE5viHS2vi+QOAnD5FQ==", + "dependencies": { + "@monaco-editor/loader": "^1.3.3" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@next/env": { "version": "13.4.6", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.6.tgz", @@ -1450,6 +1475,12 @@ "node": "*" } }, + "node_modules/monaco-editor": { + "version": "0.39.0", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.39.0.tgz", + "integrity": "sha512-zhbZ2Nx93tLR8aJmL2zI1mhJpsl87HMebNBM6R8z4pLfs8pj604pIVIVwyF1TivcfNtIPpMXL+nb3DsBmE/x6Q==", + "peer": true + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", @@ -2110,6 +2141,11 @@ "node": ">=0.10.0" } }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==" + }, "node_modules/streamsearch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", diff --git a/package.json b/package.json index 0fbf612b..4d727af3 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@monaco-editor/react": "^4.5.1", "autoprefixer": "10.4.14", "codemirror": "^6.0.1", "file-saver": "^2.0.5", diff --git a/src/app/codeedit/page.js b/src/app/codeedit/page.js index 3babb3b8..b029d5ec 100644 --- a/src/app/codeedit/page.js +++ b/src/app/codeedit/page.js @@ -6,7 +6,7 @@ import { saveAs } from 'file-saver'; import Search from '../assets/search'; import { AiFillHtml5, } from 'react-icons/ai' import { FaCss3, FaJs } from 'react-icons/fa' - +import { Editor } from '@monaco-editor/react'; export default function Nav() { const [htmlCode, setHtmlCode] = useState(` @@ -111,7 +111,7 @@ export default function Nav() { }; useEffect(() => { document.querySelectorAll('textarea').forEach((textarea) => { - textarea.addEventListener('keydown', function(e) { + textarea.addEventListener('keydown', function (e) { if (e.key === 'Tab') { e.preventDefault(); @@ -161,17 +161,20 @@ export default function Nav() { )} {showIndexHtmlSection && (
- + '} `} /> + {/* */}
)} {showStyleCssSection && (
- + + {/* */}
)} {showScriptJsSection && (
- + + {/* */}
)} {!showViewSection && !showIndexHtmlSection && !showStyleCssSection && !showScriptJsSection && (