Skip to content

Commit

Permalink
update deps
Browse files Browse the repository at this point in the history
  • Loading branch information
@slmjkdbtl
slmjkdbtl committed Oct 4, 2023
1 parent f52a576 commit e6c7d20
Show file tree
Hide file tree
Showing 3 changed files with 1,251 additions and 1,049 deletions.
295 changes: 149 additions & 146 deletions site/comps/Markdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from "react"
import { marked } from "marked"
import { Marked } from "marked"
import { markedHighlight } from "marked-highlight"
import markedBaseUrl from "marked-base-url"
import hljs from "highlight.js/lib/core"
import javascript from "highlight.js/lib/languages/javascript"
import typescript from "highlight.js/lib/languages/typescript"
Expand All @@ -15,14 +16,6 @@ hljs.registerLanguage("xml", xml)
hljs.registerLanguage("shell", shell)
hljs.registerLanguage("bash", bash)

marked.use(markedHighlight({
highlight(code, lang) {
const language = hljs.getLanguage(lang) ? lang : "plaintext"
return hljs.highlight(code, { language }).value
},
}))


interface MarkdownProps {
src: string,
baseUrl?: string,
Expand All @@ -34,150 +27,160 @@ const Markdown: React.FC<MarkdownProps & ViewProps> = ({
baseUrl,
dim,
...args
}) => (
<View
stretchX
gap={2}
}) => {
const [marked, _] = React.useState(() => {
const marked = new Marked()
if (baseUrl) {
marked.use(markedBaseUrl.baseUrl(baseUrl))
}
marked.use(markedHighlight({
highlight(code, lang) {
const language = hljs.getLanguage(lang) ? lang : "plaintext"
return hljs.highlight(code, { language }).value
},
}))
return marked
})
return (
<View
stretchX
gap={2}
// @ts-ignore
dangerouslySetInnerHTML={{
__html: marked(src, {
baseUrl: baseUrl,
mangle: false,
headerIds: false,
}),
}}
css={{
"*": {
maxWidth: "100%",
},
"h1": {
fontSize: 48,
},
"h2": {
fontSize: 36,
},
"h3,h4,h5,h6": {
fontSize: 24,
},
"h1,h2,h3,h4,h5,h6,p": {
color: `var(--color-fg${dim ? 2 : 1})`,
},
"p": {
fontSize: "var(--text-normal)",
lineHeight: 1.6,
userSelect: "text",
},
"ul,ol": {
color: `var(--color-fg${dim ? 2 : 1})`,
lineHeight: 2,
marginLeft: 24,
},
"a": {
color: "var(--color-highlight)",
},
"a:visited": {
color: "var(--color-highlight)",
},
"img": {
borderRadius: 8,
},
"video": {
borderRadius: 8,
},
"pre": {
width: "100%",
background: "var(--color-bg2)",
borderRadius: 8,
boxShadow: "0 0 0 2px var(--color-outline)",
display: "flex",
userSelect: "text",
"code": {
padding: 16,
dangerouslySetInnerHTML={{
__html: marked.parse(src),
}}
css={{
"*": {
maxWidth: "100%",
},
"h1": {
fontSize: 48,
},
"h2": {
fontSize: 36,
},
"h3,h4,h5,h6": {
fontSize: 24,
},
"h1,h2,h3,h4,h5,h6,p": {
color: `var(--color-fg${dim ? 2 : 1})`,
},
"p": {
fontSize: "var(--text-normal)",
lineHeight: 1.6,
userSelect: "text",
},
"ul,ol": {
color: `var(--color-fg${dim ? 2 : 1})`,
lineHeight: 2,
marginLeft: 24,
},
"a": {
color: "var(--color-highlight)",
},
"a:visited": {
color: "var(--color-highlight)",
},
"img": {
borderRadius: 8,
},
"video": {
borderRadius: 8,
},
"pre": {
width: "100%",
overflowY: "auto",
background: "var(--color-bg2)",
borderRadius: 8,
boxShadow: "0 0 0 2px var(--color-outline)",
display: "flex",
userSelect: "text",
"code": {
padding: 16,
width: "100%",
overflowY: "auto",
},
},
"code": {
userSelect: "text",
fontFamily: "IBM Plex Mono",
color: "var(--color-fg2)",
background: "var(--color-bg2)",
borderRadius: 8,
padding: "4px 8px",
},
"p > code": {
padding: "2px 6px",
borderRadius: 8,
background: "var(--color-bg2)",
},
"blockquote *": {
fontStyle: "italic",
color: "var(--color-fg3)",
},
},
"code": {
userSelect: "text",
fontFamily: "IBM Plex Mono",
color: "var(--color-fg2)",
background: "var(--color-bg2)",
borderRadius: 8,
padding: "4px 8px",
},
"p > code": {
padding: "2px 6px",
borderRadius: 8,
background: "var(--color-bg2)",
},
"blockquote *": {
fontStyle: "italic",
color: "var(--color-fg3)",
},
// dim
[[
".hljs-comment",
".hljs-quote",
].join(",")]: {
color: "var(--color-fg4)",
},
[[
".hljs-comment",
".hljs-quote",
].join(",")]: {
color: "var(--color-fg4)",
},
// red
[[
".hljs-variable",
".hljs-template-variable",
".hljs-tag",
".hljs-name",
".hljs-selector-id",
".hljs-selector-class",
".hljs-regexp",
".hljs-link",
".hljs-meta",
].join(",")]: {
color: "#ef6155",
},
[[
".hljs-variable",
".hljs-template-variable",
".hljs-tag",
".hljs-name",
".hljs-selector-id",
".hljs-selector-class",
".hljs-regexp",
".hljs-link",
".hljs-meta",
].join(",")]: {
color: "#ef6155",
},
// orange
[[
".hljs-number",
".hljs-built_in",
".hljs-builtin-name",
".hljs-literal",
".hljs-type",
".hljs-params",
".hljs-deletion",
].join(",")]: {
color: "#f99b15",
},
[[
".hljs-number",
".hljs-built_in",
".hljs-builtin-name",
".hljs-literal",
".hljs-type",
".hljs-params",
".hljs-deletion",
].join(",")]: {
color: "#f99b15",
},
// yellow
[[
".hljs-section",
".hljs-attribute",
].join(",")]: {
color: "#fec418",
},
[[
".hljs-string",
".hljs-symbol",
".hljs-bullet",
".hljs-addition",
].join(",")]: {
color: "#48b685",
},
[[
".hljs-section",
".hljs-attribute",
].join(",")]: {
color: "#fec418",
},
[[
".hljs-string",
".hljs-symbol",
".hljs-bullet",
".hljs-addition",
].join(",")]: {
color: "#48b685",
},
// purple
[[
".hljs-keyword",
".hljs-selector-tag",
].join(",")]: {
color: "#815ba4",
},
".hljs-emphasis": {
fontStyle: "italic",
},
".hljs-strong": {
fontWeight: "bold",
},
}}
{...args}
/>
)
[[
".hljs-keyword",
".hljs-selector-tag",
].join(",")]: {
color: "#815ba4",
},
".hljs-emphasis": {
fontStyle: "italic",
},
".hljs-strong": {
fontWeight: "bold",
},
}}
{...args}
/>)
}

export default Markdown
Loading

0 comments on commit e6c7d20

Please sign in to comment.