185 lines
4 KiB
TypeScript
185 lines
4 KiB
TypeScript
import { marked } from "marked"
|
|
import Image from "next/image"
|
|
import Highlight, { defaultProps, Language } from "prism-react-renderer"
|
|
// // image sizes. DDoS Safe?
|
|
// const imageSizeLink = /^!?\[((?:\[[^\[\]]*\]|\\[\[\]]?|`[^`]*`|[^\[\]\\])*?)\]\(\s*(<(?:\\[<>]?|[^\s<>\\])*>|(?:\\[()]?|\([^\s\x00-\x1f()\\]*\)|[^\s\x00-\x1f()\\])*?(?:\s+=(?:[\w%]+)?x(?:[\w%]+)?)?)(?:\s+("(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)))?\s*\)/;
|
|
// //@ts-ignore
|
|
// Lexer.rules.inline.normal.link = imageSizeLink;
|
|
// //@ts-ignore
|
|
// Lexer.rules.inline.gfm.link = imageSizeLink;
|
|
// //@ts-ignore
|
|
// Lexer.rules.inline.breaks.link = imageSizeLink;
|
|
|
|
//@ts-ignore
|
|
delete defaultProps.theme
|
|
// import linkStyles from '../components/link/link.module.css'
|
|
|
|
const renderer = new marked.Renderer()
|
|
|
|
// @ts-ignore
|
|
// renderer.heading = (text, level, raw, slugger) => {
|
|
// const id = slugger.slug(text)
|
|
// const Component = `h${level}`
|
|
|
|
// return (
|
|
// <Component>
|
|
// <Link href={`#${id}`} id={id}>
|
|
// {text}
|
|
// </Link>
|
|
// </Component>
|
|
// )
|
|
// }
|
|
|
|
// renderer.link = (href, _, text) => {
|
|
// const isHrefLocal = href?.startsWith("/") || href?.startsWith("#")
|
|
// if (isHrefLocal) {
|
|
// return <a href={href || ""}>{text}</a>
|
|
// }
|
|
|
|
// // dirty hack
|
|
// // if text contains elements, render as html
|
|
// return (
|
|
// <a
|
|
// href={href || ""}
|
|
// target="_blank"
|
|
// rel="noopener noreferrer"
|
|
// dangerouslySetInnerHTML={{ __html: convertHtmlEntities(text) }}
|
|
// ></a>
|
|
// )
|
|
// }
|
|
|
|
// @ts-ignore
|
|
renderer.image = function (href, _, text) {
|
|
return <Image loading="lazy" src="${href}" alt="${text}" layout="fill" />
|
|
}
|
|
|
|
// renderer.checkbox = () => ""
|
|
// @ts-ignore
|
|
renderer.listitem = (text, task, checked) => {
|
|
if (task) {
|
|
return (
|
|
<li className="reset">
|
|
<span className="check">
|
|
​
|
|
<input type="checkbox" disabled checked={checked} />
|
|
</span>
|
|
<span>${text}</span>
|
|
</li>
|
|
)
|
|
}
|
|
return <li>{text}</li>
|
|
}
|
|
|
|
// @ts-ignore
|
|
renderer.code = (code: string, language: string) => {
|
|
const component =
|
|
<pre>
|
|
<Code
|
|
language={language}
|
|
// title={title}
|
|
code={code}
|
|
// highlight={highlight}
|
|
/>
|
|
)
|
|
</pre>
|
|
|
|
return component
|
|
}
|
|
|
|
marked.setOptions({
|
|
gfm: true,
|
|
breaks: true,
|
|
headerIds: true,
|
|
renderer
|
|
})
|
|
|
|
const markdown = (markdown: string) => marked(markdown)
|
|
|
|
export default markdown
|
|
|
|
const Code = ({
|
|
code,
|
|
language,
|
|
highlight,
|
|
title,
|
|
...props
|
|
}: {
|
|
code: string
|
|
language: string
|
|
highlight?: string
|
|
title?: string
|
|
}) => {
|
|
if (!language)
|
|
return (
|
|
<>
|
|
<code {...props} dangerouslySetInnerHTML={{ __html: code }} />
|
|
</>
|
|
)
|
|
|
|
const highlightedLines = highlight
|
|
? //@ts-ignore
|
|
highlight.split(",").reduce((lines, h) => {
|
|
if (h.includes("-")) {
|
|
// Expand ranges like 3-5 into [3,4,5]
|
|
const [start, end] = h.split("-").map(Number)
|
|
const x = Array(end - start + 1)
|
|
.fill(undefined)
|
|
.map((_, i) => i + start)
|
|
return [...lines, ...x]
|
|
}
|
|
|
|
return [...lines, Number(h)]
|
|
}, [])
|
|
: ""
|
|
|
|
// https://mdxjs.com/guides/syntax-harkedighlighting#all-together
|
|
return (
|
|
<>
|
|
<Highlight
|
|
{...defaultProps}
|
|
code={code.trim()}
|
|
language={language as Language}
|
|
>
|
|
{({
|
|
className,
|
|
style,
|
|
tokens,
|
|
getLineProps,
|
|
getTokenProps
|
|
}: {
|
|
className: string
|
|
style: any
|
|
tokens: any
|
|
getLineProps: any
|
|
getTokenProps: any
|
|
}) => (
|
|
<code className={className} style={{ ...style }}>
|
|
{tokens.map((line: string[], i: number) => (
|
|
<div
|
|
key={i}
|
|
{...getLineProps({ line, key: i })}
|
|
style={
|
|
//@ts-ignore
|
|
highlightedLines.includes((i + 1).toString())
|
|
? {
|
|
background: "var(--highlight)",
|
|
margin: "0 -1rem",
|
|
padding: "0 1rem"
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{line.map((token: string, key: number) => (
|
|
<span key={key} {...getTokenProps({ token, key })} />
|
|
))}
|
|
</div>
|
|
))}
|
|
</code>
|
|
)}
|
|
</Highlight>
|
|
<>
|
|
<code {...props} dangerouslySetInnerHTML={{ __html: code }} />
|
|
</>
|
|
</>
|
|
)
|
|
}
|