table of contents update

- added "s" to table on contents
- fixed broken white-link css
- added toc link to headers

source/generate/parseMarkdown.ts

@@ -6,8 +6,8 @@ import markDownItMark from "markdown-it-mark" // text highlighting
 import markdownItSub from "markdown-it-sub" // markdown subscript
 import markdownItSup from "markdown-it-sup" // markdown superscript
 import highlightLines from "markdown-it-highlight-lines" // highlighting specific lines in code blocks
-import hljs from "highlight.js" // code block syntax highlighting
 
+import hljs from "highlight.js" // code block syntax highlighting
 import katex from "katex" // rendering mathematical expression
 import "katex/contrib/mhchem" // chemical formula
 
@@ -31,8 +31,12 @@ const md = markdownIt({
 		engine: katex,
 		delimiters: "dollars",
 	})
+	.use(markdownItAnchor, {
+		permalink: true,
+		permalinkBefore: true,
+		permalinkSymbol: "#",
+	})
 	.use(markdownItTaskCheckbox)
-	.use(markdownItAnchor, {})
 	.use(markDownItMark)
 	.use(markdownItSub)
 	.use(markdownItSup)

source/src/App.tsx

@@ -19,10 +19,6 @@ import NotFound from "./pages/NotFound"
 import theming from "./styles/theming"
 import GlobalStyle from "./styles/globalStyle"
 
-// Theme that will be used throughout the website
-// wrapping it using css because prettier extension does not work well with styled-components
-// https://github.com/styled-components/vscode-styled-components/issues/175
-
 const IENotSupported = styled.p`
 	margin: auto;
 	font-size: 2rem;

source/src/pages/Page/Toc.tsx

@@ -45,16 +45,16 @@ const Toc = (props: { fetchedPage: FetchedPage }) => {
 					setIsTocOpened((prev) => !prev)
 				}}
 			>
-				<strong>Table of Content </strong>
-				{isTocOpened ? (
-					<FontAwesomeIcon icon={faCaretUp} />
-				) : (
-					<FontAwesomeIcon icon={faCaretDown} />
-				)}
+				<strong>
+					Table of Contents{" "}
+					<FontAwesomeIcon
+						icon={isTocOpened ? faCaretUp : faCaretDown}
+					/>
+				</strong>
 			</StyledTocToggleButton>
 			<StyledCollapseContainer>
 				<Collapse isOpened={isTocOpened}>
-					<div className="white-link">{props.fetchedPage.toc}</div>
+					<div>{props.fetchedPage.toc}</div>
 				</Collapse>
 			</StyledCollapseContainer>
 			<hr />

source/src/pages/Page/index.tsx

@@ -199,7 +199,6 @@ const Page = () => {
 
 				{/* page content */}
 				<div
-					className="white-link"
 					dangerouslySetInnerHTML={{
 						__html: fetchedPage.content,
 					}}

source/src/styles/globalStyle.tsx

@@ -194,6 +194,9 @@ const markCSS = css`
 	}
 `
 
+// Theme that will be used throughout the website
+// wrapping it using css because prettier extension does not work well with styled-components
+// https://github.com/styled-components/vscode-styled-components/issues/175
 const globalStyle = css`
 	${scrollbarCSS}
 	${codeCSS}
@@ -232,6 +235,15 @@ const globalStyle = css`
 		text-rendering: optimizeLegibility;
 	}
 
+	a {
+		text-decoration: none;
+		color: ${theming.color.linkColor};
+
+		&:visited {
+			color: ${theming.color.linkColor};
+		}
+	}
+
 	* {
 		transition: color 0.1s linear;
 	}