Want more?
  • Buzz

    A powerful Javascript audio library over the HTML5 audio element.

  • Vegas

    A jQuery plugin to to add beautiful fullscreen backgrounds to your webpages and create amazing Slideshows.

  • SundayMorning

    A jQuery plugin to translate content on the fly.

  • Face Detection

    A jQuery plugin to detect faces in pictures.

Documentation 1.1


1. Include jQuery and markItUp! javascript files.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>

2. Include the JSon file with the settings of your markup set. The default one in this example.

<script type="text/javascript" src="markitup/sets/default/set.js"></script>

Or define your settings directly in the page

<script type="text/javascript" >
   mySettings = { ... }

3. Include the CSS files.

<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />

4. Then plug markItUp! on a specific textarea by Id

<script type="text/javascript" >
   $(document).ready(function() {
<textarea id="markItUp"></textarea>

Or on some specific textareas by class

<script type="text/javascript" >
   $(document).ready(function() {
<textarea class="markItUp"></textarea>
<textarea class="markItUp"></textarea>

or on all textareas

<script type="text/javascript" >
   $(document).ready(function() {


Differents insertion mode can be used by pressing key.
Opera doesn’t fire event on Ctrl, Shift, Alt keys.

Ctrl Key

Ctrl + Click on a button: Call a markup insertion and get the selection back.

Shift Key

Shift + Click on a button: Call a markup insertion and get the selection with new added markups.

Ctrl Key + “Key” triggers the button with accessKey defined.

Ctrl+Shift Keys

Ctrl + Shift + Click on a button: Call a markup insertion on every lines of the selection instead of the whole selection.

Alt Key

Alt Key + Click on a button: Call an alternative markup insertion if defined (See MagicMarkups).


Graphic customization

Before markItUp!

Before markItUp!

After markItUp!

After markItUp!


Markup language customization

Magic Markups

Some of the properties above accept special markups like [![a]!], [![a:!:b]!] to display a prompt window and (!(a)!), (!(a|!|b)!) to call an alternative insertion when Alt Key is hold (when supported by the browser).

Ex. Ask for Src with Http:// default value and then ask for Alt text before inserting <img src="..." alt="..." />

replaceWith:'<img src="[![Src:!:http://]!]" alt="[![Alt text]!]" />'

Ex. Insert <p> or <p style="text-align:justify"> if Alt key is hold.

openWith:'<p(!( style="text-align:justify")!)>'

Ex. Insert <td> and </td> or <th> and </th> if Alt key is hold.

openWith:'<(!(td|!|th)!)>', closeWith:'</(!(td|!|th)!)>'

Ex. Insert <p> or ask Class before insering <p class="..."> if Alt key is hold.

openWith:'<p(!( class="[![Class]!]")!)>'


When a callback function is called, the parameters below are passed.

{ name:'Strong',
  beforeInsert:function(h) {
    text = "You've just click the "+h.name+" button ";
    text+= "which will wrap '"+h.selection+"' ";
    text+= "with "+h.openWith+" and "+h.closeWith+".";
  afterInsert:function(h) {
    text = "The result is now:\n";
    text+= $(h.textarea).val();

External call of markItUp!

You can use the markItUp! features from anywhere in the page. You can use any properties as in the markupset section, (except *). If you have several instances and no target is defined, the job will be done in the focused editor.

Ex. Wrap selection with <strong></strong> in the focused markItUp! editor.

$.markItUp({ openWith:'<strong>', closeWith:'</strong>' } );

Ex. Wrap selection with [b][/b] in the markItUp! editor with #bbcode id.

$.markItUp({ target:'#bbcode', openWith:'[b]', closeWith:'[/b]' } );

Html template

If you're using markItUp! as a HTML editor, you don't need any parser and propably want to use the built-in HTML preview. Since 1.1, markItUp! uses a template to display the content into the layout you want with a complete control on its content, Css, styles, charsets, scripts, ...

Just edit the preview.html file in markitup/templates/preview.html. Note that the content will replace the <!-- content --> comment.

In order to link external files as Css files or scripts, use ~/ to refer to the markItUp! root.

<title>markItUp! preview template</title>
<link rel="stylesheet" type="text/css" href="~/templates/preview.css" />

You can use different template for different instances.