diff --git a/package-lock.json b/package-lock.json
index 2176df068..1859f98c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
"tailwindcss": "^3.2.4"
},
"devDependencies": {
+ "@tailwindcss/typography": "^0.5.8",
"prettier": "^2.8.1",
"prettier-plugin-astro": "^0.7.0"
}
@@ -678,6 +679,34 @@
"@proload/core": "^0.3.2"
}
},
+ "node_modules/@tailwindcss/typography": {
+ "version": "0.5.8",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
+ "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
+ "dev": true,
+ "dependencies": {
+ "lodash.castarray": "^4.4.0",
+ "lodash.isplainobject": "^4.0.6",
+ "lodash.merge": "^4.6.2",
+ "postcss-selector-parser": "6.0.10"
+ },
+ "peerDependencies": {
+ "tailwindcss": ">=3.0.0 || insiders"
+ }
+ },
+ "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+ "version": "6.0.10",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+ "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+ "dev": true,
+ "dependencies": {
+ "cssesc": "^3.0.0",
+ "util-deprecate": "^1.0.2"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/@types/acorn": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -3075,6 +3104,24 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/lodash.castarray": {
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+ "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+ "dev": true
+ },
+ "node_modules/lodash.isplainobject": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+ "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+ "dev": true
+ },
+ "node_modules/lodash.merge": {
+ "version": "4.6.2",
+ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+ "dev": true
+ },
"node_modules/log-symbols": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
@@ -6687,6 +6734,30 @@
"tsm": "^2.1.4"
}
},
+ "@tailwindcss/typography": {
+ "version": "0.5.8",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.8.tgz",
+ "integrity": "sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==",
+ "dev": true,
+ "requires": {
+ "lodash.castarray": "^4.4.0",
+ "lodash.isplainobject": "^4.0.6",
+ "lodash.merge": "^4.6.2",
+ "postcss-selector-parser": "6.0.10"
+ },
+ "dependencies": {
+ "postcss-selector-parser": {
+ "version": "6.0.10",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+ "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+ "dev": true,
+ "requires": {
+ "cssesc": "^3.0.0",
+ "util-deprecate": "^1.0.2"
+ }
+ }
+ }
+ },
"@types/acorn": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -8258,6 +8329,24 @@
"p-locate": "^5.0.0"
}
},
+ "lodash.castarray": {
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+ "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+ "dev": true
+ },
+ "lodash.isplainobject": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+ "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+ "dev": true
+ },
+ "lodash.merge": {
+ "version": "4.6.2",
+ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+ "dev": true
+ },
"log-symbols": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
diff --git a/package.json b/package.json
index 7c6fdbe49..ccb7f997f 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"tailwindcss": "^3.2.4"
},
"devDependencies": {
+ "@tailwindcss/typography": "^0.5.8",
"prettier": "^2.8.1",
"prettier-plugin-astro": "^0.7.0"
}
diff --git a/src/components/MarkdownRoadmap/MarkdownRoadmap.astro b/src/components/MarkdownRoadmap/MarkdownRoadmap.astro
new file mode 100644
index 000000000..1a0ec20d2
--- /dev/null
+++ b/src/components/MarkdownRoadmap/MarkdownRoadmap.astro
@@ -0,0 +1,9 @@
+---
+import "./Prism.css";
+---
+
+
diff --git a/src/components/MarkdownRoadmap/Prism.css b/src/components/MarkdownRoadmap/Prism.css
new file mode 100644
index 000000000..699c9741b
--- /dev/null
+++ b/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: '';
+}
diff --git a/src/pages/[roadmapId].astro b/src/pages/[roadmapId].astro
index 6d21997ee..1b02a4a08 100644
--- a/src/pages/[roadmapId].astro
+++ b/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;
)
}
-
+
+
+
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index b145b309f..cd7e90fbd 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,11 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}'],
- theme: {
- extend: {},
- container: {
- center: true,
- },
- },
- plugins: [],
-}
+ content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}"],
+ theme: {
+ extend: {},
+ container: {
+ center: true,
+ },
+ },
+ plugins: [require("@tailwindcss/typography")],
+};