A few weeks ago, I had the not-so-crazy idea to write a Markdown renderer in JavaScript. This isn't that hard, Markdown is designed to be easily converted into HTML.

Last night, I realized that BBCode is also designed to be turned into HTML and formatting in Markdown is much more concise than BBCode. Maybe I can write posts faster in Markdown!

This is the result of about a hour of work. The converter uses Regular Expressions to match the Markdown formatting in the input text and replace it with the appropriate BBCode and HTML tags. Here's what I have so far:

Headings
Subheadings
(The Markdown to HTML lets you how down to h4, but I'm too lazy to add this to the BBCode version)
strikethrough
bold
italics
Inline code

Code:
Code
blocks


  • lists
  • more list (it joins adjacent list elements appropriately)


    1. numbered list (html generation for this is in the works)
    65536. oddly ordered numbered list (github doesn't like it but it's a markdown feature)


Quote:

quote
more quote


Links
Horizontal bars:


Images:


This post was converted from Markdown into BBCode using the Markdown -> BBCode converter! You can see the source code for this post here

You can find the converter at https://legend-of-iphoenix.github.io/markdown-bbcode-html/.



To-do

  • Somehow, colors???
  • Code cleanup
  • Bugfixing
  • Escaping? Somehow?
  • Nested lists? Somehow?
  • Make generated HTML a bit nicer-looking. (Apply formatting rules)
  • Clean up the actual website (I think jcgter777 is going to help with this)
  • Add support for more advanced Markdown.
  • Potentially convert BBCode to Markdown?
For the advanced markdown, do you plan to support numbered lists? I'm looking forward to see this project develop. This could be very useful for writing a post offline then converting it to BBCode prior to posting.
Alex wrote:
For the advanced markdown, do you plan to support numbered lists? I'm looking forward to see this project develop. This could be very useful for writing a post offline then converting it to BBCode prior to posting.


That's the plan! Numbered lists will be super easy, assuming you keep the numbers in order. (Thanks for reminding me, I'll add it to the todo list)

I had an idea for a chrome extension that would insert an extra text box into the WYSIWYG editor page for Markdown, and the extension could both do a real-time preview and convert the Markdown into BBCode. Kerm okayed this via PM, and noted that this could easily be expanded to work on other forums, too.

I've been thinking about how I should do colors. I could invent my own specialized version of Markdown, or I could just completely pretend that colors do not exist and leave it up to the end user to insert their own coloring.

I'm working on block quotes now, I think I can just repurpose the code I am using to join list elements into list groups. (Here's how I do lists: I look through the text looking for things that need to be list-ified. Then, I go through the text again looking for groups of list elements and surround them with the appropriate tags. I think this is really clever Smile)
Today, I got alot of work done on both the quotes and the numbered lists!

Neither of them work as well as I would like. We'll just say it's all part of the experience for now, but I think I'll be able to fix it.

Quote:

quote



    1. list
    2. more list

I wasn't really sure how numbered lists should be converted, so it just places list tags around the Markdown. I could do the following, but Markdown lets you throw all kinds of fun, out of order insanity. BBCode doesn't. Should I care? GitHub's Markdown renderer certainly doesn't.

(hand-written BBCode)

  1. 1
  2. 2
  3. 3
Seems like it might be easier to consume HTML as a syntax tree and understand which constructs correspond to bbcode and emit bbcode for those, then strip all the tags you didn't understand.

This skips the tricky bits of actually making sense of markdown, since it's kind of a weirdly-specified markup language and you could take advantage of the many existing markdown transformers.
This is cool! I was wondering, would it be possible to allow text entry in the raw html and the bbcode box as well to see it converted to markdown?
Tari wrote:
Seems like it might be easier to consume HTML as a syntax tree and understand which constructs correspond to bbcode and emit bbcode for those, then strip all the tags you didn't understand.

This skips the tricky bits of actually making sense of markdown, since it's kind of a weirdly-specified markup language and you could take advantage of the many existing markdown transformers.


That's a good idea, and I guess that could work. I want to write my own converter, though, because it will be a good learning experience for some of the more advanced RegEx techniques I will have to use.

Michael2_3B wrote:
This is cool! I was wondering, would it be possible to allow text entry in the raw html and the bbcode box as well to see it converted to markdown?


That's the plan. The markup languages are so similar that I hope this is possible without too much extra work. I think I'm going to finish up some of the Markdown conversion because it would be really cool if all I needed to to convert my readme file into a post was to copy and paste it into a converter (that I wrote).
_iPhoenix_ wrote:
Alex wrote:
For the advanced markdown, do you plan to support numbered lists?


That's the plan! Numbered lists will be super easy, assuming you keep the numbers in order.


I am not very familiar with markdown, I'm just familiar with how Reddit does theirs. But you should be able to just use #. to dignify a numbered bullet. See below:



Granted, I think I've always done ordered numbers when creating a numbered list anyways, but I just want to bring up that in other markdown implementations the number that's typed doesn't really matter.
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 1
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement