markdown parsing improvement

- added code line highlighting
- added text highlight effect
- added subscript and superscript

source/generate/parseMarkdown.ts

@@ -1,9 +1,16 @@
 import markdownIt from "markdown-it" // rendering markdown
 import markdownItTexMath from "markdown-it-texmath" // rendering mathematical expression
 import markdownItAnchor from "markdown-it-anchor" // markdown anchor
-import markdownItTaskCheckbox from "markdown-it-task-checkbox"
+import markdownItTaskCheckbox from "markdown-it-task-checkbox" // a TODO list checkboxes
-import hljs from "highlight.js" // code block highlighting
+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 katex from "katex" // rendering mathematical expression
+import "katex/contrib/mhchem" // chemical formula
+
 import { nthIndex } from "./util"
 
 const md = markdownIt({
@@ -20,13 +27,16 @@ const md = markdownIt({
 	},
 	html: true,
 })
-	.use(markdownItTaskCheckbox)
 	.use(markdownItTexMath, {
 		engine: katex,
 		delimiters: "dollars",
-		katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
 	})
+	.use(markdownItTaskCheckbox)
 	.use(markdownItAnchor, {})
+	.use(markDownItMark)
+	.use(markdownItSub)
+	.use(markdownItSup)
+	.use(highlightLines)
 
 export default function parseMarkdown(markdownRaw: string): string {
 	return (

source/markdown/posts/test post.md

@@ -54,9 +54,22 @@ A post have title, post date, tags, and content.
 
 Here's a `code`.
 
-```python
+```python {10,15,17-18}
-if __name__ == "__main__":
+print("And here's a language-specific code block")
-	print("And here's a language-specific code block") # with comments!
+# with comments and line highlighting!
+
+x = 256
+y = 256
+
+print(x is y) # True. id(x) is indeed equal to id(y)
+
+z = 257
+w = 257
+
+print(z is w) # False. id(z) is not equal to id(w)
+
+# Apparently python does this to save memory.
+# All integers between -5 and 256 share the same id.
 ```
 
 ## Etc
@@ -68,7 +81,10 @@ if __name__ == "__main__":
 **bold**<br />
 _italic_<br />
 ~~strikethrough~~<br />
-<u>underlined</u>
+<u>underlined</u><br />
+==marked==<br />
+this is a ^superscript^ (soon^TM^)<br />
+and this is a ~subscript~ (H~2~O)
 
 ## Styling
 
@@ -76,10 +92,26 @@ _italic_<br />
 	centered paragraph
 </p>
 
+<p style="color:rgb(255,0,0)">
+	RED
+</p>
+
 ## Key
 
 Do you remember the first time you pressed <kbd>Ctrl</kbd>+<kbd>C</kbd> in terminal?
 
-## Mathematical expression
+## TeX
+
+[$KaTeX$](https://katex.org/docs/supported.html) syntax is supported.
+
+using [mhchem](https://mhchem.github.io/MathJax-mhchem) for chemical formula.
+
+### Inline
 
 $e=mc^2$ is actually $e^2=(mc^2)^2 + (pc)^2$.
+
+### Block
+
+$$
+	\ce{6 CO2 + 6 H2O <=>[{photosynthesis}][{respiration}] C6H12O6 + 6 O2}
+$$

source/package.json

@@ -31,6 +31,10 @@
 		"markdown-it": "^12.3.0",
 		"markdown-it-anchor": "^8.4.1",
 		"markdown-it-attrs": "^4.1.0",
+		"markdown-it-highlight-lines": "^1.0.2",
+		"markdown-it-mark": "^3.0.1",
+		"markdown-it-sub": "^1.0.0",
+		"markdown-it-sup": "^1.0.0",
 		"markdown-it-task-checkbox": "^1.0.6",
 		"markdown-it-texmath": "^0.9.6",
 		"markdown-toc": "^1.2.0",

source/src/styles/globalStyle.tsx

@@ -71,11 +71,16 @@ const codeCSS = css`
 		display: block;
 		word-wrap: break-word;
 		page-break-inside: avoid;
-
-		/* improve code readability */
-
-		font-size: 1.08rem;
 		line-height: 1.6;
+		border-radius: 0.5rem;
+	}
+
+	.highlighted-line {
+		background-color: #14161a;
+		display: block;
+		width: 100%;
+		margin: 0 -1rem;
+		padding: 0 1rem;
 	}
 `
 
@@ -143,7 +148,6 @@ const blockquoteCSS = css`
 				light: "rgba(0, 0, 0, 5%)",
 				dark: "rgba(255, 255, 255, 7%)",
 			})};
