We're on Discord! Please join our server now if you don't want to miss anything! (More info) | Join the UCC4 contest! (More info)

* WalrusIRC

You need to have 5 posts and not be part of restricted usergroups in order to use the WalrusIRC embedded shoutbox. However, you can also access our IRC channel called #CodeWalrus via EFnet.

Author Topic: Markdown to HTML and BBCode!  (Read 726 times)

0 Members and 1 Guest are viewing this topic.

Offline _iPhoenix_

  • Custom title
  • Super User
  • Join Date: Mar 2017
  • Location: Location
  • Posts: 662
  • Post Rating Ratio: +16/-1
  • ███████ ▼ ♪ Best music ♫
    • @dj_iPhoenix
    • @UCytgMNPxAMDsxjimvxHf01w
    • Legend-of-iPhoenix
    • @the-legend-of-iphoenix
    • My website.
  • Gender: Male
Markdown to HTML and BBCode!
« on: June 04, 2018, 05:59:15 am »
note, the converter currently is not 100% compatible with CW's BBCode, but compatibility will come eventually! For demonstration purposes, I made no modifications to the output of my program, even though it doesn't work entirely.



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:


[size=20]Headings[/size]
[size=16]Subheadings[/size]
(The Markdown to HTML lets you how down to h4, but I'm too lazy to add this to the BBCode version) 
[strike]strikethrough[/strike] 
bold 
italics 
Inline [mono]code[/mono] 
Code: [Select]
Code
blocks
  • lists
  • more list (it joins adjacent list elements appropriately) 


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
  • Block quotes
  • Somehow, colors???
  • Code cleanup
  • Bugfixing, particularly bugs with italics using asterisks.
  • Escaping? Somehow?
  • Nested lists? Somehow?
  • Ordered lists.
  • 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?


  • Calculators owned: Two TI-84+ CE's
Please spam here: https://legend-of-iphoenix.github.io/spam/

"walruses are better than tuxedo chickens, all hail the great :walrii:" ~ me
Evolution of my avatar:

Offline gameblabla

  • Super User
  • Join Date: May 2015
  • Location:
  • Posts: 800
  • Post Rating Ratio: +15/-7
  • TI-nspire porter
Re: Markdown to HTML and BBCode!
« Reply #1 on: June 04, 2018, 11:09:59 am »
I personally would like to see the exact opposite (From BBcode to Markdown) so i can use it on discord because Markdown has some strange symbols
  • Calculators owned: TI Nspire CX, TI-89

Offline _iPhoenix_

  • Custom title
  • Super User
  • Join Date: Mar 2017
  • Location: Location
  • Posts: 662
  • Post Rating Ratio: +16/-1
  • ███████ ▼ ♪ Best music ♫
    • @dj_iPhoenix
    • @UCytgMNPxAMDsxjimvxHf01w
    • Legend-of-iPhoenix
    • @the-legend-of-iphoenix
    • My website.
  • Gender: Male
Re: Markdown to HTML and BBCode!
« Reply #2 on: June 04, 2018, 07:05:56 pm »
I personally would like to see the exact opposite (From BBcode to Markdown) so i can use it on discord because Markdown has some strange symbols

Yeah, that's the eventual idea. I personally prefer Markdown over BBCode because, as I noted in my post, it is more concise.
  • Calculators owned: Two TI-84+ CE's
Please spam here: https://legend-of-iphoenix.github.io/spam/

"walruses are better than tuxedo chickens, all hail the great :walrii:" ~ me
Evolution of my avatar:

 


You can also use the following HTML or bulletin board code to share it on your page or forum signature!


Also do not forget to check our affiliates below.
Planet Casio TI-Planet Calc.news BroniesQC BosaikNet Velocity Games