Skip to content

Commit 739470e

Browse files
nextlevelshitnextlevelshit
committed
feat: add Markdown learning module with 8 beginner lessons
- Add markdown-basics module with lessons for headings, text formatting, lists, links, and inline code - Integrate markdown section with blue color theme (#5b8dd9) - Add markdown mode support in CodeEditor and LessonEngine - Add markdown preview rendering using marked library - Add section overview page with educational content - Add markdown reference page with syntax guide - Add i18n translations for 6 languages (EN, DE, PL, ES, AR, UK) - Update router to recognize #markdown as section route - Add all section-specific CSS styles for markdown theme
1 parent 07aafa0 commit 739470e

14 files changed

Lines changed: 627 additions & 26 deletions

‎lessons/40-markdown-basics.json‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
{
2+
"$schema": "../schemas/code-crispies-module-schema.json",
3+
"id": "markdown-basics",
4+
"title": "Markdown Basics",
5+
"description": "Learn to format text documents with Markdown, a simple and readable markup language used everywhere from GitHub to note-taking apps.",
6+
"mode": "markdown",
7+
"difficulty": "beginner",
8+
"lessons": [
9+
{
10+
"id": "md-headings",
11+
"title": "Headings",
12+
"description": "Markdown uses hash symbols <kbd>#</kbd> to create headings. One <kbd>#</kbd> creates the largest heading (h1), two <kbd>##</kbd> creates a smaller heading (h2), and so on up to six levels.<br><br><pre># Main Title\n## Section\n### Subsection</pre>",
13+
"task": "Create a main heading by typing <kbd># Hello</kbd>",
14+
"previewHTML": "",
15+
"previewBaseCSS": "",
16+
"sandboxCSS": "",
17+
"initialCode": "",
18+
"solution": "# Hello",
19+
"previewContainer": "preview-area",
20+
"validations": [
21+
{
22+
"type": "regex",
23+
"value": "^#\\s+.+",
24+
"message": "Start with <kbd>#</kbd> followed by a space and your heading text"
25+
},
26+
{
27+
"type": "contains",
28+
"value": "Hello",
29+
"message": "Your heading should contain <kbd>Hello</kbd>"
30+
}
31+
]
32+
},
33+
{
34+
"id": "md-heading-levels",
35+
"title": "Heading Levels",
36+
"description": "Use more <kbd>#</kbd> symbols for smaller headings. <kbd>##</kbd> creates an h2, <kbd>###</kbd> an h3. This creates a clear document structure with visual hierarchy.",
37+
"task": "Create an h2 heading with <kbd>## About</kbd> followed by an h3 heading with <kbd>### Details</kbd>",
38+
"previewHTML": "",
39+
"previewBaseCSS": "",
40+
"sandboxCSS": "",
41+
"initialCode": "",
42+
"solution": "## About\n\n### Details",
43+
"previewContainer": "preview-area",
44+
"validations": [
45+
{
46+
"type": "regex",
47+
"value": "^##\\s+About",
48+
"message": "Start with <kbd>## About</kbd>"
49+
},
50+
{
51+
"type": "regex",
52+
"value": "###\\s+Details",
53+
"message": "Add <kbd>### Details</kbd> for the h3 heading"
54+
}
55+
]
56+
},
57+
{
58+
"id": "md-bold",
59+
"title": "Bold Text",
60+
"description": "Wrap text in double asterisks <kbd>**</kbd> or double underscores <kbd>__</kbd> to make it <strong>bold</strong>. This emphasizes important words or phrases.",
61+
"task": "Make the word <kbd>important</kbd> bold by wrapping it with <kbd>**</kbd>",
62+
"previewHTML": "",
63+
"previewBaseCSS": "",
64+
"sandboxCSS": "",
65+
"initialCode": "This is important text.",
66+
"solution": "This is **important** text.",
67+
"previewContainer": "preview-area",
68+
"validations": [
69+
{
70+
"type": "regex",
71+
"value": "\\*\\*important\\*\\*",
72+
"message": "Wrap <kbd>important</kbd> with double asterisks: <kbd>**important**</kbd>"
73+
}
74+
]
75+
},
76+
{
77+
"id": "md-italic",
78+
"title": "Italic Text",
79+
"description": "Wrap text in single asterisks <kbd>*</kbd> or single underscores <kbd>_</kbd> to make it <em>italic</em>. Use this for subtle emphasis or titles of works.",
80+
"task": "Make the word <kbd>elegant</kbd> italic by wrapping it with <kbd>*</kbd>",
81+
"previewHTML": "",
82+
"previewBaseCSS": "",
83+
"sandboxCSS": "",
84+
"initialCode": "A simple and elegant solution.",
85+
"solution": "A simple and *elegant* solution.",
86+
"previewContainer": "preview-area",
87+
"validations": [
88+
{
89+
"type": "regex",
90+
"value": "\\*elegant\\*",
91+
"message": "Wrap <kbd>elegant</kbd> with single asterisks: <kbd>*elegant*</kbd>"
92+
},
93+
{
94+
"type": "not_contains",
95+
"value": "**elegant**",
96+
"message": "Use single asterisks for italic, not double"
97+
}
98+
]
99+
},
100+
{
101+
"id": "md-unordered-list",
102+
"title": "Bullet Lists",
103+
"description": "Create bullet lists using <kbd>-</kbd>, <kbd>*</kbd>, or <kbd>+</kbd> at the start of each line. Each item goes on its own line.",
104+
"task": "Create a bullet list with three items: <kbd>Apple</kbd>, <kbd>Banana</kbd>, <kbd>Cherry</kbd>",
105+
"previewHTML": "",
106+
"previewBaseCSS": "",
107+
"sandboxCSS": "",
108+
"initialCode": "",
109+
"solution": "- Apple\n- Banana\n- Cherry",
110+
"previewContainer": "preview-area",
111+
"validations": [
112+
{
113+
"type": "regex",
114+
"value": "^[-*+]\\s+Apple",
115+
"message": "Start with a dash, asterisk, or plus followed by <kbd>Apple</kbd>"
116+
},
117+
{
118+
"type": "regex",
119+
"value": "[-*+]\\s+Banana",
120+
"message": "Add <kbd>Banana</kbd> as a list item"
121+
},
122+
{
123+
"type": "regex",
124+
"value": "[-*+]\\s+Cherry",
125+
"message": "Add <kbd>Cherry</kbd> as a list item"
126+
}
127+
]
128+
},
129+
{
130+
"id": "md-ordered-list",
131+
"title": "Numbered Lists",
132+
"description": "Create numbered lists by starting lines with <kbd>1.</kbd>, <kbd>2.</kbd>, etc. Markdown automatically numbers them in sequence.",
133+
"task": "Create a numbered list: <kbd>Wake up</kbd>, <kbd>Eat breakfast</kbd>, <kbd>Start coding</kbd>",
134+
"previewHTML": "",
135+
"previewBaseCSS": "",
136+
"sandboxCSS": "",
137+
"initialCode": "",
138+
"solution": "1. Wake up\n2. Eat breakfast\n3. Start coding",
139+
"previewContainer": "preview-area",
140+
"validations": [
141+
{
142+
"type": "regex",
143+
"value": "\\d+\\.\\s+Wake up",
144+
"message": "Start with a number and period: <kbd>1. Wake up</kbd>"
145+
},
146+
{
147+
"type": "regex",
148+
"value": "\\d+\\.\\s+Eat breakfast",
149+
"message": "Add <kbd>Eat breakfast</kbd> as a numbered item"
150+
},
151+
{
152+
"type": "regex",
153+
"value": "\\d+\\.\\s+Start coding",
154+
"message": "Add <kbd>Start coding</kbd> as a numbered item"
155+
}
156+
]
157+
},
158+
{
159+
"id": "md-links",
160+
"title": "Links",
161+
"description": "Create links with <kbd>[text](url)</kbd>. The text in brackets is what readers see; the URL in parentheses is where they go when clicked.",
162+
"task": "Create a link that shows <kbd>Google</kbd> and goes to <kbd>https://google.com</kbd>",
163+
"previewHTML": "",
164+
"previewBaseCSS": "",
165+
"sandboxCSS": "",
166+
"initialCode": "",
167+
"solution": "[Google](https://google.com)",
168+
"previewContainer": "preview-area",
169+
"validations": [
170+
{
171+
"type": "regex",
172+
"value": "\\[Google\\]\\(https?://google\\.com\\)",
173+
"message": "Use the format <kbd>[Google](https://google.com)</kbd>"
174+
}
175+
]
176+
},
177+
{
178+
"id": "md-inline-code",
179+
"title": "Inline Code",
180+
"description": "Wrap text in backticks <kbd>`</kbd> to format it as code. This is useful for variable names, commands, or short code snippets in your text.",
181+
"task": "Format <kbd>npm install</kbd> as inline code using backticks",
182+
"previewHTML": "",
183+
"previewBaseCSS": "",
184+
"sandboxCSS": "",
185+
"initialCode": "Run npm install to install dependencies.",
186+
"solution": "Run `npm install` to install dependencies.",
187+
"previewContainer": "preview-area",
188+
"validations": [
189+
{
190+
"type": "regex",
191+
"value": "`npm install`",
192+
"message": "Wrap <kbd>npm install</kbd> with backticks: <kbd>`npm install`</kbd>"
193+
}
194+
]
195+
}
196+
]
197+
}

‎package-lock.json‎

Lines changed: 42 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)