Markdown live preview in Textarea?

Question

Are there any Javascript Markdown editing toolbars or libraries that show the live preview within the textarea and hide the formatting marks (**, ___ etc), similar to TinyMCE's implementation?

If not, how would I go about implementing this in jQuery?

I'm currently using MarkItUp, which only shows the preview after the textarea, or in a pop-up.

This post refering to 'BlueCloth' sounds close, but although im interested in general implementation a RoR version isn't very useful at this stage (I'm using Python/Zope).

I'm aware that most of the beauty of Markdown is it's simple text formatting characters, but the site in question is fairly non-technical and I'm largely using the Markdown Python library for it's 'evil' html stipping abilities.

UPDATE: In response to comments, I suppose I'd be happy for the formatting marks to display if typed, but not if the toolbar is used (i.e. I'm assuming GUI users are less technical users).

Or, other toolbars have a 'source' view, which might be an option.

Have you checked these js plugins? https://www.jqueryscript.net/tags.php?/markdown%20editor/ — altsyset, Feb 18 '18 at 10:55

score 1 · Answer 1 · answered Apr 10 '20 at 09:01

1

if you need markdown support right in textarea with no additional GUI, then textarea-markdown might be helpful

answered Apr 10 '20 at 09:01

Seid Akhmed Agitaev

162
2
7

score 1 · Answer 2 · answered Nov 27 '21 at 13:42

I found this library, and here is the js file.
very easy to use, you just add the library in script tag, and use marked.parse() function

  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
        target.innerHTML = marked.parse("#Example");
  </script>

Example

Run the snippet and write something in textarea

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
</head>

<body>
  <textarea id="textareaID">
# Example Title
## list
1. one
1. tow
1. three

  </textarea>
  <div id="content"></div>
  
  <script>
    $("#textareaID").on('input', function (e) {
        document.getElementById('content').innerHTML =
          marked.parse(e.target.value);
    });

  </script>
</body>

</html>

score 0 · Answer 3 · answered Dec 08 '09 at 15:29

0

CKEditor might be too heavy, but it is nice.

answered Dec 08 '09 at 15:29

Upperstage

3,747
8
44
67

Does it use Markdown? Can't find any obvious reference to it on the site. – Jon Hadley Dec 08 '09 at 15:35
1

On a related note, good to see FCKEditor finally got renamed ;) – Jon Hadley Dec 08 '09 at 15:40
CKEditor is a fully JS implementation that uses iFrames. No underlying technology or software. (They even have their own library of JS functions.) – Upperstage Dec 08 '09 at 16:11

score -4 · Answer 4 · answered Dec 08 '09 at 15:29

-4

The only way you can achieve it is using an iframe.

answered Dec 08 '09 at 15:29

Joó Ádám

909
1
11
22

but not in internet explorer @ Jon Hadley – TheHippo Dec 08 '09 at 17:15

Markdown live preview in Textarea?

4 Answers4

Example