Add markdown roadmap support

src/components/MarkdownRoadmap/MarkdownRoadmap.astro

@@ -0,0 +1,9 @@
+---
+import "./Prism.css";
+---
+
+<div class="bg-gray-50 py-4 sm:py-10">
+  <div class="container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5 prose-ul:mt-0">
+    <slot />
+  </div>
+</div>

src/components/MarkdownRoadmap/Prism.css

@@ -0,0 +1,208 @@
+div[class*="language-"],
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #9efeff;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+
+  font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-weight: 400;
+  font-size: .95rem;
+  line-height: 1.3;
+
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px #222245;
+
+  margin-bottom: 25px !important;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  color: inherit;
+  background: #a599e9;
+}
+
+code:not([class]) {
+  padding: 2px 4px;
+  font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: .875rem;
+  background-color: #FAFAFA;
+  border: 1px solid #EAEAEA;
+  border-radius: 4px;
+}
+
+/* Code blocks. */
+pre[class*='language-'] {
+  padding: 1em;
+  border-radius: 4px;
+
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #1e1e3f;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+}
+
+.token {
+  font-weight: 400;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+  color: #b362ff;
+}
+
+.token.delimiter,
+.token.keyword,
+.token.selector,
+.token.important,
+.token.atrule {
+  color: #ff9d00;
+}
+
+.token.operator,
+.token.attr-name {
+  color: rgb(255, 180, 84);
+}
+
+.token.punctuation {
+  color: #ffffff;
+}
+
+.token.boolean {
+  color: rgb(255, 98, 140);
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.builtin {
+  color: rgb(255, 157, 0);
+}
+
+.token.entity,
+.token.symbol {
+  color: #6897bb;
+}
+
+.token.number {
+  color: #ff628c;
+}
+
+.token.property,
+.token.constant,
+.token.variable {
+  color: #ff628c;
+}
+
+.token.string,
+.token.char {
+  color: #a5ff90;
+}
+
+.token.attr-value,
+.token.attr-value .punctuation {
+  color: #a5c261;
+}
+
+.token.attr-value .punctuation:first-child {
+  color: #a9b7c6;
+}
+
+.token.url {
+  color: #287bde;
+  text-decoration: underline;
+}
+
+.token.function {
+  color: rgb(250, 208, 0);
+}
+
+.token.regex {
+  background: #364135;
+}
+
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.inserted {
+  background: #00ff00;
+}
+
+.token.deleted {
+  background: #ff000d;
+}
+
+code.language-css .token.property,
+code.language-css .token.property + .token.punctuation {
+  color: #a9b7c6;
+}
+
+code.language-css .token.id {
+  color: #ffc66d;
+}
+
+code.language-css .token.selector > .token.class,
+code.language-css .token.selector > .token.attribute,
+code.language-css .token.selector > .token.pseudo-class,
+code.language-css .token.selector > .token.pseudo-element {
+  color: #ffc66d;
+}
+
+.token.class-name {
+  color: #fb94ff;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  background: none;
+}
+
+pre .line-highlight,
+pre .line-highlight.line-highlight,
+pre > code.line-highlight {
+  margin-top: 36px;
+  background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent);
+}
+
+pre .line-highlight:before,
+pre > code.line-highlight:before,
+pre .line-highlight[data-end]:after,
+pre > code.line-highlight[data-end]:after {
+  content: '';
+}

src/pages/[roadmapId].astro

@@ -1,5 +1,6 @@
 ---
 import InteractiveRoadamp from "../components/InteractiveRoadmap/InteractiveRoadmap.astro";
+import MarkdownRoadmap from "../components/MarkdownRoadmap/MarkdownRoadmap.astro";
 import RoadmapHeader from "../components/RoadmapHeader.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { getRoadmapIds, RoadmapFrontmatter } from "../lib/roadmap";
@@ -40,5 +41,7 @@ const frontmatter = file.frontmatter as RoadmapFrontmatter;
     )
   }
 
-  <file.Content />
+  <MarkdownRoadmap>
+    <file.Content />
+  </MarkdownRoadmap>
 </BaseLayout>