markdown parsing improvement
- added code line highlighting - added text highlight effect - added subscript and superscript
This commit is contained in:
parent
efb19658b4
commit
fa16379e6d
9 changed files with 104 additions and 14 deletions
|
@ -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 (
|
||||
|
|
|
@ -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**<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}
|
||||
$$
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
|
|
1
source/types/markdown-it-highlight-lines.d.ts
vendored
Normal file
1
source/types/markdown-it-highlight-lines.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
declare module "markdown-it-highlight-lines"
|
1
source/types/markdown-it-mark.d.ts
vendored
Normal file
1
source/types/markdown-it-mark.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
declare module "markdown-it-mark"
|
1
source/types/markdown-it-sub.d.ts
vendored
Normal file
1
source/types/markdown-it-sub.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
declare module "markdown-it-sub"
|
1
source/types/markdown-it-sup.d.ts
vendored
Normal file
1
source/types/markdown-it-sup.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
declare module "markdown-it-sup"
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue