Sunday, July 19, 2009

Inline Wiki Syntax using JQuery

I have been kicking this idea for a while and finally got to writing some demo code for it in the form of a JQuery plugin. The idea is to write Wiki code directly into an HTML element, and have it be converted on the fly in the browser.

There are a few benefits to this. First of all, you can use a simple wiki syntax in any webpage (a blog is a good candidate), without the need for a full-blown server-side wiki engine. Second, if you're building a wiki engine, you can have a real-time preview of wiki edits without the need for a server-driven refresh.

Currently, the plugin supports:

* Lists, both ordered (#) and unordered (*) * Basic text formatting- two single apostrophes for ''emphasis'' and three for '''strong''' (five for '''''both''''') * Section headers (!!, !!!, etc.)

For a demo of the code in action, view the source code for the above section (Pretty sneaky.) The JQuery plugin itself can also be found on this page. Here's a more complete example:

This is my standard HTML page. I can have inline wiki code:
<div class="wiki">
!! Welcome to my wiki!
!!! it's pretty simple.
You can have lists:
* pretty easy.
* it's unordered
## but the sublist
## it's ''ordered''!!
* so handy.
!!! it works.
So cool. and You can have ''some'' '''crazy''' '''''formatting'''''.
</div>

Becomes:
This is my standard HTML page. I can have inline wiki code:
!! Welcome to my wiki! !!! it's pretty simple. You can have lists: * pretty easy. * it's unordered ## but the sublist ## it's ''ordered''!! * so handy. !!! it works. So cool. and You can have ''some'' '''crazy''' '''''formatting'''''.

No comments:

Post a Comment