"Today, I'd like to introduce you to a simple and user-friendly Markdown editor, SimpleMDE. 

Here's how to set it up:

1. First,  include the necessary JavaScript and CSS files files through a Content Delivery Network (CDN):

   <script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
   

2. Subsequently, create an HTML structure to initialize the editor. If an ID is not specified, SimpleMDE will use the first 'textarea' element found:

    <textarea id="SimpleMDE" ></textarea>
   

3. Following this, initialize the editor upon the page's load with the following script:

   document.addEventListener('DOMContentLoaded', function () {
      const simplemde = new SimpleMDE({
        element: document.querySelector('#SimpleMDE'),
          renderingConfig: {
            codeSyntaxHighlighting: true
          }
      });
   }
   

4. Upon launching your HTML file, the SimpleMDE editor should be visible and ready for use.

   

5. To extract the plain text and HTML content after editing, you can use:

   const markdownContent = simplemde.value();
   const renderedHtml = simplemde.markdown(markdownContent);
   

   
   

6. Consideration must also be given to retrieving previously edited data when re-entering the editor. You can achieve this by loading data from the backend into the correct textarea. This tutorial employs the Thymeleaf solution for this purpose:

   <textarea id="SimpleMDE" th:text="${portfolioContent.content}"></textarea>
   

Congratulations! By now, you should be able to use Markdown to edit your articles.

reference

1. SimpleMDE
2. simplemde-markdown-editor git rep