diff --git a/source/generate/parseMarkdown.ts b/source/generate/parseMarkdown.ts index 8446051..91e9b7b 100644 --- a/source/generate/parseMarkdown.ts +++ b/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 hljs from "highlight.js" // code block highlighting +import markdownItTaskCheckbox from "markdown-it-task-checkbox" // a TODO list checkboxes +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 ( diff --git a/source/markdown/posts/test post.md b/source/markdown/posts/test post.md index c21be28..f05ed13 100644 --- a/source/markdown/posts/test post.md +++ b/source/markdown/posts/test post.md @@ -54,9 +54,22 @@ A post have title, post date, tags, and content. Here's a `code`. -```python -if __name__ == "__main__": - print("And here's a language-specific code block") # with comments! +```python {10,15,17-18} +print("And here's a language-specific code block") +# 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**
_italic_
~~strikethrough~~
-underlined +underlined
+==marked==
+this is a ^superscript^ (soon^TM^)
+and this is a ~subscript~ (H~2~O) ## Styling @@ -76,10 +92,26 @@ _italic_
centered paragraph

+

+ RED +

+ ## Key Do you remember the first time you pressed Ctrl+C 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} +$$ diff --git a/source/package.json b/source/package.json index 362c233..0ff867e 100644 --- a/source/package.json +++ b/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", diff --git a/source/src/styles/globalStyle.tsx b/source/src/styles/globalStyle.tsx index a2c0812..72f04b3 100644 --- a/source/src/styles/globalStyle.tsx +++ b/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; diff --git a/source/types/markdown-it-highlight-lines.d.ts b/source/types/markdown-it-highlight-lines.d.ts new file mode 100644 index 0000000..38d5f6d --- /dev/null +++ b/source/types/markdown-it-highlight-lines.d.ts @@ -0,0 +1 @@ +declare module "markdown-it-highlight-lines" diff --git a/source/types/markdown-it-mark.d.ts b/source/types/markdown-it-mark.d.ts new file mode 100644 index 0000000..8fd714f --- /dev/null +++ b/source/types/markdown-it-mark.d.ts @@ -0,0 +1 @@ +declare module "markdown-it-mark" diff --git a/source/types/markdown-it-sub.d.ts b/source/types/markdown-it-sub.d.ts new file mode 100644 index 0000000..1ab6246 --- /dev/null +++ b/source/types/markdown-it-sub.d.ts @@ -0,0 +1 @@ +declare module "markdown-it-sub" diff --git a/source/types/markdown-it-sup.d.ts b/source/types/markdown-it-sup.d.ts new file mode 100644 index 0000000..1c73173 --- /dev/null +++ b/source/types/markdown-it-sup.d.ts @@ -0,0 +1 @@ +declare module "markdown-it-sup" diff --git a/source/yarn.lock b/source/yarn.lock index fd9e86a..d830723 100644 --- a/source/yarn.lock +++ b/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"