Michael Czechowski
739470e045
- 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
198 lines
6.6 KiB
JSON
198 lines
6.6 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "markdown-basics",
|
|
"title": "Markdown Basics",
|
|
"description": "Learn to format text documents with Markdown, a simple and readable markup language used everywhere from GitHub to note-taking apps.",
|
|
"mode": "markdown",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "md-headings",
|
|
"title": "Headings",
|
|
"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>",
|
|
"task": "Create a main heading by typing <kbd># Hello</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "# Hello",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "^#\\s+.+",
|
|
"message": "Start with <kbd>#</kbd> followed by a space and your heading text"
|
|
},
|
|
{
|
|
"type": "contains",
|
|
"value": "Hello",
|
|
"message": "Your heading should contain <kbd>Hello</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "md-heading-levels",
|
|
"title": "Heading Levels",
|
|
"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.",
|
|
"task": "Create an h2 heading with <kbd>## About</kbd> followed by an h3 heading with <kbd>### Details</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "## About\n\n### Details",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "^##\\s+About",
|
|
"message": "Start with <kbd>## About</kbd>"
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "###\\s+Details",
|
|
"message": "Add <kbd>### Details</kbd> for the h3 heading"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "md-bold",
|
|
"title": "Bold Text",
|
|
"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.",
|
|
"task": "Make the word <kbd>important</kbd> bold by wrapping it with <kbd>**</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "",
|
|
"sandboxCSS": "",
|
|
"initialCode": "This is important text.",
|
|
"solution": "This is **important** text.",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "\\*\\*important\\*\\*",
|
|
"message": "Wrap <kbd>important</kbd> with double asterisks: <kbd>**important**</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "md-italic",
|
|
"title": "Italic Text",
|
|
"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.",
|
|
"task": "Make the word <kbd>elegant</kbd> italic by wrapping it with <kbd>*</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "",
|
|
"sandboxCSS": "",
|
|
"initialCode": "A simple and elegant solution.",
|
|
"solution": "A simple and *elegant* solution.",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "\\*elegant\\*",
|
|
"message": "Wrap <kbd>elegant</kbd> with single asterisks: <kbd>*elegant*</kbd>"
|
|
},
|
|
{
|
|
"type": "not_contains",
|
|
"value": "**elegant**",
|
|
"message": "Use single asterisks for italic, not double"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "md-unordered-list",
|
|
"title": "Bullet Lists",
|
|
"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.",
|
|
"task": "Create a bullet list with three items: <kbd>Apple</kbd>, <kbd>Banana</kbd>, <kbd>Cherry</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "- Apple\n- Banana\n- Cherry",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "^[-*+]\\s+Apple",
|
|
"message": "Start with a dash, asterisk, or plus followed by <kbd>Apple</kbd>"
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "[-*+]\\s+Banana",
|
|
"message": "Add <kbd>Banana</kbd> as a list item"
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "[-*+]\\s+Cherry",
|
|
"message": "Add <kbd>Cherry</kbd> as a list item"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "md-ordered-list",
|
|
"title": "Numbered Lists",
|
|
"description": "Create numbered lists by starting lines with <kbd>1.</kbd>, <kbd>2.</kbd>, etc. Markdown automatically numbers them in sequence.",
|
|
"task": "Create a numbered list: <kbd>Wake up</kbd>, <kbd>Eat breakfast</kbd>, <kbd>Start coding</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "1. Wake up\n2. Eat breakfast\n3. Start coding",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "\\d+\\.\\s+Wake up",
|
|
"message": "Start with a number and period: <kbd>1. Wake up</kbd>"
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "\\d+\\.\\s+Eat breakfast",
|
|
"message": "Add <kbd>Eat breakfast</kbd> as a numbered item"
|
|
},
|
|
{
|
|
"type": "regex",
|
|
"value": "\\d+\\.\\s+Start coding",
|
|
"message": "Add <kbd>Start coding</kbd> as a numbered item"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "md-links",
|
|
"title": "Links",
|
|
"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.",
|
|
"task": "Create a link that shows <kbd>Google</kbd> and goes to <kbd>https://google.com</kbd>",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "[Google](https://google.com)",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "\\[Google\\]\\(https?://google\\.com\\)",
|
|
"message": "Use the format <kbd>[Google](https://google.com)</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "md-inline-code",
|
|
"title": "Inline Code",
|
|
"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.",
|
|
"task": "Format <kbd>npm install</kbd> as inline code using backticks",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "",
|
|
"sandboxCSS": "",
|
|
"initialCode": "Run npm install to install dependencies.",
|
|
"solution": "Run `npm install` to install dependencies.",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "regex",
|
|
"value": "`npm install`",
|
|
"message": "Wrap <kbd>npm install</kbd> with backticks: <kbd>`npm install`</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|