Work
Subscribe1 Apr
Wiki to HTML using JavaScript
In building the jQuery API browser, since the source of the API comes from the wiki pages over at docs.jquery.com, I had to handle some wiki parsing and convert it to HTML.
However, the more I browsed the API, the more I realised there were aspects of wiki parsing I had missed.
So I built a (fairly) fully fledged wiki parser in JavaScript.
I've not run any serious performance tests, but as simple parsing goes it does the job.
There's two different modes you can use it - either straight function or extending the String object. Just change the boolean at the top of the script to flip between modes to suit your code.
Example usage
// include the script
var wikiContents = document.getElementById('wiki-content');
wikiContents.innerHTML = wikiContents.innerHTML.wiki2html();There's also a simple check method in the script that tests if the content looks like wiki text:
// include the script
var wikiContents = document.getElementById('wiki-content');
if (wikiContents.innerHTML.iswiki()) {
wikiContents.innerHTML = wikiContents.innerHTML.wiki2html();
}Notes
- The wiki conversion is based on Wikipedia's cheatsheet.
- It doesn't support images since the cheatsheet references them from an internal database.
Any feedback or bugs, let me know.
I guess it's also worth noting that this is MediaWiki-specific syntax. (Which means it doesn't handle Trac wiki, TiddlyWiki, etc...)
Regardless, congrats on the code.. This will be quite useful.
(... and OMFG. doubleclick to edit blog comments!!!!! amazing.
You gotta try out Python Remy. You get to use awesome modules like Beautiful Soup for parsing pages.
@Paul - darn, I've not played with wikis too much, but I had a sneaking suspicion that there was more than one type of format. I'm thinking about whether I can create a simple grammar that can be changed to support different wikis.
@Yansky - I'm actually thinking about using Python to do some parsing of the jQuery API in to a JSON format for the next version of the API browser.
Very cool, much better than others such as TinyMCE - how I loathe that!
@Chris - if you don't like TinyMCE (I'm with you on that - I prefer to rely on plain text), you should also look at Markdown. It's incredibly simple for non-techies to learn.
I use it for all my blog posts too.
hello,it does not work correctly in IE if i input the string like this
# hi
# hello
# lala
# ok
in your demo.
it shows
1. hi
1. hello
2. lala
1. ok
but in firefox it show well.i dont know why it is,and how to correct it ?
thanks.