-
 		border-left: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
 				light: "0.4rem solid rgba(0, 0, 0, 10%)",
@@ -172,6 +176,21 @@ const headerCSS = css`
 	}
 `
 
+const markCSS = css`
+	mark {
+		background-color: ${(props) =>
+			theming.theme(props.theme.currentTheme, {
+				light: "rgba(255, 255, 0, 75%)",
+				dark: "rgba(255, 255, 0, 50%)",
+			})};
+		color: ${(props) =>
+			theming.theme(props.theme.currentTheme, {
+				light: "black",
+				dark: "white",
+			})};
+	}
+`
+
 const globalStyle = css`
 	${scrollbarCSS}
 	${codeCSS}
@@ -179,6 +198,7 @@ const globalStyle = css`
 	${tableCSS}
 	${blockquoteCSS}
 	${headerCSS}
+	${markCSS}
 
 	body {
 		overflow-x: hidden;

source/types/markdown-it-highlight-lines.d.ts

@@ -0,0 +1 @@
+declare module "markdown-it-highlight-lines"

source/types/markdown-it-mark.d.ts

@@ -0,0 +1 @@
+declare module "markdown-it-mark"

source/types/markdown-it-sub.d.ts

@@ -0,0 +1 @@
+declare module "markdown-it-sub"

source/types/markdown-it-sup.d.ts

@@ -0,0 +1 @@
+declare module "markdown-it-sup"

source/yarn.lock

@@ -8011,6 +8011,26 @@ markdown-it-attrs@^4.1.0:
   resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.1.0.tgz#e27f023cd8731b15b4a5e971d51e6f45b3b947bc"
   integrity sha512-xd1SuNQPArGYl3SN1bsOHRnmMenkqeLDbTR0udeyGMSFBnaOtxP4yz1SEKrjsV/XYFygFAeKFHgbbj6AwxbTfA==
 
+markdown-it-highlight-lines@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-highlight-lines/-/markdown-it-highlight-lines-1.0.2.tgz#33ecf51cd9d9e741cd86f583cb95b67de81fc9c7"
+  integrity sha512-9Pyt/B+Ca3QBSXDS/znmojy/k6HDe8FJlJwIj/BKgvxE3MQWK9GHQCJJT5Lb1er23svZT99kJ/YRhLpDK+5GUQ==
+
+markdown-it-mark@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz#51257db58787d78aaf46dc13418d99a9f3f0ebd3"
+  integrity sha512-HyxjAu6BRsdt6Xcv6TKVQnkz/E70TdGXEFHRYBGLncRE9lBFwDNLVtFojKxjJWgJ+5XxUwLaHXy+2sGBbDn+4A==
+
+markdown-it-sub@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-sub/-/markdown-it-sub-1.0.0.tgz#375fd6026eae7ddcb012497f6411195ea1e3afe8"
+  integrity sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g=
+
+markdown-it-sup@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz#cb9c9ff91a5255ac08f3fd3d63286e15df0a1fc3"
+  integrity sha1-y5yf+RpSVawI8/09YyhuFd8KH8M=
+
 markdown-it-task-checkbox@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/markdown-it-task-checkbox/-/markdown-it-task-checkbox-1.0.6.tgz#9ebd7b6382e99162264605bc580f2ac118be4242"