+
{@html doc.content}
diff --git a/src/lib/styles/markdown.css b/src/lib/styles/markdown.css
index 6dafb0e..c8d0cc9 100644
--- a/src/lib/styles/markdown.css
+++ b/src/lib/styles/markdown.css
@@ -46,10 +46,8 @@
padding: 0.5em;
}
- blockquote {
- padding-left: 1em;
- font-style: italic;
- border-left: solid 1px #fa6432;
+ blockquote:not(.markdown-alert) {
+ @apply border-l-2 border-l-muted-foreground my-4 pl-4 italic;
}
table {
@@ -115,7 +113,7 @@
@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
}
.markdown-alert-title {
- @apply flex items-center font-medium text-xl font-sans;
+ @apply font-medium text-xl font-sans;
}
.markdown-alert-caution > .markdown-alert-title {
@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
@@ -147,4 +145,19 @@
.markdown-alert-warning > .markdown-alert-title {
@apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
}
+ .markdown-alert .markdown-alert-title .octicon {
+ margin-right: 0.5rem;
+ overflow: visible !important;
+
+ -webkit-mask: var(--oct-icon) no-repeat;
+ mask: var(--oct-icon) no-repeat;
+ -webkit-mask-size: 100% 100%;
+ mask-size: 100% 100%;
+ background-color: currentColor;
+ color: inherit;
+ display: inline-block;
+ vertical-align: -0.125em;
+ width: 1em;
+ height: 1em;
+ }
}
diff --git a/src/routes/blog/[year]/[slug]/+page.svelte b/src/routes/blog/[year]/[slug]/+page.svelte
index edaa0b0..8361d35 100644
--- a/src/routes/blog/[year]/[slug]/+page.svelte
+++ b/src/routes/blog/[year]/[slug]/+page.svelte
@@ -4,7 +4,6 @@
import Article from '$lib/components/Blog/Article.svelte';
import { toc, createTocStore } from '@svelte-put/toc';
import StickyToc from '$lib/components/Toc/StickyToc.svelte';
-
const tocStore = createTocStore();
export let data: PageData;
@@ -14,7 +13,7 @@
primaryTags: ['Computer Science', 'Mathematics'],
secondaryTags: ['Calculus', 'Taylor Series'],
time: Date.now() / 1000,
- content: data.markdown,
+ content: data.content!,
blurb: 'A short and succinct, yet descriptive blurb about the post.',
description:
'An insightful and longer description of the post. This should be a bit more detailed than the blurb. It should give the reader a good idea of what the post is about.'
diff --git a/src/routes/blog/[year]/[slug]/+page.ts b/src/routes/blog/[year]/[slug]/+page.ts
index b1329b1..5a33efc 100644
--- a/src/routes/blog/[year]/[slug]/+page.ts
+++ b/src/routes/blog/[year]/[slug]/+page.ts
@@ -1,24 +1,34 @@
import type { PageLoad } from './$types.js';
-import { marked } from 'marked';
-import markedKatex from 'marked-katex-extension';
-import markedAlert from 'marked-alert';
+import { unified } from 'unified';
+import rehypeKatex from 'rehype-katex';
+import rehypeStringify from 'rehype-stringify';
+import remarkMath from 'remark-math';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import remarkGfm from 'remark-gfm';
+import remarkGhAlerts from 'remark-gh-alerts';
export const prerender = true;
-const options = {
- throwOnError: false
-};
-
-marked.use(markedKatex(options));
-marked.use(markedAlert());
-
export const load: PageLoad = async ({ fetch }) => {
try {
const data = await fetch('/test.md');
- const markdown = await marked.parse(await data.text());
+ const content = String(
+ await unified()
+ .use(remarkParse)
+ .use(remarkGfm)
+ .use(remarkGhAlerts)
+ .use(remarkMath)
+ .use(remarkRehype)
+ .use(rehypeKatex)
+ .use(rehypeStringify)
+ .process(await data.text())
+ );
+
+ if (typeof content === 'undefined') throw new Error('No content');
return {
- markdown
+ content
};
} catch (e) {
return {