docs: added tutuorial on how to create markdown editor

2024-03-22 13:30:55 +08:00 · 2022-04-09 16:07:25 +03:00 · 2022-04-09 16:07:25 +03:00 · fae04b6549
commit fae04b6549
parent c4eef0b8c1
3 changed files with 145 additions and 1 deletions
--- a/docs/assets/markdown-editor.png
+++ b/docs/assets/markdown-editor.png
--- a/docs/tutorials/index.md
+++ b/docs/tutorials/index.md
@ -1,3 +1,4 @@
 # Tutorials

 * [Add default class for each HTML element](add-default-class-to-html.md)
+* [Markdown editor with Showdown](markdown-editor-with-showdown.md)
--- a/docs/tutorials/markdown-editor-with-showdown.md
+++ b/docs/tutorials/markdown-editor-with-showdown.md
@ -0,0 +1,143 @@
+# Markdown editor with Showdown
+
+## Introduction
+
+In this tutorial, you will create a simple in-browser Markdown editor using Showdown and some of its extensions. The purpose is to show how easy it is to include and configure Showdown in your project.
+
+The fully working example you can see in [Fiddle][1].
+
+## Step 1: Prepare project
+
+1. Install [node.js](https://nodejs.org/en/).
+1. Install project package management tool
+
+    !!! info ""
+        Showdown core library doesn't have any dependencies so the setup is pretty straightforward. However, you are strongly encouraged to use a package manager such as [**npm**](http://npmjs.com) or [**yarn**](https://yarnpkg.com) to manage project dependencies.
+
+    To install package management tool:
+
+    1. Create a directory called `showdown-editor` and recreate the following structure:
+
+        ```
+        showdown-editor
+        ├── css
+        │   └── style.css
+        ├── js
+        │   └── script.js
+        └── index.html
+        ```
+
+    1. Initialize `package.json` file by running the following interactive console command:
+
+        ```
+        npm init -y
+        ```
+
+        This command creates `package.json` file in the root of the project folder, and populates the default content that you can change later if you wish.
+
+## Step 2: Install Showdown
+
+Inside the `showdown-editor` directory, run the following command:
+
+```
+npm install showdown --save
+```
+
+This command will install `showdown` inside the `node_modules` directory and save `showdown` as a dependency in the `package.json` file.
+
+## Step 3: Update project files
+
+Add the following content to the corresponding project files:
+
+=== "index.html"
+
+    ```html
+    <!DOCTYPE HTML>
+    <html>
+    <head>
+      <meta charset="UTF-8"/>
+      <link rel="stylesheet" href="css/style.css"/>
+    </head>
+    <body>
+      
+      <textarea id="sourceTA" rows="10" cols="82">
+    Showdown Tutorial
+    =================
+
+    This is a showdown tutorial. 
+
+    Showdown supports a number of cool features, namely:
+
+      - headers 
+      - lists
+      - and other stuff too
+      
+    It is also possible to include code:
+
+        var foo = 'bar';
+        
+        var baz = {
+          markdown: 'is great',
+          showdown: 'is awesome'
+        }
+
+    Don't forget to check the [extensions wiki][1].
+
+    [1]: https://github.com/showdownjs/showdown/wiki/extensions
+      </textarea>
+      <hr/>
+      <button id="runBtn" onClick="run()">Convert</button>
+      <hr/>
+      <div id="targetDiv"></div>
+      
+      <script src="node_modules/showdown/dist/showdown.min.js"></script>
+      <script src="js/script.js"></script>
+    </body>
+    </html>
+    ```
+
+    !!! warning ""
+        Please note how Showdown and the script file are included to the `index.html` via the `script` tag at the bottom of the file.
+
+=== "style.css"
+
+    ```css
+    #sourceTA {
+      display: block;
+    }
+    #targetDiv {
+      border: 1px dashed #333333;
+      width: 600px;
+      height: 400px;
+    }
+    ```
+
+=== "script.js"
+
+    ```js
+    function run() {
+      var text = document.getElementById('sourceTA').value,
+      target = document.getElementById('targetDiv'),
+      converter = new showdown.Converter(),
+      html = converter.makeHtml(text);
+      
+      target.innerHTML = html;
+    }
+    ```
+
+    The `script.js` file is simple: when the `runBtn` button is clicked, the script gets the text of the textarea, passes it through Showdown to convert the markdown text into HTML. The resulting HTML is then put inside the `targetDiv`, replacing the previous content.
+
+## Step 4: Check the result
+
+1. Open your `index.html` file. You should see your editor with prefilled markdown text in the text area.
+1. Click `Convert` button. You show see the text to be converted to HTML:
+
+    ![](../assets/markdown-editor.png)
+
+The fully working example you can see in [Fiddle][1].
+
+## Conclusion
+
+Congratulations! :tada: You have successfully created a simple Markdown editor!
+
+[1]: http://jsfiddle.net/tivie/6bnpptkb/