Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
2026-01-11 23:02:54 +01:00 · 2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
--- a/library/modules/markdown/README.md
+++ b/library/modules/markdown/README.md
@@ -0,0 +1,97 @@
+---
+title: Markdown Module
+hide_title: true
+---
+
+# Markdown Module
+
+Markdown in Noodl is a combination of the **Markdown** and **CSS Definition** nodes. The CSS enables styling of all the individual components of the resulting markdown, like headers, lists, images, links, and so on.
+
+## Example
+
+Let's recreate this example.
+
+![](/library/modules/markdown/markdown-example.png)
+
+We'll need three nodes. A **Group**, the **Markdown** node, and a **CSS Definition** node.
+
+![](/library/modules/markdown/markdown-nodes.png)
+
+This is the markdown:
+
+```markdown
+# H1
+
+## H2
+
+### H3
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+Combined emphasis with **asterisks and _underscores_**.
+
+1. First ordered list item
+2. Another item
+
+-   Unordered sub-list.
+
+1. Actual numbers don't matter, just that it's a number
+1. Ordered sub-list
+1. And another item.
+
+-   Unordered list can use asterisks
+
+*   Or minuses
+
+-   Or pluses
+
+[Link to Google](https://www.google.com)
+
+Image:
+![noodl logo](https://uploads-ssl.webflow.com/5ed7a7a9f2bff45062890ed6/5ef31ce42ee3d316fbf5f888_text-logo-black.png)
+
+> Blockquote
+
+Iframe embed:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/YQBndLl1phI" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+```
+
+To get the HTML to render we need to enable the **Allow HTML** input
+!()[/modules/markdown/markdown-allow-html.png]
+
+The styling is done with the **CSS Definition** node. This node allows you to write regular CSS in your Noodl project.
+
+In this example we'll use the following CSS:
+
+```css
+/* Open Sans font added with the help of https://fonts.google.com */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
+
+.markdown {
+    font-family: 'Open Sans';
+    font-size: 16px; /* default font size*/
+}
+
+/* make all h1 blue */
+.markdown h1 {
+    color: blue;
+}
+
+/* style the unordered lists */
+.markdown ul {
+    list-style-type: circle;
+    /* list-style-image: url('sqpurple.gif'); */ /* you can also use images in the project folder */
+}
+
+/* style links */
+.markdown a {
+    text-decoration: none;
+}
+```
+
+The `.markdown` class is the default class name. This can be changed on the **Markdown** node with the _CSS Class_ input.
+
+## Beind the scenes
+
+This module enables you to use [Markdown](https://commonmark.org/help/) in Noodl. It's implemented with [react-markdown](https://github.com/remarkjs/react-markdown) which in turn uses [remark](https://github.com/remarkjs/remark).