suyono/blog-ts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: some progress on markdown; cleaning up code using html-react-parser and its dependencies

Browse Source
This commit is contained in:
Suyono
2024-05-11 21:54:16 +10:00
parent a828c62e71
commit 49e9fa8bc6
11 changed files with 251 additions and 635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/mark/page.tsx
View File

@@ -3,11 +3,12 @@ import remarkGfm from 'remark-gfm';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeSanitize from 'rehype-sanitize';
import rehypeHighlight from 'rehype-highlight';
import rehypeHighlight, { Options as RehypeHighlightOptions } from 'rehype-highlight';
import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
import { all } from 'lowlight';
import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
import { MarkPostString } from '@/components/dummyPost';
import {raleway} from "@/app/fonts";
import { raleway, roboto, nunito } from "@/app/fonts";
export default async function Mark() {
let content = await MarkPostString();
@@ -16,16 +17,21 @@ export default async function Mark() {
.use(remarkGfm)
.use(remarkRehype)
.use(rehypeSanitize)
.use(rehypeHighlight)
.use(rehypeHighlight, {
languages: all,
} as RehypeHighlightOptions)
.use(rehypeReact, {
Fragment: Fragment,
jsx: jsx,
jsxs: jsxs,
components: {
h1: props => <h1 className={`${raleway.className} mx-auto w-224 text-4xl`}>{props.children}</h1>,
h2: props => <h2 className={`${raleway.className} mx-auto w-224 text-3xl`}>{props.children}</h2>,
h3: props => <h3 className={`${raleway.className} mx-auto w-224 text-2xl`}>{props.children}</h3>,
h4: props => <h4 className={`${raleway.className} mx-auto w-224 text-xl`}>{props.children}</h4>
h2: props => <h2 className={`${raleway.className} mx-auto mt-6 w-224 text-3xl`}>{props.children}</h2>,
h3: props => <h3 className={`${raleway.className} mx-auto mt-4 w-224 text-2xl`}>{props.children}</h3>,
h4: props => <h4 className={`${raleway.className} mx-auto mt-3 w-224 text-xl`}>{props.children}</h4>,
p: props => <p className={`${nunito.className} mx-auto mt-2 w-224`}>{props.children}</p>,
pre: props => <div className={`w-224 mx-auto mt-2`}><pre>{props.children}</pre></div>,
hr: props => <hr className={`mx-auto w-224 mt-6`} />
}
} as RehypeReactOptions)
.process(content);