Css

See CSS tab for more details...

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

Javascript

See JSon tab for more details. on set.js file.

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

<script language="javascript">
$(document).ready(function()	{
	$('#interaction').markItUp(myInteractionSettings);
});
</script>

$(".module .links a").click(function() {
	href = $(this).attr("href");
	title = $(this).attr("title");
	$.markItUp(
		{ openWith:'<a href="'+href+'" title="'+title+'">',
		  closeWith:'</a>',
		  placeHolder:title }
	);
	return false;
}); 
$(".module .products a").click(function() {
	src = $(this).attr("href");
	alt = $(this).attr("title");
	$.markItUp( 
		{ replaceWith:'<img src="'+src+'" alt="'+alt+'"(!( class="[![Class]!]")!) />' }
	);
	return false;
}); 

Html

<textarea id="interaction" cols="80" rows="20">
	...some stuff...
</textarea>

<div id="linkPlugin">
<div class="module">	
	<h3>Links</h3>
	<div class="links slide">
	...
	<a href="http://www.google.com" title="Google">add to editor</a>
	...
	</div>
	<h3>Products</h3>
	<div class="products slide">
	...
	<a href="pictures/products/prod1.jpg" class="markItUpInsert">add to editor</a></p>
	...
	</div>
</div>