Using the markItUp JavaScript plugin
Learn how to integrate the markItUp JavaScript plugin into your website, including setup instructions and code examples.
About the markItUp plugin
The markItUp plugin is a JavaScript-based tool that adds markup editing capabilities to any <textarea> element on a web page. You can use it to format text as HTML, add Wiki syntax, and more.
See examples in action: markItUp examples
Using the markItUp plugin
Follow these steps to use the plugin on your website:
-
Go to markItUp downloads in your browser.
-
Download the latest
.ziprelease and extract the files. You should have a folder namedlatest. -
Upload the
latestfolder to thepublic_htmldirectory of your ruachost.com account using FTP or SCP. -
Create an HTML page that loads the plugin. Here's an example setup:
<html>
<head>
<!-- Load jQuery and markItUp JavaScript files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<!-- Load default plugin settings -->
<script type="text/javascript" src="markitup/sets/default/set.js"></script>
<!-- Load 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" />
<!-- Link the textarea to markItUp -->
<script type="text/javascript">
$(document).ready(function() {
$("#myEditBox").markItUp(mySettings);
});
</script>
</head>
<body>
<textarea id="myEditBox"></textarea>
</body>
</html>-
Replace
#myEditBoxwith the ID of your<textarea>element. -
You can customize the plugin settings by editing the
set.jsconfiguration file.
More information
-
General plugin info: markItUp
-
Online documentation: markItUp documentation
