Syntax highlighting in modal
This commit is contained in:
parent
6a8c1265fa
commit
e9ec83c8e2
@ -1,11 +1,20 @@
|
||||
import type { NextPage } from "next";
|
||||
import { useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import styles from "../styles/ProjectModal.module.css";
|
||||
import type { Project, Diary } from "../lib/content/types";
|
||||
import { useCommands } from "./contexts/CommandInterface";
|
||||
import { generateContent, projectEmpty } from "../lib/content/generate";
|
||||
import { useModalFunctions } from "./contexts/ModalFunctions";
|
||||
|
||||
// Code Highlighting
|
||||
import hljs from "highlight.js";
|
||||
import rust from "highlight.js/lib/languages/rust";
|
||||
import bash from "highlight.js/lib/languages/shell";
|
||||
hljs.registerLanguage("rust", rust);
|
||||
hljs.registerLanguage("bash", bash);
|
||||
hljs.registerLanguage("console", bash);
|
||||
hljs.registerLanguage("shell", bash);
|
||||
|
||||
const ProjectModal: NextPage = () => {
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
const [currentContent, setCurrentContent] = useState<Project | Diary | undefined>(undefined);
|
||||
@ -23,6 +32,10 @@ const ProjectModal: NextPage = () => {
|
||||
updateCmdCallbacks({ setModalVisible: setVisible, setModalContent, setModalHTML: setHTMLContent });
|
||||
updateModalCallbacks({ setVisible, setContent: setModalContent, setHtml: setHTMLContent });
|
||||
|
||||
useEffect(() => {
|
||||
hljs.highlightAll();
|
||||
}, [HTMLContent]);
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
if (!visible) return <></>;
|
||||
|
14
package-lock.json
generated
14
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"dependencies": {
|
||||
"asciidoctor": "^2.2.5",
|
||||
"color": "^4.2.3",
|
||||
"highlight.js": "^11.5.1",
|
||||
"next": "12.1.0",
|
||||
"node-fetch": "^3.2.0",
|
||||
"phosphor-react": "^1.3.1",
|
||||
@ -2001,6 +2002,14 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/highlight.js": {
|
||||
"version": "11.5.1",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.1.tgz",
|
||||
"integrity": "sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==",
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
|
||||
@ -5022,6 +5031,11 @@
|
||||
"has-symbols": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"highlight.js": {
|
||||
"version": "11.5.1",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.1.tgz",
|
||||
"integrity": "sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q=="
|
||||
},
|
||||
"ignore": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
|
||||
|
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"asciidoctor": "^2.2.5",
|
||||
"color": "^4.2.3",
|
||||
"highlight.js": "^11.5.1",
|
||||
"next": "12.1.0",
|
||||
"node-fetch": "^3.2.0",
|
||||
"phosphor-react": "^1.3.1",
|
||||
|
@ -2,6 +2,7 @@
|
||||
font-family: sans-serif;
|
||||
|
||||
@import "./asciidocBootSlate";
|
||||
@import "~highlight.js/styles/github";
|
||||
|
||||
h1 {
|
||||
color: var(--repl-color-link, #2ac02a);
|
||||
|
Loading…
Reference in New Issue
Block a user