Wrap markdown in appropriate HTML with JavaScript

Question

I've got a content-editable <div>.

When a correct markdown syntax is entered into the div, I need it to add the correct HTML around the outside, but preserve the markdown characters within. For instance:

# My H1

would be parsed to

<h1># My H1</h1>

This is similar to the way iA Writer behaves, and I think Byword does as well.

Anything out there that works like this?

• Schleis: How do you determine what text gets wrapped in what elements?
• alt: @Schleis, markdown syntax.

Answer 1

Sounds like a neat project.

If you're using content-editable, and you want to update the user's input as they're typing, you'll probably need to dive into some fairly gnarly stuff, especially if you want to support IE.

I've actually written two very small libraries Caret and Wysiwyg that could help, take a look at the samples for each.

You can use Caret to watch the user's input, and then use Wysiwyg to do things like wrap the line in an h1 tag. The line wrapping is a little tricky, you can probably look at Caret's source for some hints though.

Even if you don't use either library, they should get you started.

Answer 2

In my understanding, you are trying to create a Markdown editor with a kind of syntax highlighting. I like the idea but I think there is no such thing already existing. Markdown is designed to be "easy-to-read/easy-to-write" enough to avoid having to use a complex editor. Pagedown for instance is a bit inimical to this principle (even if it's a great tool).

Anyway, if you want to implement that yourself you will have multiple choices:

• Upstream of the markdown converter by changing

  # My H1
  

  to

  # # My H1
  

• Downstream of the markdown converter by changing

  <h1>My H1</h1>
  

  to

  <h1># My H1</h1>
  

  But that's not the preferred way since Markdown is not bijective, I guess you don't want to have this kind of conversion:

  My H1
  =====
  

  to

  <h1># My H1</h1>
  

• Modify the markdown converter if you have access to the source code or create your own one.

In any case you will have to be fluent in regular expressions.

Answer 3

if you are dealing with a well formed DOM - look into jquery's wrap functions

.wrap()
.wrapAll()
.wrapInner()

• Adam Sanderson: I don't think this will work for this use case. He needs to wrap arbitrary text content inside of an element as opposed to an html element.

Answer 4

You can start reading something about this stackoverflow question.

You can parse the text in lines using method split and carrier return as the regex. Then with the text divided into an array you can use document.createElement() to dynamically create new elements such as h1 tags. Then add those tags to the content displayer and you will have the format done.

You have to note that there is a lot of work to do because you must take into account multiple situations:

1. What happens if the text is just formatted
2. What happens with the text that is not
3. ¿You want to check it everytime the user inputs a letter?
4. ¿What about the formatting a complete array?

Once thought all this tips and a little bit of javascript code you will have it.

UPDATE: of course that is if you want to create your own library with your own syntax policy (I recommend mixing it with jQuery). If it is not your purpose you can bring some libraries that has been posted on other answers.