c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Syntax highlighting in modal

Browse Source
This commit is contained in:
Daniel Kluge
2022-06-13 13:14:00 +02:00
parent 6a8c1265fa
commit e9ec83c8e2
4 changed files with 30 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/ProjectModal.tsx
View File

@ -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 <></>;