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>

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).

library/modules/markdown/markdown-node.md

@@ -0,0 +1,30 @@
+---
+title: Markdown
+hide_title: true
+---
+
+<##head##>
+# Markdown
+
+This node enables you to use Markdown in Noodl.
+
+![](/library/modules/markdown/markdown-nodes.png)
+<##head##>
+
+## Inputs
+
+**CSS Class**  
+The class name that'll be set on a wrapper `<div>` around the resulting HTML output. This is important for styling the Markdown with CSS.
+
+**Source**  
+The markdown source.
+
+**Allow HTML**  
+If this is enabled any HTML in the *Source* will be rendered as HTML. Be mindful of security risks if the markdown source originates in some type of end user input.
+
+**Open links in tab**  
+* `true` Links in the markdown open in a new tab
+* `false` Links in the markdown open in the same window
+
+**Mounted**  
+This property is used to completely remove the node from the DOM. If this property is set to false the node is removed from the DOM.