renttrent/peroxy_site
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style changes

Browse Source
This commit is contained in:
Rei
2023-02-15 16:43:14 +01:00
parent e78bc12c49
commit 46097b8390
3 changed files with 2027 additions and 1968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/StyledMarkdown.tsx
View File

@@ -17,8 +17,8 @@ import smartypants from "remark-smartypants";
import rehypeRaw from "rehype-raw";
import emoji from "remark-emoji";
import oembed from "@agentofuser/remark-oembed";
import remarkDirective from 'remark-directive'
import remarkDirectiveRehype from 'remark-directive-rehype'
import remarkDirective from "remark-directive";
import remarkDirectiveRehype from "remark-directive-rehype";
import { YouTubeVideo } from "./Youtube";
import { ImageSlide } from "./ImageSlide";
//import rehypeSanitize from "rehype-sanitize";
@@ -30,7 +30,6 @@ SyntaxHighlighter.registerLanguage("bash", bash);
SyntaxHighlighter.registerLanguage("markdown", markdown);
SyntaxHighlighter.registerLanguage("json", json);
export const StyledMarkdown = ({ html }: { html: string }) => {
const MarkdownComponents: Components = {
h1: (props: any) => {
@@ -110,11 +109,9 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
);
},
code({ node, inline, className, ...props }: any) {
const match = /language-(\w+)/.exec(className || "");
const hasMeta = node?.data?.meta;
const applyHighlights: object = (applyHighlights: number) => {
if (hasMeta) {
const RE = /{([\d,-]+)}/;
@@ -154,7 +151,6 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
return "Code";
};
return match ? (
<div>
<div className="w-full flex flex-row items-center gap-4">
@@ -185,18 +181,18 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
},
//custom directives
//@ts-ignore
'yt': YouTubeVideo,
'img-slide': ImageSlide,
yt: YouTubeVideo,
"img-slide": ImageSlide,
};
return (
<div
className="
prose
prose-code:font-mono prose-code:text-gray-100 prose-code:bg-gray-700 prose-code:p-1 prose-code:m-1 prose-code:rounded-md
prose-code:font-mono prose-code:text-gray-100 prose-code:bg-black/20 prose-code:p-1 prose-code:m-1 prose-code:rounded-md
prose-headings:text-gray-800 dark:prose-headings:text-gray-100 prose-p:text-gray-600 dark:prose-p:text-gray-300
prose-img:w-full prose-img:h-auto prose-img:object-cover
prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-td:text-gray-600 dark:prose-td:text-gray-400
prose-li:text-gray-600 dark:prose-li:text-gray-200 prose-td:text-gray-600 dark:prose-td:text-gray-300
prose-a:text-primary prose-strong:text-gray-900 dark:prose-strong:text-gray-50
dark:prose-hr:bg-gray-200 prose-hr:bg-gray-400
"
@@ -204,7 +200,15 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
<ReactMarkdown
components={MarkdownComponents}
rehypePlugins={[rehypeRaw]}
remarkPlugins={[remarkDirective, remarkDirectiveRehype, oembed, remarkGfm, smartypants, emoji, remarkTypograf]}
remarkPlugins={[
remarkDirective,
remarkDirectiveRehype,
oembed,
remarkGfm,
smartypants,
emoji,
remarkTypograf,
]}
children={html}
/>
</div>