diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index 5ea684e03..ed63cce3a 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -21,7 +21,7 @@ import type {
AllowedLinkTypes,
RoadmapContentDocument,
} from '../CustomRoadmap/CustomRoadmap';
-import { markdownToHtml } from '../../lib/markdown';
+import { markdownToHtml, sanitizeMarkdown } from '../../lib/markdown';
import { cn } from '../../lib/classname';
import { Ban, FileText, X } from 'lucide-react';
import { getUrlParams } from '../../lib/browser';
@@ -173,10 +173,11 @@ export function TopicDetail(props: TopicDetailProps) {
} else {
setLinks((response as RoadmapContentDocument)?.links || []);
setTopicTitle((response as RoadmapContentDocument)?.title || '');
- topicHtml = markdownToHtml(
- (response as RoadmapContentDocument)?.description || '',
- false,
+
+ const sanitizedMarkdown = sanitizeMarkdown(
+ (response as RoadmapContentDocument).description || '',
);
+ topicHtml = markdownToHtml(sanitizedMarkdown, false);
}
setIsLoading(false);
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index a88af9c8c..e0a7b2905 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -2,7 +2,10 @@
import MarkdownIt from 'markdown-it';
export function markdownToHtml(markdown: string, isInline = true): string {
- const md = new MarkdownIt();
+ const md = new MarkdownIt({
+ html: true,
+ linkify: true,
+ });
if (isInline) {
return md.renderInline(markdown);
@@ -10,3 +13,10 @@ export function markdownToHtml(markdown: string, isInline = true): string {
return md.render(markdown);
}
}
+
+// This is a workaround for the issue with tiptap-markdown extension
+// It doesn't support links with escaped brackets like this:
+// \\[link\\](https://example.com) -> [link](https://example.com)
+export function sanitizeMarkdown(markdown: string) {
+ return markdown.replace(/\\\[([^\\]+)\\\]\(([^\\]+)\)/g, '[$1]($2)');
+}
diff --git a/src/pages/guides/[guideId].astro b/src/pages/guides/[guideId].astro
index ea86a6bc0..c89425391 100644
--- a/src/pages/guides/[guideId].astro
+++ b/src/pages/guides/[guideId].astro
@@ -2,7 +2,7 @@
import GuideHeader from '../../components/GuideHeader.astro';
import MarkdownFile from '../../components/MarkdownFile.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
-import { getAllGuides,GuideFileType } from '../../lib/guide';
+import { getAllGuides, type GuideFileType } from '../../lib/guide';
export interface Props {
guide: GuideFileType;
@@ -30,7 +30,7 @@ const { frontmatter: guideData } = guide;
>